vue使用docxtemplater导出word

宫芮悦

docxtemplater

docxtemplater 是一种邮件合并工具，以编程方式使用并处理条件、循环，并且可以扩展以插入任何内容（表格、html、图像）。
npm 是安装 docxtemplater 最简单的方法

1. npm install docxtemplater pizzip --save​

复制代码

1. // 安装 docxtemplater
   
2. npm install docxtemplater pizzip  --save
   
3. // 安装 jszip-utils
   
4. npm install jszip-utils --save
   
5. // 安装 jszip
   
6. npm install jszip --save
   
7. // 安装 FileSaver
   
8. npm install file-saver --save
   
9. // 引入处理图片的插件1
   
10. npm install docxtemplater-image-module-free --save
    
11. // 引入处理图片的插件2
    
12. npm install angular-expressions --save

复制代码

vue使用docxtemplater导出word


安装

1. // 安装 docxtemplater
   
2. npm install docxtemplater pizzip  --save
   
3. // 安装 jszip-utils
   
4. npm install jszip-utils --save
   
5. // 安装 jszip
   
6. npm install jszip --save
   
7. // 安装 FileSaver
   
8. npm install file-saver --save
   
9. // 引入处理图片的插件1
   
10. npm install docxtemplater-image-module-free --save
    
11. // 引入处理图片的插件2
    
12. npm install angular-expressions --save

复制代码

准备word模板放至项目public文件夹下

常用语法

1.单个变量使用
{name}
2.数组对象循环
{#list}  {name} {age} {/list}
3.图片（base64/url）
{%imgurl}

封装导出方法

1. import docxtemplater from 'docxtemplater';
   
2.     import PizZip from 'pizzip';
   
3.     import JSZipUtils from 'jszip-utils';
   
4.     import { saveAs } from 'file-saver';
   
5.     import ImageModule from 'docxtemplater-image-module-free';
   
6. 
   
7. 
   
8.     //将对象中值为null和undefined的进行替换
   
9.     //参数1 需要处理的对象 参数2 替换后的值
   
10.     const replaceNull = (someObj, replaceValue = "***") => {
    
11.         const replacer = (key, value) =>
    
12.         String(value) === "null" || String(value) === "undefined" ?         replaceValue : value;
    
13.         return JSON.parse(JSON.stringify(someObj, replacer));
    
14.     }
    
15. 
    
16.     /**
    
17.      4. 导出docx
    
18.      5. @param { String } tempDocxPath 模板文件路径
    
19.      6. @param { Object } data 文件中传入的数据
    
20.      7. @param { String } fileName 导出文件名称
    
21.     */
    
22.     export const exportWord = (tempDocxPath, data, fileName) => {
    
23.         //过滤空值
    
24.            data = replaceNull(data, '')
    
25.         function base64DataURLToArrayBuffer(dataURL) {
    
26.             const base64Regex =     /^data:image\/(png|jpg|jpeg|svg|svg\+xml);base64,/;
    
27.             if (!base64Regex.test(dataURL)) {
    
28.                 return false;
    
29.             }
    
30.         console.log(dataURL);
    
31.         const stringBase64 = dataURL.replace(base64Regex, "");
    
32.         let binaryString;
    
33.         if (typeof window !== "undefined") {
    
34.             binaryString = window.atob(stringBase64);
    
35.         } else {
    
36.             binaryString = new Buffer(stringBase64, "base64").toString("binary");
    
37.         }
    
38.         const len = binaryString.length;
    
39.         const bytes = new Uint8Array(len);
    
40.         for (let i = 0; i < len; i++) {
    
41.             const ascii = binaryString.charCodeAt(i);
    
42.             bytes[i] = ascii;
    
43.         }
    
44.         return bytes.buffer;
    
45.     }
    
46.     // 读取并获得模板文件的二进制内容
    
47.     JSZipUtils.getBinaryContent(tempDocxPath, (error, content) => {
    
48.         if (error) {
    
49.             throw error;
    
50.         }
    
51.         const imageOptions = {
    
52.             getImage(tag) {
    
53.                 return base64DataURLToArrayBuffer(tag);
    
54.             },
    
55.             getSize() {
    
56.                 return [100, 100];
    
57.             },
    
58.         };
    
59.         let zip = new PizZip(content);
    
60.         let doc = new docxtemplater();
    
61.         doc.loadZip(zip);
    
62.         doc.attachModule(new ImageModule(imageOptions));
    
63.         doc.setData(data);
    
64.         
    
65.       　　  try {
    
66.         　　    doc.render();
    
67.       　　  } catch (error) {
    
68.           　　  let e = {
    
69.           　　      message: error.message,
    
70.           　　      name: error.name,
    
71.           　　      stack: error.stack,
    
72.           　　      properties: error.properties,
    
73.          　　   };
    
74.          　　   console.log({
    
75.           　　      error: e
    
76.           　　  });
    
77.          　　   throw error;
    
78.       　　  }
    
79.       　　  let out = doc.getZip().generate({
    
80.        　　     type: "blob",
    
81.        　　     mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
    
82.       　　  }); //Output the document using Data-URI
    
83.      　　   saveAs(out, fileName);
    
84.     　　});
    
85. 　　};

复制代码

封装方法使用

1. import { exportWord } from '/@/utils/exportFile';
   
2. 
   
3.     const handleExport = async (data: any) => {
   
4.             exportWord('/wordTemplate/tzd.docx', data, '通知单.docx');
   
5.     }

复制代码

到此这篇关于vue使用docxtemplater导出word的文章就介绍到这了,更多相关vue docxtemplater导出word内容请搜索晓枫资讯以前的文章或继续浏览下面的相关文章希望大家以后多多支持晓枫资讯！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！