vue项目根据word模版导出word文件

一、安装依赖

//1、docxtemplaternpm install docxtemplater pizzip -S//2、jszip-utilsnpm install jszip-utils -S//3、pizzipnpm install pizzip -S//4、FileSaver
npm install file-saver --save

二、创建word模版

也就是编辑一个word文档,文档中需要动态取值的地方用{变量}取值;表格数据可以进行循环,以{#数组变量名}开始,以{/数组变量名}结束,如果数组变量是字符串而非对象则{#table}{.}{/table}。图片以{%图片base64变量名}展示,{%%图片base64变量名}表示图片居中。word模版放在public下。

word模版占位符用法

三、导出方法

//导入包
import PizZip from 'pizzip'
import docxtemplater from 'docxtemplater'
import JSZipUtils from 'jszip-utils'
import { saveAs } from 'file-saver'data() {return {form: {userName: "杰克",value: "666", },// 表格信息tableData: [],//图片img1: '',img2: ''};
},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;
},
// 点击导出word
exportWord() {//这里要引入处理图片的插件,下载docxtemplater后,引入的就在其中了var ImageModule = require('docxtemplater-image-module-free');var fs = require("fs");const expressions = require("angular-expressions");let _this = this;// 读取并获得模板文件的二进制内容,放在项目中即可(wordTemplate.docx是public文件下的word模版)JSZipUtils.getBinaryContent("wordTemplate.docx", function(error, content) {if (error) {throw error;};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);},};}// 图片处理let opts = {}opts = { centered: false };opts.getImage = (chartId)=> {return _this.base64DataURLToArrayBuffer(chartId);}opts.getSize = function(img, tagValue, tagName) {console.log(tagName)//自定义指定图像大小,此处可动态调试各别图片的大小if (tagName === "chartImg1") return [249,200];return [300,200];}// 创建一个PizZip实例,内容为模板的内容let zip = new PizZip(content);// 创建并加载docxtemplater实例对象let doc = new docxtemplater();// 去除未定义值所显示的undefineddoc.setOptions({nullGetter: function() { return ""; }});doc.attachModule(new ImageModule(opts));doc.loadZip(zip);// 设置模板变量的值(键是word模版中用的值,值是vue文件data中的变量)doc.setData({..._this.form,table: _this.tableData,img1: _this.img1,img2: _this.img2});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;}// 生成一个代表docxtemplater对象的zip文件(不是一个真实的文件,而是在内存中的表示)let out = doc.getZip().generate({type: "blob",mimeType:"application/vnd.openxmlformats-officedocument.wordprocessingml.document"});// 将目标文件对象保存为目标类型的文件,并命名saveAs(out, "测试.docx");});
},
}

ECHARTS图表的图片并转为base64格式,在图表加载完成时

this.img2 = myChart2.getDataURL({pixelRatio: 2,      // 导出的图片分辨率比例,默认为 1。backgroundColor: '#fff'   // 导出的图片背景色,默认使用 option 里的 backgroundColor
});

如果是需要动态添加的背景图,可以直接将图片的base64码赋值给img1变量。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/40960.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【JAVA】数组练习

⭐ 作者&#xff1a;小胡_不糊涂 &#x1f331; 作者主页&#xff1a;小胡_不糊涂的个人主页 &#x1f4c0; 收录专栏&#xff1a;浅谈Java &#x1f496; 持续更文&#xff0c;关注博主少走弯路&#xff0c;谢谢大家支持 &#x1f496; 数组练习 1. 数组转字符串2. 数组拷贝3.…

在vue中使用swiper轮播图(搭配watch和$nextTick())

在组件中使用轮播图展示图片信息&#xff1a; 1.下载swiper,5版本为稳定版本 cnpm install swiper5 2.在组件中引入swiper包和对应样式&#xff0c;若多组件使用swiper&#xff0c;可以把swiper引入到main.js入口文件中&#xff1a; import swiper/css/swiper.css //引入swipe…

SpringBoot系列---【SpringBoot在多个profiles环境中自由切换】

SpringBoot在多个profiles环境中自由切换 1.在resource目录下新建dev&#xff0c;prod两个目录&#xff0c;并分别把dev环境的配置文件和prod环境的配置文件放到对应目录下&#xff0c;可以在配置文件中指定激活的配置文件&#xff0c;也可以默认不指定。 2.在pom.xml中最后位置…

07微服务的事务管理机制

一句话导读 在单体应用程序中&#xff0c;事务通常是在单个数据库或单个操作系统中管理的&#xff0c;而在微服务架构中&#xff0c;事务需要跨越多个服务和数据库&#xff0c;这就使得事务管理变得更加复杂和困难。 目录 一句话导读 一、微服务事务管理的定义和意义 二、微…

Layui列表表头去掉复选框改为选择

效果&#xff1a; 代码&#xff1a; // 表头复选框去掉改为选择 $(".layui-table th[data-field"0"] .layui-table-cell").html("<span>选择</span>");

做好以下几点,可以让我们延长周末体验感,好好放松!!!

工作以后常常容易感到疲于奔命&#xff0c;让我们找到适合自己方式&#xff0c;来让我们度过一个充实放松的周末! 方向一&#xff1a;分享你周末的时间规划 我们可以把每个月当做一个周期&#xff0c;制定一个简单的计划&#xff0c;如&#xff1a;第一周&#xff0c;锻炼身体…

基于Prometheus监控Kubernetes集群

目录 一、环境准备 1.1、主机初始化配置 1.2、部署docker环境 二、部署kubernetes集群 2.1、组件介绍 2.2、配置阿里云yum源 2.3、安装kubelet kubeadm kubectl 2.4、配置init-config.yaml 2.5、安装master节点 2.6、安装node节点 2.7、安装flannel、cni 2.8、部署测…

低成本无刷高速吹风机单片机方案

高速吹风机的转速一般是普通吹风机的5倍左右。一般来说&#xff0c;吹风机的电机转速一般为2-3万转/分钟&#xff0c;而高速吹风机的电机转速一般为10万转/分钟左右。高转速增加了高风速。一般来说&#xff0c;吹风机的风力只有12-17米/秒&#xff0c;而高速吹风机的风力可以达…

使用Docker搭建MySQL主从复制(一主一从)

Docker安装MySQL docker pull mysql:5.7 docker images mysql安装步骤 1.新建主服务器容器实例3307 docker run -p 3307:3306 --name mysql-master -v /usr/local/docker/mysql5.7/data/mysql-master/logs:/var/log/mysql -v /usr/local/docker/mysql5.7/data/mysql-master/…

cve-2016-7193:wwlib 模块堆数据结构溢出

简介 漏洞编号&#xff1a;cve-2016-7193漏洞类型&#xff1a;堆溢出软件名称&#xff1a;Office模块名称&#xff1a;wwlib历史漏洞&#xff1a;较多影响的版本 攻击利用&#xff1a;APT 攻击利器-Word 漏洞 CVE-2016-7193 原理揭秘 操作环境 系统&#xff1a;Win10 1607软…

【Docker报错】docker拉取镜像时报错:no such host

报错信息 [rootSoft soft]# docker pull mysql Using default tag: latest Error response from daemon: Head "https://registry-1.docker.io/v2/library/mysql/manifests/latest": dial tcp: lookup registry-1.docker.io on 192.168.80.2:53: no such host解决方法…

3D模型格式转换工具如何与Parasolid集成?

概述 HOOPS Exchange包括一个 Parasolid 连接器&#xff0c;它允许 Parasolid 开发人员轻松地将 CAD 数据导入到活动的 Parasolid 会话中。如果源数据基于 Parasolid&#xff08;NX、Solid Edge 或 SolidWorks&#xff09;&#xff0c;则数据将按原样导入。 这意味着您可以假…

主数据管理案例-某政务

1、 背景介绍及难点分析 近年来&#xff0c;我国在大数据发展方面持续发力&#xff0c;取得了明显成效。但也要看到&#xff0c;目前我国大数据发展还存在“孤岛化”“碎片化”等问题&#xff0c;无序参与过度与创新参与不足并存&#xff0c;导致大数据资源配置统筹不&#xff…

【C++】list容器

1.list基本概念 2.list构造函数 #include <iostream> using namespace std;#include<list> //链表list容器构造函数//输出list链表 void printList(const list<int>& L) {for (list<int>::const_iterator it L.begin(); it ! L.end(); it){cout &…

STM32入门学习之定时器PWM输出

1.脉冲宽度调制PWM(Pulse Width Modulation)是利用微处理器的数字输出来对模拟电路进行控制的一种非常有效的技术。PWM可以理解为高低电平的占空比&#xff0c;即输出高电平时间与低电平时间的比值。PWM的应用是否广泛&#xff0c;比如在步进电机的控制中&#xff0c;可以通过P…

【MySQL系列】-回表、覆盖索引真的懂吗

【MySQL系列】-回表、覆盖索引真的懂吗 文章目录 【MySQL系列】-回表、覆盖索引真的懂吗一、MYSQL索引结构1.1 索引的概念1.2 索引的特点1.3 索引的优点1.4 索引的缺点 二、B-Tree与BTree2.1 B-Tree2.2 BTree2.3 B-Tree 与BTree树的区别2.4 那么为什么InnoDB的主键最好要搞成有…

【软件测试】接口测试工具APIpost

说实话&#xff0c;了解APIpost是因为&#xff0c;我的所有接口相关的文章下&#xff0c;都有该APIpost水军的评论&#xff0c;无非就是APIpost是中文版的postman&#xff0c;有多么多么好用&#xff0c;虽然咱也还不是什么啥网红&#xff0c;但是不知会一声就乱在评论区打广告…

【力扣每日一题】2023.8.14 合并二叉树

目录 题目&#xff1a; 示例&#xff1a; 分析&#xff1a; 代码&#xff1a; 题目&#xff1a; 示例&#xff1a; 分析&#xff1a; 给我们合并两棵二叉树&#xff0c;合并的方式就是把对应位置的节点的值相加&#xff0c;最后把合并后的二叉树的根节点返回出去。 这类二…

一文看尽R-CNN、Fast R-CNN、Faster R-CNN、YOLO、SSD详解

一文看尽R-CNN、Fast R-CNN、Faster R-CNN、YOLO、SSD详解 以下六篇文章总结详细&#xff1a; 1. 一文读懂目标检测&#xff1a;R-CNN、Fast R-CNN、Faster R-CNN、YOLO、SSD 2. 【深度学习】R-CNN 论文解读及个人理解 3、R-CNN论文详解 4、一文读懂Faster RCNN 5、学一百遍都…

JAVA基础知识(六)——异常处理

异常 一、异常概述与异常体系结构二、常见异常三、异常处理机制一&#xff1a;try-catch-finally四、异常处理机制二&#xff1a;throws五、手动抛出异常&#xff1a;throw六、用户自定义异常类七、开发中如何选择使用try-catch-finally还是使用throws八、如何看待代码中的编译…