监听粘贴的内容以及文件格式
document.addEventListener("paste", function (event) {
var clipboardData = event.clipboardData;
if (clipboardData.types.includes("application/vnd.ms-excel")) {
console.log(
"粘贴的是 Excel 数据",
clipboardData.getData("text/html")
);
var items = clipboardData.items;
for (var i = 0; i < items.length; i++) {
var item = items[i];
if (item.type === "application/vnd.ms-excel") {
item.getAsString(function (data) {
console.log(data);
});
}
}
} else if (clipboardData.types.includes("text/html")) {
console.log(
"粘贴的是 HTML 数据",
clipboardData.getData("text/html")
);
var html = clipboardData.getData("text/html");
var div = document.createElement("div");
div.innerHTML = html;
var text = div.textContent || div.innerText || "";
console.log(text);
} else if (clipboardData.types.includes("text/plain")) {
var text = clipboardData.getData("text/plain");
var rows = text.split("\n");
var headers = rows.shift().split(",");
if (headers.length > 0) {
console.log("粘贴的是表格数据");
} else {
console.log("粘贴的不是表格数据");
}
} else {
console.log("粘贴的不是 Excel 或表格数据");
}
});
input 里面监听表格内容,并转成table 的内容
handleContentChange(e) {
const content = e.target.value.trim();
this.$emit("on-change", content);
this.handleResolveContent(content);
},
handleResolveContent(content) {
let rows = [];
if (content !== "" && content !== undefined) {
rows = content
.split(/[\n\u0085\u2028\u2029]|\r\n?/g)
.map((row) => {
return row.split("\t");
});
}
const errorIndex = this.handleGetErrorIndex(rows);
const tableData = this.contentToTable(rows);
this.tableColumns = tableData.columns;
this.tableData = tableData.data;
if (errorIndex.length) {
this.$emit("on-error", tableData, errorIndex);
} else {
this.$emit("on-success", tableData);
}
},
handleGetErrorIndex(rows) {
const array = deepCopy(rows);
const errorIndex = [];
if (array.length) {
const colLen = array[0].length;
array.forEach((item, index) => {
if (item.length !== colLen) errorIndex.push(index);
});
}
return errorIndex;
},
contentToTable(rows) {
const array = deepCopy(rows);
let columns = [];
let tableData = [];
if (array.length > 1) {
let titles = array.shift();
columns = titles.map((item, index) => {
return {
title: item,
key: `key${index}`,
};
});
tableData = array.map((item) => {
const res = {};
item.forEach((col, i) => {
res[`key${i}`] = col;
});
return res;
});
}
return {
columns,
data: tableData,
};
},