vue中 前端根据word模板导出页面中的表格和内容为word文档

需求

将页面中这两个表格区域导出为word格式的文档 这两个表格是根据word模板去写的页面

1.下载插件

yarn add docxtemplater;
yarn add pizzip;
yarn add file-saver
yarn add jszip-utils

2.script标签里引入插件

import Docxtemplater from "docxtemplater";
import PizZip from "pizzip";
import PizZipUtils from "pizzip/utils/index.js";
import { saveAs } from "file-saver";
import JSZipUtils from "jszip-utils";

3.把word模板文档放在public文件夹里

4.在word文档中将要导入的数据用{}变量写进去

如果是循环的table数据开头和结尾要用{#表名}和{/表名}

{#table}  {name}  {age}  {/table}

5.script里写对应要渲染的数据和方法 变量名要和word里的对应

<script>
import Docxtemplater from "docxtemplater";
import PizZip from "pizzip";
import PizZipUtils from "pizzip/utils/index.js";
import { saveAs } from "file-saver";
import JSZipUtils from "jszip-utils";
export default {
  data() {
    return {
      personInfo: {
        name: "张三",
        sex: "男",
        usedname: "张三丰",
        born: "湖北武汉",
        nation: "汉族",
        date: "2020年1月",
        age: "20",
        id: "422123200101024325",
      },
      classTable: [
        {
          subject: "语文",
          teacher: "刘老师",
          score: "98",
          grade: "优",
        },
        {
          subject: "数学",
          teacher: "王老师",
          score: "59",
          grade: "不及格",
        },
        {
          subject: "英语",
          teacher: "蔡老师",
          score: "88",
          grade: "良",
        },
      ],
    };
  },
  methods: {
    loadFile(url, callback) {
      PizZipUtils.getBinaryContent(url, callback);
    },
    exportWord: function () {
      let _this = this;
      // 读取并获得模板文件的二进制内容
      JSZipUtils.getBinaryContent("table.docx", function (error, content) {
        // input.docx是模板。我们在导出的时候，会根据此模板来导出对应的数据
        // 抛出异常
        if (error) {
          throw error;
        }

        // 创建一个JSZip实例，内容为模板的内容
        const zip = new PizZip(content);
        // 创建并加载docxtemplater实例对象
        const doc = new Docxtemplater(zip, {
          paragraphLoop: true,
          linebreaks: true,
        });
        // 设置模板变量的值
        doc.setData({
          ..._this.personInfo,
          classTable: _this.classTable,
        });

        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");
      });
    },
  },
};
</script>

6.导出成功