vue项目中,根据word模版导出文档

vue项目中,根据word模版导出文档

在项目中下载需要的依赖

依次下载

npm install docxtemplater

npm install pizzip

npm install jszip-utils

npm install file-saver

然后在页面中使用该依赖

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

在页面中使用

创建模版位置

html

<el-button type="text" icon="el-icon-mine-daochu" @click="deriveword(row)"
>导出el-button>

js

// 导出 word 文件
exportWord(row) {
  let _this = this;
  //模板文件的位置
  let docxsrc = "../../../static/word_template/checkreport_home.docx"; 
  //导出文件的名字
  let docxname = _this.content.name + ".docx"; 
  // 读取并获得模板文件的二进制内容
  JSZipUtils.getBinaryContent(docxsrc, function (error, content) {
    // docxsrc是模板。我们在导出的时候，会根据此模板来导出对应的数据
    // 抛出异常
    if (error) {
      throw error;
    }
    // 创建一个PizZip实例，内容为模板的内容
    let zip = new PizZip(content);
    // 创建并加载docx templater实例对象
    let doc = new docxtemplater().loadZip(zip);
    // 设置模板变量的值
    doc.setData({
      ..._this.content, // 具体模版数据
    });

    try {
      // 用模板变量的值替换所有模板变量
      doc.render();
    } catch (error) {
      // 抛出异常
      throw error;
    }
    // 生成一个代表docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示）
    let out = doc.getZip().generate({
      type: "blob",
      mimeType:
        "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
    });
    // 将目标文件对象保存为目标类型的文件，并命名
    saveAs(out, docxname);
  });
},

word模版内容

希望此文章能帮助到你