本文主要是介绍vue使用docxtemplater导出word，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
《vue使用docxtemplater导出word》docxtemplater是一种邮件合并工具,以编程方式使用并处理条件、循环,并且可以扩展以插入任何内容,下面我们来看看如何使用docxtempl...
docxtemplater
docxtemplater 是一种邮件合并工具，以编程方式使用并处理条件、循环，并且可以扩展以插入任何内容（表格、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.数组对象循环
{#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 bytehttp://www.chinasem.cns.buffer;
}
// 读取并获得模板文件的二进制内容
JSZipUtils.getBinaryContent(tempDocxPath, (error, content) => {
if (error) {
throw error;
}
const imageOptions = {
getImage(tag) {
return base64DataURLToArrayBuffer(tag);
CrGAvUCpUk},
getSize() {
js 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: "blobChina编程",
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) => {
exportWorandroidd('/wordTemplate/tzd.docx', data, '通知单.docx');
}到此这篇关于vue使用docxtemplater导出word的文章就介绍到这了,更多相关vue docxtemplater导出word内容请搜索China编程(www.chinasem.cn)以前的文章或继续浏览下面的相关文章希望大家以后多多支持China编程(www.chinasem.cn)！
这篇关于vue使用docxtemplater导出word的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
