由于列表表中的數(shù)據(jù)由于動態(tài)表單拖動而格式不固定，因此在最近的開發(fā)過程中出現(xiàn)了需求列表中的表單數(shù)據(jù)導(dǎo)出word。所需的方案是凍結(jié)word模板，然后從表單中取出模板字段，執(zhí)行分配導(dǎo)出。具體的業(yè)務(wù)實施沒有詳細(xì)說明。下面的導(dǎo)出實現(xiàn)如下：

所需的相關(guān)插件

Docx模板

Pizzip

文件-服務(wù)器

Jszip-utils

Jszip

docx templater-image-module-free js zip:如果創(chuàng)建壓縮包批量下載不需要批量處理，則不需要安裝

docx templater-image-module-free:如果沒有將設(shè)計導(dǎo)出到圖片所需的安裝，則不需要安裝

安裝

NPM I docx templater pizzip js zip-utils file-saver js zip docx templater-image-module-free-s處理邏輯

模板文件的二進(jìn)制內(nèi)容JSZi('；(error，content)={})2。文件-zip文件

Constzip=newpizzip(內(nèi)容)；3.創(chuàng)建和加載docxtemplater實例對象

Letdoc=newdocxtemplater()。loadzip (zip)。compile()；4.上傳資料

5.定義模板

模板

測試數(shù)據(jù)

測試數(shù)據(jù)

顯示效果

圖片密鑰代碼處理

批量下載處理

這里包裝完畢下載結(jié)束時進(jìn)行了延遲處理，防止操作不完全。

綜合包裝下

對上述分布式JS打包以創(chuàng)建新的ex。

import docx templater from ' docx templater '

Import PizZip from 'pizzip '

Import {saveAs} from 'file-saver '

導(dǎo)入Jsziputils from' jszip-utils '

導(dǎo)入js zip from' js zip '

import image module from ' docx templater-image-module-free '

export const dataurltobase 64=(URL)={

Return new promise ((resolve，reject)={

//驗證監(jiān)聽地址是否已是base64

Cons

t base64Regex = /^data:image\/(png|jpg|svg|svg\+xml);base64,/; if (url)) { return url; } const Img = new Image() let dataURL = '' Img.setAttribute('crossOrigin', 'Anonymous') Img.src = url + '?v=' + Ma() Img.onload = function () { // 要先確保圖片完整獲取到，這是個異步事件 const canvas = document.createElement('canvas') // 創(chuàng)建canvas元素 const width = Img.width // 確保canvas的尺寸和圖片一樣 const height = Img.height canvas.width = width canvas.height = height canvas.getContext('2d').drawImage(Img, 0, 0, width, height) // 將圖片繪制到canvas中 dataURL = canvas.toDataURL('image/jpeg') // 轉(zhuǎn)換圖片為dataURL resolve(dataURL) } }) } export const exportWord = ({ file = "in;, data, filename = "下載文檔", fileType = "docx", folder = "下載文檔" } = {}) => { // 批量下載生成壓縮包 const Zip = new JSZip() if (data)) { da((item, index) => { // 讀取并獲得模板文件的二進(jìn)制內(nèi)容 JSZi(file, (error, content) => { // in是模板。我們在導(dǎo)出的時候，會根據(jù)此模板來導(dǎo)出對應(yīng)的數(shù)據(jù) // 拋出異常 if (error) { throw error } // 圖片處理 let opts = {} o = true; // 圖片居中 o = (tagValue, tagName) => { return new Promise((resolve, reject) => { JSZi(tagValue, (error, content) => { if (error) { return reject(error); } return resolve(content); }); }); } o = () => { return [400, 200] } let imageModule = new ImageModule(opts); // 創(chuàng)建一個JSZip實例，內(nèi)容為模板的內(nèi)容 const zip = new PizZip(content); // 創(chuàng)建并加載docxtemplater實例對象 let doc = new docxtemplater().loadZip(zip).attachModule(imageModule).compile(); let word = Zip.folder(folder) doc.resolveData(item).then(() => { doc.render(); const out = doc.getZip().generate({ type: "blob", mimeType: "application;, }); word.file(`${i ? i : filename + index}.${fileType}`, out) }) con(word, 'word') }) }) setTimeout(() => { Zip.generateAsync({ type: "blob" }) // zip下載 .then((content) => { saveAs(content, `${folder}.zip`); // zip下載后的名字 }); }, 1000) } else { // 讀取并獲得模板文件的二進(jìn)制內(nèi)容 JSZi(file, (error, content) => { // 拋出異常 if (error) { throw error } // 圖片處理 let opts = {} o = true; // 圖片居中，在word模板中定義方式為{%image} o = (tagValue, tagName) => { return new Promise((resolve, reject) => { JSZi(tagValue, (error, content) => { if (error) { return reject(error); } return resolve(content); }); }); } o = () => { return [600, 300] } let imageModule = new ImageModule(opts); const zip = new PizZip(content); // 創(chuàng)建并加載docxtemplater實例對象 let doc = new docxtemplater().loadZip(zip).attachModule(imageModule).compile(); // 如果包含異步數(shù)據(jù)，用resolveData，在回調(diào)之后再處理，如果都是同步數(shù)據(jù)，直接用setData就可以 doc.resolveData(data).then(() => { try { // 用模板變量的值替換所有模板變量 doc.render(); // 生成一個代表docxtemplater對象的zip文件（不是一個真實的文件，而是在內(nèi)存中的表示） const out = doc.getZip().generate({ type: "blob", mimeType: "application; }); // 將目標(biāo)文件對象保存為目標(biāo)類型的文件，并命名 saveAs(out, `${filename}.${fileType}`); } catch (error) { // 拋出異常 const e = { message: error.message, name: error.name, stack: error.stack, properties: error.properties }; con({ error: e })); throw error; } }) }); } }

使用

導(dǎo)入上面定義的JS,使用exportWord方法

import {exportWord} from './exportWord' const config = { file: ";, filename:'下載文檔', fileType:'docx', folder:'下載文檔', data: {}// 數(shù)據(jù) } exportWord(config)

參數(shù)說明：

參數(shù)	類型	默認(rèn)值	說明
file	String		模板文件的地址
filename	String	下載文檔	文件名稱
fileType	String	docx	文件類型
folder	String	下載文檔	批量下載壓縮包的文件名
data	Array/Object	{}	數(shù)據(jù)(數(shù)組默認(rèn)批量，對象默認(rèn)單個下載）

開發(fā)的過程中也看到了別人寫的，也借鑒參考學(xué)到了很多，這地方再進(jìn)行整合下希望能幫助到也需要相似功能的你們。