echatrs html导出word,纯前端导出word（含echarts）

解决的是导出含有echarts的页面为word文档，需要考虑echarts图表的大小，采用的是设置角度解析器来预设置图片宽高，也考虑到多图导出问题，下面是我的解决过程

添加所需依赖：

npm install docxtemplater

npm install pizzip

npm install jszip-utils

npm install jszip

npm install file-saver

npm install docxtemplater-image-module

导出word的主要方法

建立一个word.js，内容如下

import PizZip from 'pizzip'

import Docxtemplater from 'docxtemplater'

import JszipUtils from 'jszip-utils/lib'

import FileSave from 'file-saver'

/**

* echarts图转为base64

* 注意事项，echarts图使用canvas绘制，勿使用SVG绘制

*/

export const downloadImgByChart = (myChart) => {

/** 调用方式

* let myChart = echarts.getInstanceByDom(document.getElementById('energychart'));

* downloadImgByChart(myChart)

*/

var url = myChart.getDataURL({

pixelRatio: 5,//导出的图片分辨率比率,默认是1

backgroundColor: '#fff',//图表背景色

excludeComponents: [ 'toolbox'],//忽略组件的列表

type: 'png',//图片类型支持png和jpeg

});

return url;

}

/**

* base64转为ArrayBuffer

*/

export const 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;

}

/**

* 导出word主函数

*/

export const exportWord = (fileDocx, data, outName) => {

let ImageModule = require('docxtemplater-image-module');

const expressions = require("angular-expressions");

//获取模板中的图片值{%image | size:200:100}

expressions.filters.size = function (input, width, height) {

return {

data: input,

size: [width, height],

};

};

function angularParser(tag) {

const expr = expressions.compile(tag.replace(/’/g, "'"));

return {

get(scope) {

return expr(scope);

},

};

}

// 将文件转为二进制

JszipUtils.getBinaryContent(fileDocx, function(err, res) {

if (err) { throw err}

let opts = {

centered: false,

fileType: "docx"

}

opts.getImage = function (tagValue) {

if (tagValue.size && tagValue.data) {

return base64DataURLToArrayBuffer(tagValue.data);

}

return base64DataURLToArrayBuffer(tagValue);

};

opts.getSize = function (_, tagValue) {

if (tagValue.size && tagValue.data) {

return tagValue.size;

}

return [500, 500];

};

// 将文件转为zip文件

let pizZip = new PizZip(res)

// 创建Docxtemplater对象实例并添加zip文件

let doc = new Docxtemplater()

doc.loadZip(pizZip)

doc.setOptions({ parser: angularParser });

doc.attachModule(new ImageModule(opts));

// 设置填充内容

doc.setData(data)

// 进行内容填充

try {

doc.render()

} catch (error) {

// 抛出异常

let e = {

message: error.message,

name: error.name,

stack: error.stack,

properties: error.properties

};

console.log(JSON.stringify({ error: e }));

throw error;

}

// 获取要下载的文件

let out = doc.getZip().generate({

type: 'blob',

mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'

})

// 进行下载

FileSave(out, outName)

})

}

内部的坑

不知道模板文件如何导入或导入错误，JszipUtils.getBinaryContent(fileDocx, function(err, res) {})时，不知道这个fileDocx模板文件放在哪里，然后出现引入路径错误

Error: Can't find end of central directory : is this a zip file?

解决方案：

在使用vue-cli2时，我们需要把模板文件放到static目录下

在使用vue-cli3时，我们需要把模板文件放在public目录下

然后当config中的publicPath是'./'时，直接传入文件名就好，如

JszipUtils.getBinaryContent('template.docx', function(err, res) {})

当config中的publicPath是 ‘/’时，则需要../一层层到相应位置，要特别注意省去public目录，如

JszipUtils.getBinaryContent('../../template.docx', function(err, res) {})

调用导出方法

我的环境是vue-cli3，然后再public目录下建立word文件夹存放模板文件weektmp.docx

Untitled.png

模板样例

Untitled1.png

成品样例

Untitled2.png