vue +echarts+ docxtemplater导出word和多张图表图片

2023-10-14 07:59

本文主要是介绍vue +echarts+ docxtemplater导出word和多张图表图片,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

vue +echarts+ docxtemplater导出word和多张图表图片

  • 前期准备

前期准备

1、按照依赖的插件docxtemplater、pizzip、jszip-utils、jszip、FileSaver、docxtemplater-image-module-free。

//-- 安装 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 

2、引入依赖

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 '

注:若引入docxtemplater-image-module-free 报错时,可尝试使用require方法引入。

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

3、代码-父组件
我是把table通过插槽的方式注入到子组件的

<template><div class="box">
<wordexportFileName="测试666"templateFileName="templateFile":wordData="wordData":chartOptions="chartOptions"><template v-slot:table><table cellspacing="0"><caption>标题</caption><tr><td class="key-name">标题1</td><td colspan="3">{{ wordData.a }}</td></tr><tr><td class="key-name">标题2</td><td colspan="3">{{ wordData.b }}</td></tr><tr><td class="key-name">标题3</td><td colspan="3">{{ wordData.c }}</td></tr><tr><td class="key-name">标题4</td><td>{{ wordData.d }}</td><td class="key-name">标题6</td><td>{{ wordData.f }}</td></tr><tr><td class="key-name">标题5</td><td>{{ wordData.e }}</td><td class="key-name">标题7</td><td>{{ wordData.g }}</td></tr><tr><td colspan="4" class="key-name options">审批意见</td></tr><tr><td colspan="4" class="options">{{ wordData.h }}</td></tr><tr v-for="(item, index) in wordData.list" :key="index"><td class="key-name">姓名</td><td>{{ item.name }}</td><td class="key-name">电话</td><td>{{ item.phone }}</td></tr></table></template></word>
</div>
</template>
<script>
// 子组件
import word from "@/components/exportWord.vue";
export default {components: { word },data() {return {// 导出wordwordData: {a: "这是标题1内容",b: "这是标题2内容",c: "这是标题3内容",d: "这是标题4内容",e: "这是标题5内容",f: "这是标题6内容",g: "这是标题7内容",h: "同意",list: [{ name: "王五", phone: "18888888888" },{ name: "王五", phone: "18888888888" },{ name: "王五", phone: "18888888888" },{ name: "王五", phone: "18888888888" },],},// 图表chartOptions: [// echarts图表的option// 第一个图表{title: {text: "某站点用户访问来源",subtext: "纯属虚构",left: "center",},tooltip: {trigger: "item",},legend: {orient: "vertical",left: "left",},series: [{name: "访问来源",type: "pie",radius: "50%",data: [{ value: 1048, name: "搜索引擎" },{ value: 735, name: "直接访问" },{ value: 580, name: "邮件营销" },{ value: 484, name: "联盟广告" },{ value: 300, name: "视频广告" },],emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: "rgba(0, 0, 0, 0.5)",},},},],},// 第二个图表{title: {text: "未来一周气温变化",subtext: "纯属虚构",},tooltip: {trigger: "axis",},legend: {data: ["最高气温", "最低气温"],},xAxis: {type: "category",boundaryGap: false,data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],},yAxis: {type: "value",axisLabel: {formatter: "{value} °C",},},series: [{name: "最高气温",type: "line",data: [10, 11, 13, 11, 12, 12, 9],markPoint: {data: [{ type: "max", name: "最大值" },{ type: "min", name: "最小值" },],},markLine: {data: [{ type: "average", name: "平均值" }],},},{name: "最低气温",type: "line",data: [1, -2, 2, 5, 3, 2, 0],markPoint: {data: [{ name: "周最低", value: -2, xAxis: 1, yAxis: -1.5 }],},markLine: {data: [{ type: "average", name: "平均值" },[{symbol: "none",x: "90%",yAxis: "max",},{symbol: "circle",label: {position: "start",formatter: "最大值",},type: "max",name: "最高点",},],],},},],},],};},};
</script>

4、代码-子组件

<template><!-- 导出word模版 --><div class="approvalNo-or-opinionNo-list"><el-button type="primary" size="small" @click="exportWord">点击下载</el-button><div id="pdfDom"><slot name="table"></slot></div><divstyle="width: 600px; height: 300px; margin: 0 auto"v-for="(item, index) in chartOptions":key="index"><Echart :options="item" ref="chart"></Echart></div></div>
</template><script>
import docxtemplater from "docxtemplater";
import JSZipUtils from "jszip-utils";
import { saveAs } from "file-saver";
import JSZip from "jszip";
import PizZip from "pizzip";
import Echart from "@/components/Echarts.vue";
export default {components: { Echart },data() {return {};},props: {// 文档数据wordData: {type: Object,default: {},},// 导出文件名字exportFileName: {type: String,default: "word",},// 模版文件名字(文件需放在public目录下,文件格式为docx)templateFileName: {type: String,default: "templateFile",},// 图表option 数组,可多个图表chartOptions: {type: Array,default: [],},},methods: {// 导出echarts图片,格式转换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() {const ImageModule = require("docxtemplater-image-module-free");const that = this;// 存放echarts 图表 base64图片数组const str = [];// 读取并获得模板文件的二进制内容JSZipUtils.getBinaryContent(`${that.templateFileName}.docx`,(error, content) => {if (error) {// 抛出异常throw error;}const zip = new PizZip(content); // 创建一个JSZip实例,内容为模板的内容const doc = new docxtemplater();doc.loadZip(zip); // 创建并加载docxtemplater实例对象//   如果有echarts图表if (that.chartOptions.length > 0) {for (const iterator of that.$refs["chart"]) {// 这个getChartImg方法是我的echart组件中获取echarts图表图片的base64的dataurliterator.getChartImg((chartImg) => {str.push({ image: chartImg });});}// 图片处理const opts = {};opts.centered = true; // 图片居中,在word模板中定义方式为{%%image}opts.fileType = "docx";opts.getImage = (chartId) => {return that.base64DataURLToArrayBuffer(chartId);};opts.getSize = () => {return [600, 300];};const imageModule = new ImageModule(opts);doc.attachModule(imageModule);}doc.setData({ ...that.wordData, chartlist: str }); // 设置模板变量的值try {doc.render(); // 用模板变量的值替换所有模板变量} catch (error) {const e = {message: error.message,name: error.name,stack: error.stack,properties: error.properties,};console.log(JSON.stringify({ error: e }));throw error; // 抛出异常}// 生成一个代表docxtemplater对象的zip文件(不是一个真实的文件,而是在内存中的表示)const out = doc.getZip().generate({type: "blob",mimeType:"application/vnd.openxmlformats-officedocument.wordprocessingml.document",});// 将目标文件对象保存为目标类型的文件,并命名saveAs(out, `${that.exportFileName}.docx`);});},},
};
</script><style lang="less">
.approvalNo-or-opinionNo-list {height: 350px;overflow-y: auto;padding-bottom: 20px;border-bottom: 1px solid #ccc;> #pdfDom {table {text-align: center;border-bottom: 1px solid #ccc;width: 93%;margin: 0 auto;font-family: "楷体", "楷体_GB2312";caption {font-size: 16px;text-align: center;line-height: 46px;color: #333;font-weight: bold;}td {width: 25%;height: 32px;color: #666;border-left: 1px solid #ccc;border-top: 1px solid #ccc;padding: 0 6px;}td:last-child {border-right: 1px solid #ccc;}.key-name {color: #333;font-weight: 600;}.options {padding: 10px;text-align: justify;text-indent: 2em;}}}
}
</style>

5、getChartImg方法

// 获取图表base64图getChartImg(callback: any) {const that = this as any;callback(that.myChart.getDataURL());},

5、word模版
在这里插入图片描述
6、页面
在这里插入图片描述

7、成功导出后的word
在这里插入图片描述

这篇关于vue +echarts+ docxtemplater导出word和多张图表图片的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/209174

相关文章

基于Python实现一个图片拆分工具

《基于Python实现一个图片拆分工具》这篇文章主要为大家详细介绍了如何基于Python实现一个图片拆分工具,可以根据需要的行数和列数进行拆分,感兴趣的小伙伴可以跟随小编一起学习一下... 简单介绍先自己选择输入的图片,默认是输出到项目文件夹中,可以自己选择其他的文件夹,选择需要拆分的行数和列数,可以通过

Java操作Word文档的全面指南

《Java操作Word文档的全面指南》在Java开发中,操作Word文档是常见的业务需求,广泛应用于合同生成、报表输出、通知发布、法律文书生成、病历模板填写等场景,本文将全面介绍Java操作Word文... 目录简介段落页头与页脚页码表格图片批注文本框目录图表简介Word编程最重要的类是org.apach

利用Python脚本实现批量将图片转换为WebP格式

《利用Python脚本实现批量将图片转换为WebP格式》Python语言的简洁语法和库支持使其成为图像处理的理想选择,本文将介绍如何利用Python实现批量将图片转换为WebP格式的脚本,WebP作为... 目录简介1. python在图像处理中的应用2. WebP格式的原理和优势2.1 WebP格式与传统

基于 HTML5 Canvas 实现图片旋转与下载功能(完整代码展示)

《基于HTML5Canvas实现图片旋转与下载功能(完整代码展示)》本文将深入剖析一段基于HTML5Canvas的代码,该代码实现了图片的旋转(90度和180度)以及旋转后图片的下载... 目录一、引言二、html 结构分析三、css 样式分析四、JavaScript 功能实现一、引言在 Web 开发中,

Python如何去除图片干扰代码示例

《Python如何去除图片干扰代码示例》图片降噪是一个广泛应用于图像处理的技术,可以提高图像质量和相关应用的效果,:本文主要介绍Python如何去除图片干扰的相关资料,文中通过代码介绍的非常详细,... 目录一、噪声去除1. 高斯噪声(像素值正态分布扰动)2. 椒盐噪声(随机黑白像素点)3. 复杂噪声(如伪

Python中图片与PDF识别文本(OCR)的全面指南

《Python中图片与PDF识别文本(OCR)的全面指南》在数据爆炸时代,80%的企业数据以非结构化形式存在,其中PDF和图像是最主要的载体,本文将深入探索Python中OCR技术如何将这些数字纸张转... 目录一、OCR技术核心原理二、python图像识别四大工具库1. Pytesseract - 经典O

Python实现精准提取 PDF中的文本,表格与图片

《Python实现精准提取PDF中的文本,表格与图片》在实际的系统开发中,处理PDF文件不仅限于读取整页文本,还有提取文档中的表格数据,图片或特定区域的内容,下面我们来看看如何使用Python实... 目录安装 python 库提取 PDF 文本内容:获取整页文本与指定区域内容获取页面上的所有文本内容获取

Python基于微信OCR引擎实现高效图片文字识别

《Python基于微信OCR引擎实现高效图片文字识别》这篇文章主要为大家详细介绍了一款基于微信OCR引擎的图片文字识别桌面应用开发全过程,可以实现从图片拖拽识别到文字提取,感兴趣的小伙伴可以跟随小编一... 目录一、项目概述1.1 开发背景1.2 技术选型1.3 核心优势二、功能详解2.1 核心功能模块2.

Go语言如何判断两张图片的相似度

《Go语言如何判断两张图片的相似度》这篇文章主要为大家详细介绍了Go语言如何中实现判断两张图片的相似度的两种方法,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 在介绍技术细节前,我们先来看看图片对比在哪些场景下可以用得到:图片去重:自动删除重复图片,为存储空间"瘦身"。想象你是一个

C#实现将Office文档(Word/Excel/PDF/PPT)转为Markdown格式

《C#实现将Office文档(Word/Excel/PDF/PPT)转为Markdown格式》Markdown凭借简洁的语法、优良的可读性,以及对版本控制系统的高度兼容性,逐渐成为最受欢迎的文档格式... 目录为什么要将文档转换为 Markdown 格式使用工具将 Word 文档转换为 Markdown(.