Vue-前端导出数据到指定word模板

1、安装

// 安装 docxtemplater
npm install --save docxtemplater

// 安件 jszip-utils
npm install --save jszip-utils

// 安装 pizzip
npm install --save pizzip

// 安装 file-saver 用于在浏览器中下载文件
npm install --save file-saver

2、封装 

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


// 引入angular-expression 解析器
let expressions = require("angular-expressions");
let assign = require("lodash/assign");
expressions.filters.lower = function (input) {
    if (!input) return input;
    return input.toLowerCase();
};
// 角度解析器处理数据
function angularParser(tag) {
    tag = tag
        .replace(/^\.$/, "this")
        .replace(/(’|‘)/g, "'")
        .replace(/(“|”)/g, '"');
    const expr = expressions.compile(tag);
    return {
        get: function (scope, context) {
            let obj = {};
            const scopeList = context.scopeList;
            const num = context.num;
            for (let i = 0, len = num + 1; i < len; i++) {
                obj = assign(obj, scopeList[i]);
            }
            return expr(scope, obj);
        },
    };
}

//导出word模板组合文档
export const export_template_to_word = (demoUrl, docxData, fileName) => {
    // 读取并获得模板文件的二进制内容
    JSZipUtils.getBinaryContent(demoUrl, (error, content) => {
        // 抛出异常
        if (error) {
            throw error;
        }

        // 创建一个PizZip实例，内容为模板的内容
        let zip = new PizZip(content);
        // 创建并加载docxtemplater实例对象
        let doc = new docxtemplater().loadZip(zip).setOptions({ parser: angularParser });
        // 设置模板变量的值，对象的键需要和模板上的变量名一致，值就是你要放在模板上的值
        doc.setData({
            ...docxData,
        });

        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, fileName);
    });
}

3、使用

const fileUrl = 'template.docx';
const formData = {
        number: 001,
        name: '张三',
        sex: 1,
        age: 23,
        results: [
          { subject: '数学', record: 89, teacher: '李四' },
          { subject: '语文', record: 94, teacher: '王五' },
        ]
};
 
export_template_to_word(fileUrl , formData , '导出模板文档';