监听粘贴的内容以及文件格式,转换成表格数据

150 阅读1分钟

监听粘贴的内容以及文件格式

// 解析粘贴的内容,并生成html table
            document.addEventListener("paste", function (event) {
                var clipboardData = event.clipboardData;

                // 检查粘贴内容是否是 Excel 数据
                if (clipboardData.types.includes("application/vnd.ms-excel")) {
                    // 处理 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 {
                    // 粘贴的不是 Excel 或表格数据
                    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,
            };
        },