使用vue+docxtemplater导出word

Posted 2022-04-21 实迷途其未远

查东西的时候点进了51CTO博客，发现了这个活动，来得早不如来得巧，摸鱼大王决定发在51CTO的第一篇博文。
内容发什么呢？在其他平台有长期的使用习惯，翻了翻自己的文档也没有存货，想来想去，就写一写最近在做的东西吧。以生成试卷为例，分享使用vue+docxtemplater导出word的方法。

官方文档：https://docxtemplater.com/

1.安装、引入

使用npm安装

npm i docxtemplater pizzip  -S
npm i jszip-utils -S
npm i jszip -S
npm i file-saver -S
npm i -S docxtemplater-image-module-free 
npm i pizzip -S

import引入

import JSZipUtils from "jszip-utils"
import Docxtemplater from "docxtemplater";
import PizZip from "pizzip";
import  saveAs  from "file-saver";
import ImageModule from "docxtemplater-image-module-free";
function loadFile(url, callback) 
JSZipUtils.getBinaryContent(url, callback);

2.页面

仅使用一个按钮，点击后会生成word供保存。
```html/xml
<el-button @click="renderDoc1">
下载试卷
</el-button>

# 3.模版
准备模版，我的是sim2.docx，放在static文件夹下。
![5C796F3C1304486FA85B1B624F87F552_4_5005_c.jpeg](https://s2.51cto.com/images/20220420/1650441915739220.jpeg?x-oss-process=image/watermark,size_14,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=)
如图所示，我的模版用到了一些tag，具体可以参考官网[https://docxtemplater.com/docs/tag-types/](https://docxtemplater.com/docs/tag-types/)
正常的变量替换：paper_name
列表标签：#listlist
条件标签：#stem_type0/stem_type0
# 4.方法
在method中增加renderDoc1方法。
获取模版"../static/sim2.docx"；doc.setData设置用来替换模版的数据；输出文档为"paper.docx"。
```javascript
    renderDoc1() 
      this.transferData();
      let that=this;
      loadFile(
        /*获取doc模版*/
       "../static/sim2.docx",//"https://docxtemplater.com/tag-example.docx"
        function (error, content) 
          if (error) 
            throw error;
          
          const zip = new PizZip(content);
          const doc = new Docxtemplater(zip, 
            paragraphLoop: true,
            linebreaks: true,

          );

          doc.setData(
            paper_name:that.paper_name,
            paper_score:that.paper_score,
            username:window.sessionStorage.getItem(username),
            "list0":that.list0,
            "list1":that.list1,
            "list2":that.list2,
            "list3":that.list3,
          )
          /*向文档中写入数据*/
          // render the document (replace all occurences of first_name by John, last_name by Doe, ...)
          doc.render();

          /*输出文档*/
          const out = doc.getZip().generate(
            type: "blob",
            mimeType:
              "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
          );
          // Output the document using Data-URI
          saveAs(out, "paper.docx");
        
      );
    ,

5.效果