使用vue+docxtemplater导出word

满堂花醉三千客，一剑霜寒十四洲。这篇文章主要讲述使用vue+docxtemplater导出word相关的知识，希望能为你提供帮助。
查东西的时候点进了51CTO博客，发现了这个活动，来得早不如来得巧，摸鱼大王决定发在51CTO的第一篇博文。
内容发什么呢？在其他平台有长期的使用习惯，翻了翻自己的文档也没有存货，想来想去，就写一写最近在做的东西吧。以生成试卷为例，分享使用vue+docxtemplater导出word的方法。
官方文档：https://docxtemplater.com/
1.安装、引入【使用vue+docxtemplater导出word】使用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"; importsaveAsfrom "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.效果