vue使用docxtemplater導(dǎo)出word
docxtemplater
docxtemplater 是一種郵件合并工具,以編程方式使用并處理?xiàng)l件、循環(huán),并且可以擴(kuò)展以插入任何內(nèi)容(表格、html、圖像)。
npm 是安裝 docxtemplater 最簡(jiǎn)單的方法
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導(dǎo)出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
準(zhǔn)備word模板放至項(xiàng)目public文件夾下
常用語(yǔ)法
1.單個(gè)變量使用
{name}
2.數(shù)組對(duì)象循環(huán)
{#list} {name} {age} {/list}
3.圖片(base64/url)
{%imgurl}
封裝導(dǎo)出方法
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';
//將對(duì)象中值為null和undefined的進(jìn)行替換
//參數(shù)1 需要處理的對(duì)象 參數(shù)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. 導(dǎo)出docx
5. @param { String } tempDocxPath 模板文件路徑
6. @param { Object } data 文件中傳入的數(shù)據(jù)
7. @param { String } fileName 導(dǎo)出文件名稱
*/
export const exportWord = (tempDocxPath, data, fileName) => {
//過(guò)濾空值
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;
}
// 讀取并獲得模板文件的二進(jìn)制內(nèi)容
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');
}到此這篇關(guān)于vue使用docxtemplater導(dǎo)出word的文章就介紹到這了,更多相關(guān)vue docxtemplater導(dǎo)出word內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue 數(shù)據(jù)(data)賦值問(wèn)題的解決方案
這篇文章主要介紹了vue 數(shù)據(jù)(data)賦值問(wèn)題的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2021-03-03
Vue from-validate 表單驗(yàn)證的示例代碼
本篇文章主要介紹了Vue from-validate 表單驗(yàn)證的示例代碼,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
vue實(shí)現(xiàn)app頁(yè)面切換動(dòng)畫效果實(shí)例
本篇文章主要介紹了vue實(shí)現(xiàn)app頁(yè)面切換動(dòng)畫效果實(shí)例,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-05-05
vue項(xiàng)目首次打開(kāi)時(shí)加載速度很慢的優(yōu)化過(guò)程
這篇文章主要介紹了vue項(xiàng)目首次打開(kāi)時(shí)加載速度很慢的優(yōu)化過(guò)程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08
C#實(shí)現(xiàn)將一個(gè)字符轉(zhuǎn)換為整數(shù)
下面小編就為大家分享一篇C#實(shí)現(xiàn)將一個(gè)字符轉(zhuǎn)換為整數(shù),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2017-12-12

