vue前端导出word文件

引用插件

安装

npm i docxtemplater@3.17.6
npm i pizzip  
npm i jszip-utils@0.1.0  
npm i jszip@2.6.1 
npm i file-saver@2.0.2
npm i open-docxtemplater-image-module 

引入插件

import Docxtemplater from 'docxtemplater'
import PizZip from 'pizzip'
import JSZipUtils from 'jszip-utils'
import {saveAs} from 'file-saver'

Word模板

不要慌，很容易的，新建个word,编写变量即可(demo_word.docx,可将word文档放在static下面)

注：语法可参考网站：Interactive demo | Docxtemplater | docxtemplater

data数据 

echartUrl1: '',
clients: [
    {
      "first_name": "John",
      "last_name": "Doe",
      "phone": "+44546546454"
    },
    {
      "first_name": "Jane",
      "last_name": "Doe",
      "phone": "+445476454"
    }
  ]

页面函数 (注意word.docx模板文件vue3放在public文件夹，vue2放在static文件夹即可。)

/**
 * description： 导出echarts图片，格式转换
 *
 * created by aa on 2020-08-18
 *
 */
base64DataURLToArrayBuffer(dataURL) {
    const base64Regex = /^data:image\/(png|jpg|svg|svg\+xml);base64,/;
    if (!base64Regex.test(dataURL)) {
        return false;
    }
    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;
},
/**
 * description： 导出文档
 *
 * created by aa on 2020-08-18
 *
 */
exportWord(){
    var ImageModule = require('open-docxtemplater-image-module');
    // 点击导出word
    let _this = this;
    // 读取并获得模板文件的二进制内容
    JSZipUtils.getBinaryContent("word.docx",function(error, content) {
        // exportTemplate.docx是模板。我们在导出的时候，会根据此模板来导出对应的数据
        // 抛出异常
        if (error) {
            throw error;
        }

        // 图片处理
        let opts = {}
        opts.centered = true;  // 图片居中，在word模板中定义方式为{%%image}
        opts.fileType = "docx";
        opts.getImage = function(chartId){
            return _this.base64DataURLToArrayBuffer(chartId);
        }
        opts.getSize = function(){
            return [600,300]
        }

        let imageModule = new ImageModule(opts);
        // 创建一个PizZip实例，内容为模板的内容
        let zip = new PizZip(content);
        // 创建并加载docxtemplater实例对象
        let doc = new docxtemplater();
        doc.attachModule(imageModule);
        doc.loadZip(zip);

        // 设置模板变量的值
        doc.setData({
            clients: _this.clients,
            image1:_this.echartUrl1, // 获取echarts图片
        });

        try {
            // 用模板变量的值替换所有模板变量
            doc.render();
        } catch (error) {
            // 抛出异常
            let e = {
                message: error.message,
                name: error.name,
                stack: error.stack,
                properties: error.properties
            };
            console.log(e)
            throw error;
        }
        // 生成一个代表docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示）
        let out = doc.getZip().generate({
            type: "blob",
            mimeType:"application/vnd.openxmlformats-officedocument.wordprocessingml.document"
        });
        // 将目标文件对象保存为目标类型的文件，并命名
        saveAs(out, "word文档名称.docx");
    });
},

echart图片获取

// 基于准备好的dom，初始化echarts实例
let myChart1 = this.$echarts.init(document.getElementById('myChart1'))
// 绘制图表
myChart1.setOption(this.option1);
// 获取echart图片需要延时，不然获取不到完整的
const that = this
// 延时获取图片，因为有动画效果，立即获取回导致获取的照片显示不全
setTimeout(function () {
   that.echartUrl1 = myChart1.getDataURL();
}, 1000)
// this.getChartUrl(id, chart1)
// 或者不加定时器，可以在echarts的options中加入下面一行，取消动画效果
//  animation: false,

相关文章：vue导出word文档

vue导出word文档2