<template>
<div>
<div style="width: 600px; height: 400px;" id="iconContent"></div>
<button @click="ExportWord">导出Word</button>
</div>
</template>
<script>
import * as echarts from 'echarts';
import PizZip from 'pizzip';
import Docxtemplater from 'docxtemplater';
import ImageModule from 'docxtemplater-image-module-free';
import JSZipUtils from 'jszip-utils';
import { saveAs } from 'file-saver';
export default {
name: 'LineChart',
data() {
return {
evaluationInfo: {
// 其他信息可以在这里添加
},
imgUrl: '',
arr: [
// 评语数组可以在这里添加
]
};
},
mounted() {
this.initChart();
},
methods: {
initChart() {
// 基于准备好的dom,初始化echarts实例
// 指定图表的配置项和数据
let option = {
title: {
text: '示例饼状图',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left'
},
series: [
{
name: '销量',
type: 'pie',
radius: '50%',
data: [
{ value: 5, name: '衬衫' },
{ value: 20, name: '羊毛衫' },
{ value: 36, name: '雪纺衫' },
{ value: 10, name: '裤子' },
{ value: 10, name: '高跟鞋' },
{ value: 20, name: '袜子' }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
let chart = echarts.init(document.getElementById("iconContent"));
// 使用刚指定的配置项和数据显示图表。
chart.setOption(option);
// 获取图表的Base64图片数据
// setTimeout(() => {
// this.imgUrl = chart.getDataURL({
// pixelRatio: 2, // 导出的图片分辨率比例,默认为 1。
// backgroundColor: '#ccc' // 导出的图片背景色,默认使用 option 里的 backgroundColor
// });
// console.log(this.imgUrl);
// }, 1000);
chart.on('finished', () => {
this.imgUrl = chart.getDataURL({
pixelRatio: 2, // 导出的图片分辨率比例,默认为 1
backgroundColor: '#fff' // 导出的图片背景色,默认使用 option 里的 backgroundColor
});
console.log(this.imgUrl);
});
},
// 将base64图片转换为ArrayBuffer
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 = Buffer.from(stringBase64, "base64").toString("binary");
}
const len = binaryString.length;
const bytes = new Uint8Array(len);
for (let i = 0; i < len; i++) {
bytes[i] = binaryString.charCodeAt(i);
}
return bytes.buffer;
},
// 导出Word文档
ExportWord() {
const _this = this;
// 获取Word模板文件
JSZipUtils.getBinaryContent("import.docx", function (error, content) {
if (error) {
throw error;
}
// 配置ImageModule
let opts = {};
opts.centered = true;
opts.fileType = "docx";
opts.getImage = (tag) => {
return _this.base64DataURLToArrayBuffer(tag);
};
opts.getSize = () => {
return [600, 400]; // 设置图片的宽和高
};
// 加载文档内容
let zip = new PizZip(content);
let doc = new Docxtemplater();
doc.attachModule(new ImageModule(opts));
doc.loadZip(zip);
// 设置导出的数据
doc.setData({
arr: _this.arr, // 评语
imgUrl:_this.imgUrl
});
try {
// 渲染文档
doc.render();
} catch (error) {
console.log(JSON.stringify({ error }));
throw error;
}
// 生成并保存文档
var out = doc.getZip().generate({
type: "blob",
mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
});
saveAs(out, "报告.docx");
});
}
}
};
</script>
<style scoped>
/* 你可以在这里添加样式 */
button {
margin-top: 20px;
padding: 10px 20px;
font-size: 16px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
</style>
vue的图表转换成图片添加到word文档中的demo
最新推荐文章于 2024-08-23 13:45:37 发布