vue2导出word文件

安装依赖

cnpm install --save docxtemplater pizzip  jszip-utils file-saver

模板文件(模板文件中使用 {name} ,‘{name}’ 将会被替换成 ‘张三’)

test.docx 放在public目录下(vue2)

导入

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

使用 (引入test.docx的时候可以不加 ‘/’,但是有的框架需要‘/’)

print() {
      // 读取二进制模板文件
      JSZipUtils.getBinaryContent("/test.docx", function (error, content) {
        if (error) {
          throw error;
        }
        let zip = new PizZip(content);
        // 创建并加载docxtemplater实例对象
        let doc = new docxtemplater().loadZip(zip);
        // 设置模板变量的值
        doc.setData({
          name: "张三",
        });
        console.log(zip);

        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, "报价单.docx");
      });
      return false;
    },

 模板中对象,和数组的循环 : https://docxtemplater.com/docs/tag-types/#loops

{#list}{name}{/list}
{#obj}{key}{/obj}

 

posted @ 2022-11-18 10:10  jqynr  阅读(315)  评论(0)    收藏  举报