前端实现导入(excel文件)导出(word)文件

vue前端实现导入（excel文件）导出（word）文件

1、前端要实现导入excel文件

我们可以采用 第三方包xlsl

# 安装
npm install xlsl
# 或者
yarn add xlsl

实现代码如下：

<template>
	<div class="index">
        <el-button type="success">
            上传文件：
            <input class="file_uploader" type="file" accept=".xlsx, .xls" @input="onImportEx"/>
            <!-- accept限定传入的文件格式 -->
        </el-button>
    </div>
</template>
<script>
    import XLSX from "xlsx";
    export default {
        methods:{
            onImportEx(file) {
                const { files } = file.target;
                const fileReader = new FileReader(); // 创建FileReader 对象 读取文件
                fileReader.onload = (event) => {
                    try {
                        const { result } = event.target;
                        // 二进制读取 excel表格对象
                        const workList = XLSX.read(result, { type: "binary" });
                        // 存储数据
                        let data = [];
                        for (let sheet in workList.Sheets) {
                            if (workList.Sheets.hasOwnProperty(sheet)) {
                                // 利用 sheet_to_json 方法将 excel 转成 json 数据
                                data = data.concat(XLSX.utils.sheet_to_json(workList.Sheets[sheet]));
                                // break; // 如果只取第一张表，就取消注释这行
                            }
                        }
                        // 最终获取到并且格式化后的 json 数据
                        const tableData = data.map((item) => {
                            return {
                                id: Number(item["序号"]),
                                name: item["类型"],
                                caed_id: item["内容"],
                            };
                        });
                    } catch (error) {
                        console.log("上传失败,err:", error);
                    }
                };

                fileReader.readAsBinaryString(files[0]);
            },
        }
    }
</script>

2、实现导出word文档

可以使用 docxtemplater模板 来实现导出word文档，这个方法需要使用到一个有的word文档，在里面根据数据写入相应的key

具体操作如下：

2.1、安装相应包

# 安装 相关依赖包
npm install docxtemplater pizzip file-saver
# 或者
yarn add docxtemplater pizzip file-saver

2.2、使用

<script>
    // 引入包
    import Docxtemplater from "docxtemplater";
    import PizZip from "pizzip";
    import PizZipUtils from "pizzip/utils/index.js";
    import { saveAs } from "file-saver";

    export default {
        methods:{
            loadFile(url, callback) {
                PizZipUtils.getBinaryContent(url, callback);
            },
            renderDoc() {  // 导出文件
                let than = this;
                // loadFile 第一个参数 模板word文件路径(代码最下面报错解析)
                this.loadFile("./mode_word.docx", function (err, content) {
                    if (err) {
                        throw err;
                    }
                    const zip = new PizZip(content);
                    const doc = new Docxtemplater(zip, {
                        paragraphLoop: true,
                        linebreaks: true,
                    });
                    doc.setData({
                        // 存入要放入的数据
                        first_name: "John",
                        last_name: "Doe",
                        phone: "0652455478",
                        description: "New Website"
                    });
                    // 呈现文档
                    try {
                        doc.render();
                    } catch (error) {
                        // 使用JSON.stringify记录时，此处抛出的错误包含其他信息
                        const e = {
                            message: error.message,
                            name: error.name,
                            stack: error.stack,
                            properties: error.properties,
                        };
                        console.log(JSON.stringify({ error: e }));
                        throw error;
                    }
                    // 使用数据URI输出文档
                    const out = doc.getZip().generate({
                        type: "blob",
                        mineType:
                        "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
                    });
                    saveAs(out, "测试.docx"); // 导出文件名称
                });
            },
        }
    }
</script>

**注：**上面方法loadFile(url,callback)解析：

• 开始可能会遇到 Can't find end of central directory : is this a zip file ? 首先我们应该了解这个方法传递的参数是urlPath（路径）和一个回调；首先说到path，前端开发最首先想到的可能是绝对路径或者相对路径。如果你用vue开发，你可能还会用到@这个符号作为根目录使用。
• 但是在这我们应该这样写 ‘xxxxxxx.docx’（xxxxxxx指模板名称）。如我的模板名为mode_word.docx那么我的路径为’./mode_word.docx’。
• 修改完这个地方之后，剩下的就是要知道你使用的vue-cli是版本2还是版本3。如果是2，则应该有一个static的文件夹，请见你的模板文件放入这个static文件夹中；如果是3，则有一个public文件夹，请将模板文件放入这个public文件夹中。

解析来源于：https://blog.csdn.net/weixin_44356292/article/details/108070643

2.3、word模板

图片数据来源

首先，新建一个docx文件，把模板先写好。
**注意！！**如果数据结构中存在数组。 用{#xxx}{/xxx} 包裹。

wordData: {
    name: '导出word',
    nameList: [
        {
            name: "张三",
            age: 16,
            hobby: ['吃饭', '睡觉', '打豆豆']
        },
        {
            name: "李四",
            age: 19,
            hobby: ['抽烟', '喝酒', '打麻将']
        },
    ]
},