vue使用docxtemplater導出word
更新時間:2025年04月04日 08:54:10 作者:脆
docxtemplater?是一種郵件合并工具,以編程方式使用并處理條件、循環(huán),并且可以擴展以插入任何內容,下面我們來看看如何使用docxtemplater導出word吧
docxtemplater
docxtemplater 是一種郵件合并工具,以編程方式使用并處理條件、循環(huán),并且可以擴展以插入任何內容(表格、html、圖像)。
npm 是安裝 docxtemplater 最簡單的方法
npm install docxtemplater pizzip --save?
// 安裝 docxtemplater npm install docxtemplater pizzip --save // 安裝 jszip-utils npm install jszip-utils --save // 安裝 jszip npm install jszip --save // 安裝 FileSaver npm install file-saver --save // 引入處理圖片的插件1 npm install docxtemplater-image-module-free --save // 引入處理圖片的插件2 npm install angular-expressions --save
vue使用docxtemplater導出word
安裝
// 安裝 docxtemplater npm install docxtemplater pizzip --save // 安裝 jszip-utils npm install jszip-utils --save // 安裝 jszip npm install jszip --save // 安裝 FileSaver npm install file-saver --save // 引入處理圖片的插件1 npm install docxtemplater-image-module-free --save // 引入處理圖片的插件2 npm install angular-expressions --save
準備word模板放至項目public文件夾下
常用語法
1.單個變量使用
{name}
2.數組對象循環(huán)
{#list} {name} {age} {/list}
3.圖片(base64/url)
{%imgurl}
封裝導出方法
import docxtemplater from 'docxtemplater'; import PizZip from 'pizzip'; import JSZipUtils from 'jszip-utils'; import { saveAs } from 'file-saver'; import ImageModule from 'docxtemplater-image-module-free'; //將對象中值為null和undefined的進行替換 //參數1 需要處理的對象 參數2 替換后的值 const replaceNull = (someObj, replaceValue = "***") => { const replacer = (key, value) => String(value) === "null" || String(value) === "undefined" ? replaceValue : value; return JSON.parse(JSON.stringify(someObj, replacer)); } /** 4. 導出docx 5. @param { String } tempDocxPath 模板文件路徑 6. @param { Object } data 文件中傳入的數據 7. @param { String } fileName 導出文件名稱 */ export const exportWord = (tempDocxPath, data, fileName) => { //過濾空值 data = replaceNull(data, '') function base64DataURLToArrayBuffer(dataURL) { const base64Regex = /^data:image\/(png|jpg|jpeg|svg|svg\+xml);base64,/; if (!base64Regex.test(dataURL)) { return false; } console.log(dataURL); const stringBase64 = dataURL.replace(base64Regex, ""); let binaryString; if (typeof window !== "undefined") { binaryString = window.atob(stringBase64); } else { binaryString = new Buffer(stringBase64, "base64").toString("binary"); } const len = binaryString.length; const bytes = new Uint8Array(len); for (let i = 0; i < len; i++) { const ascii = binaryString.charCodeAt(i); bytes[i] = ascii; } return bytes.buffer; } // 讀取并獲得模板文件的二進制內容 JSZipUtils.getBinaryContent(tempDocxPath, (error, content) => { if (error) { throw error; } const imageOptions = { getImage(tag) { return base64DataURLToArrayBuffer(tag); }, getSize() { return [100, 100]; }, }; let zip = new PizZip(content); let doc = new docxtemplater(); doc.loadZip(zip); doc.attachModule(new ImageModule(imageOptions)); doc.setData(data); try { doc.render(); } catch (error) { let e = { message: error.message, name: error.name, stack: error.stack, properties: error.properties, }; console.log({ error: e }); throw error; } let out = doc.getZip().generate({ type: "blob", mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document", }); //Output the document using Data-URI saveAs(out, fileName); }); };
封裝方法使用
import { exportWord } from '/@/utils/exportFile'; const handleExport = async (data: any) => { exportWord('/wordTemplate/tzd.docx', data, '通知單.docx'); }
到此這篇關于vue使用docxtemplater導出word的文章就介紹到這了,更多相關vue docxtemplater導出word內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!