文章目錄

• • 前言：
  • 一、插件準(zhǔn)備：
  • 二、創(chuàng)建一個(gè) download-zip.ts 文件，內(nèi)容為：
  • 三、頁面使用：
  • 四、word模板：
  • 五、結(jié)果如下：
  • 六、基本語法：

前言：

1、前端使用的是vue、element-ui 框架
2、el-table 多選列表，批量勾選數(shù)據(jù)后，需要每一條數(shù)據(jù)生成一個(gè)word文件，最終導(dǎo)出一個(gè)zip壓縮包

一、插件準(zhǔn)備：

npm install --save docxtemplater pizzip jszip-utils jszip file-saver

如果想使用高級語法，可引入以下兩個(gè)插件， 可解析更多表達(dá)式：

npm install --save angular-expressions lodash

二、創(chuàng)建一個(gè) download-zip.ts 文件，內(nèi)容為：

import docxtemplater from 'docxtemplater'; import PizZip from 'pizzip'; import JSZipUtils from 'jszip-utils' import { saveAs } from 'file-saver'; import JSZip from 'jszip';// 引入angular-expression 解析器 let expressions = require("angular-expressions"); let assign = require("lodash/assign"); expressions.filters.lower = function (input: any) {if (!input) return input;return input.toLowerCase(); }; function angularParser(tag: any) {tag = tag.replace(/^\.$/, "this").replace(/(’|‘)/g, "'").replace(/(“|”)/g, '"');const expr = expressions.compile(tag);return {get: function (scope: any, context: any) {let obj = {};const scopeList = context.scopeList;const num = context.num;for (let i = 0, len = num + 1; i < len; i++) {obj = assign(obj, scopeList[i]);}return expr(scope, obj);},}; }// 導(dǎo)出方法 export const exportDocx = (tempDocxPath: string, list: any[], zipName: string) => {const promises: any[] = [];const zips = new JSZip();// 循環(huán)數(shù)據(jù)，生成word文件list.forEach((element, index) => {let fileName = zipName + '（' + index + '）' + '.docx'; // word文件名稱let data = element;const promise = new Promise((resolver: any, reject) => {JSZipUtils.getBinaryContent(tempDocxPath, (error: any, content: any) => {if (error) {throw error;}let zip = new PizZip(content);let doc = new docxtemplater().loadZip(zip).setOptions({ parser: angularParser });doc.setData(data);try {doc.render();} catch (error: any) {throw error;}let out = doc.getZip().generate({type: 'blob',mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'});// 添至zip集合中zips.file(fileName, out, { binary: true });resolver();})})promises.push(promise);})// 下載zip包Promise.all(promises).then(() => {zips.generateAsync({ type: 'blob' }).then((content: any) => {saveAs(content, zipName);})}) }

三、頁面使用：

import { exportDocx } from '@/utils/download-zip';/*** @description: 導(dǎo)出成績單 */ private exportPoliceInfoFn() {// 模擬數(shù)據(jù)const tempData = [{person: {number: '001',name: '張三',age: 20,sex: 0},results: [{subject: '語文',record: 95,teacher: '李白'},{subject: '數(shù)學(xué)',record: 130,teacher: '華羅庚'},{subject: '物理',record: 120,teacher: '錢學(xué)森'}]},{person: {number: '002',name: '李四',age: 22,sex: 1},results: [{subject: '語文',record: 115,teacher: '李白'},{subject: '數(shù)學(xué)',record: 140,teacher: '華羅庚'},{subject: '物理',record: 130,teacher: '錢學(xué)森'}]}];// 調(diào)用方法exportDocx('/doc/成績單.docx', tempData, '成績單'); }

四、word模板：

五、結(jié)果如下：

六、基本語法：

對象：

eg: let person = {name: '張三', age: 34};{person.name} {person.age} 或者 {#person} {name} {age} {/person}

數(shù)組循環(huán)：

eg: let list = [{name: '張三', age: 12}, {name: '李四', age: 23}];{#list}{name} {age} {/list}

一維數(shù)組循環(huán)：

eg: let array = ['one', 'two', 'three'];{#array}{.} {/array}

判斷：

{#isTrue} ... {/}

（完）

總結(jié)

以上是生活随笔為你收集整理的使用docxtemplater模板语法，导出多个word文件，并生成zip压缩包的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。