关于如何在vue中使用word模板导出数据,可以参考我之前的这个文章在vue中导出word_ZMJ_QQ的博客-CSDN博客

这个主要是记录如何在word模板中写条件判断和使用$index

  1.  docxtemplater文档参考Angular parser | docxtemplater

如果要在word模板中使用角度解析器,那么在word导出的方法中一定要添加上这一段代码(踩了两次坑,都是没有添加上这一段代码,浪费了半天的时间) ,文档有代码示例。

在导出word的方法中添加setOptions({ parser: angularParser })

let doc = new docxtemplater().loadZip(zip).setOptions({ parser: angularParser }); 

如果还要使用$index显示数组的索引,需要添加这几行代码

使用if判断条件

{#topicType == "单选"}
  ....
{/}

显示序号,可以在索引值上加1 {$index + 1}

:)运算符前后要留一个空格

 

 完整代码

 async exportWord() {
      // 传故障树id
      const loading = this.$loading({
        lock: true,
        text: '正在生成word',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      // 获取数据
      let res = await getWordData(this.saveTreeId);
      let list = res.data.data.middleDTO;
      var expressions = require("angular-expressions");
      var assign = require("lodash/assign");
      var last = require("lodash/last");
      // define your filter functions here, for example
      // to be able to write {clientname | lower}
      expressions.filters.lower = function (input) {
        // This condition should be used to make sure that if your input is
        // undefined, your output will be undefined as well and will not
        // throw an error
        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 index = last(context.scopePathItem);
            const scopeList = context.scopeList;
            const num = context.num;
            for (let i = 0, len = num + 1; i < len; i++) {
              obj = assign(obj, scopeList[i]);
            }
            obj = assign(obj, { $index: index });
            return expr(scope, obj);
          },
        };
      }
      let _this = this;
      let form = {
        title: _this.currentTitle,
        ctitle: _this.comList.commonSubject,
        ctopic: _this.comList.topic,
        s: list,
      };
      // 读取并获得模板文件的二进制内容
      JSZipUtils.getBinaryContent("worktable.docx", (error, content) => {
        // input.docx是模板。我们在导出的时候,会根据此模板来导出对应的数据
        // 抛出异常
        if (error) {
          this.$message.error("导出word文档失败!")
          loading.close()
          throw error;
        }
        // 创建一个JSZip实例,内容为模板的内容
        // let zip = new JSZip(content);
        let zip = new PizZip(content);
        // 创建并加载docxtemplater实例对象
        // let doc = new window.docxtemplater().loadZip(zip);
        let doc = new docxtemplater().loadZip(zip).setOptions({ parser: angularParser });
        // 设置模板变量的值
        doc.setData({
          ...form,
        });
        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 }));
          this.$message.error("导出word文档失败!")
          loading.close()
          throw error;
        }

        // 生成一个代表docxtemplater对象的zip文件(不是一个真实的文件,而是在内存中的表示)
        let out = doc.getZip().generate({
          type: "blob",
          mimeType:
            "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
        });
        // 将目标文件对象保存为目标类型的文件,并命名
        saveAs(out, "现场调查通知书.docx");
        loading.close()
      });
    },

Logo

前往低代码交流专区

更多推荐