前端实现word导出(基于word模板)

1.安装依赖
 

import Docxtemplater from "docxtemplater";
import { saveAs } from "file-saver";
import JSZipUtils from "jszip-utils";
import JSZip from 'jszip';

2.创建word模板

可以根据网上的Docxtemplater语法创建对应的word模板

如图 字段需要一一对应

3.把模板存放到public对应文件夹(vue3方式)

4.基本代码,传递对应数据

const exportToWord = () => {
  // 这里是声明值方便之后传递给word模板
  const data = {
    reslut:Good.value,
    table:assetsData.value
  }
  // 读取并获得模板文件的二进制内容 这个路径就是存放word模板的路径
  JSZipUtils.getBinaryContent("/asset/asset.docx", function (error, content) {
    // input.docx是模板。我们在导出的时候，会根据此模板来导出对应的数据
    // 抛出异常
    if (error) {
      throw error;
    }
    // 创建一个JSZip实例，内容为模板的内容
    let zip = new JSZip(content);
    // 创建并加载docxtemplater实例对象
    let doc = new Docxtemplater().loadZip(zip);
    // 设置模板变量的值
    doc.setData(data);
    console.log(doc)
    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");
  });
}