Vue导出Word

一、 模板文件制作

1、 模板文件必须是docx文件，doc文件不能通过修改后缀编程docx,必须在另存时选择docx类型，才能实现类型转换，但是docx可以通过修改后缀编程doc文件。
2、使用英文下的花括号。
3、花括号内前不要有空格，且与程序中data中的键名一致。
4、在表格中需要循环添加的数据，需要在开头添加{#键名}，结尾添加{/键名}。如：{#table}{name} {age}{/table}

二、导入包

安装 docxtemplater
cnpm install docxtemplater pizzip  --save
安装 jszip-utils
cnpm install jszip-utils --save 
安装 jszip
cnpm install jszip --save
安装 FileSaver
cnpm install file-saver --save

组件中引入

import docxtemplater from 'docxtemplater'
import PizZip from 'pizzip'
import JSZipUtils from 'jszip-utils'
import {saveAs} from 'file-saver'

三、在word表格中添加字段名

定义word模板时。vue3.0将该文件放在public目录下，vue2.0放在static目录下。

// 点击导出word
        exportWord: function() {
        let that = this;
        // 读取并获得模板文件的二进制内容
        JSZipUtils.getBinaryContent("../../cardreResume.docx", function(error, content) {
            // model.docx是模板。我们在导出的时候，会根据此模板来导出对应的数据
            // 抛出异常
            if (error) {
            throw error;
            }

            // 创建一个PizZip实例，内容为模板的内容
            let zip = new JSZip(content);
            // let zip = new PizZip(content);
            // 创建并加载docxtemplater实例对象
            let doc = new docxtemplater().loadZip(zip);
            // 设置模板变量的值
            doc.setData({
                ...that.tableData
            });

            try {
            // 用模板变量的值替换所有模板变量
            doc.render();
            } catch (error) {
            // 抛出异常
            let e = {
                message: error.message,
                name: error.name,
                stack: error.stack,
                properties: error.properties
            };
            console.log(JSON.stringify({ error: e }));
            throw error;
            }

            // 生成一个代表docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示）
            let out = doc.getZip().generate({
            type: "blob",
            mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
            });
            // 将目标文件对象保存为目标类型的文件，并命名
            saveAs(out, "干部任免审批表-"+that.tableData.name + ".docx");
        });
        }

注意：