纯前端vue项目导出ECHARTS图表成word文档

先获取ECHARTS图表的图片并转为base64格式

getBaseImage(chart) {
                let url = chart.getDataURL({
                    pixelRatio: 2,
                    backgroundColor: '#fff'
                })
                // 向父组件传图片base64格式
                this.$parent.$parent.$parent.$parent.$parent.setImageBase(this.index, url)
            }

父组件在页面初始化时将模板数据初始化：

created() {
            // 页面初始化时初始化数据
            for (let i = 0; i < this.chartData.length; i++) {
                let lis = {}
                lis.title = this.chartData[i].title
                lis.ifChart = !this.chartData[i].ifChart
                lis.tableData = this.chartData[i].tableData
                lis.url = ''
                this.imageListBase.push(lis)
            }
        },

在父组件中将获取到的数据放进模板数据中：

setImageBase(index, url) {
                this.imageListBase[index].url = url
                console.log(this.imageListBase)
            },

导出成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
//安装 docxtemplater-image-module-free
npm install --save docxtemplater-image-module-free 
//安装PizziP
npm install pizzip --save

导入包：

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

导出成word的主要方法：

// 点击导出成word文档
            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;
            },
            exportWord() {
                let ImageModule = require('docxtemplater-image-module-free');

                // 点击导出word
                let _this = this;
                // 读取并获得模板文件的二进制内容
                JSZipUtils.getBinaryContent("input.docx", function (error, content) {
                    if (error) {
                        throw error;
                    }
                    let opts = {}
                    opts.centered = true;  
                    opts.fileType = "docx";
                    opts.getImage = function (chartId) {
                        return _this.base64DataURLToArrayBuffer(chartId);
                    }
                    opts.getSize = function () {
                        return [600, 250]
                    }
                    let imageModule = new ImageModule(opts);
                    let zip = new PizZip(content);
                    let doc = new docxtemplater();
                    doc.attachModule(imageModule);
                    doc.loadZip(zip);
                    doc.setData({
                        imagelist: _this.imageListBase,
                    });

                    try {
                        doc.render();
                    } catch (error) {
                        let e = {
                            message: error.message,
                            name: error.name,
                            stack: error.stack,
                            properties: error.properties
                        };
                        throw error;
                    }
                    let out = doc.getZip().generate({
                        type: "blob",
                        mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
                    });
                    saveAs(out, "echartsWord.docx");
                });
            }

配置word文档模板：

将配置好的模板放在静态资源public文件夹下

导出成功：

一个遇到的坑：
ECHARTS图表如果设置了动画生成效果，若是立即获取图表的图片，获取到的图片会显示不全。
解决方法有：

1. 取消动画生成效果
2. 延时获取图片

参考链接：
https://blog.csdn.net/meimeilive/article/details/103150412
https://docxtemplater.com/modules/image/

码云demo链接：https://gitee.com/donwind/vue_shop.git