vue使用docxtemplater导出word

本文主要是介绍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的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！