纯前端vue利用docxtemplater实现生成word文档下载 word模板,勾选框的默认勾选。。

首先需要下载如下工具:

cnpm i docxtemplater pizzip jszip-utils file-saver -S

然后将它们引入:

import JSZipUtils from "jszip-utils";
import "docxtemplater/build/docxtemplater.js";
import "pizzip/dist/pizzip.js";
import "file-saver";

以下是实现方法:

exportWord() {
      let _this = this;
      JSZipUtils.getBinaryContent("demo.docx", (error, content) => {
        if (error) {
          console.error(error);
          return;
        }
        let opts = {};
        let zip = new PizZip(content);
        let doc = new docxtemplater().loadZip(zip);
        doc.setData({
          title: "word文档下载demo",
          table: _this.checklist,
          multi: _this.chanquan_list_2,
        });
        doc.render();
        var out = doc.getZip().generate({
          type: "blob",
          mimeType:
            "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
        });
        saveAs(out, "demo.docx");
      });
    }

对于cli3项目,word模板放到public目录下:
模板在此处向word模板传值:向word模板传值
word模板:
word模板
{}里写key值,
{#array}表示循环开始,{/array}表示循环结束,array为被循环的数组。
其中,默认选中勾选框的方法:
1.在文本中插入该符号,在这里插入图片描述将其复制到json中对应的value值里(对从接口获取到的json做一步处理),由于此符号字体是Wingdings 2,所以模板中对应的key值也应设成相同字体,
在这里插入图片描述这样就能实现默认选中啦。
补充一下:
比如数据是这样的: [{name:选项一,checked:true},{name:选项二,checked:false}],用word里复制来的勾选框换掉true,没勾选的框换掉false,word里面的格式是:{#multi}{checked}{name}{/multi} ,然后选中{checked}换成Wingdings 2字体(所以就出现了那一堆数字)另(好像Calibri字体也可以)

生成的word文档:
在这里插入图片描述

引用:https://docxtemplater.readthedocs.io/en/latest/generate.html

  • 3
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 15
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 15
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值