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.…

arm-linux-gnueabihf-g++ gcc编译、优化命令 汇总

gcc优化选项&#xff0c;可在编译时间&#xff0c;目标文件长度&#xff0c;执行效率三个维度&#xff0c;进行不同的取舍和平衡。 gcc 常用编译选项 arm-linux-gnueabihf-g -O3 -marcharmv7-a -mcpucortex-a9 -ftree-vectorize -mfpuneon -mfpuvfpv3-fp16 -mfloat-abihard -…

js的FileSaver.saveAs()方法:监听保存进度,进度条等方法

在使用FileSaver.saveAs保存表格到本地时&#xff0c;如果想要获取导出/保存进度可以如下操作 FileSaver.js的saveAs()方法是一个异步操作&#xff0c;它将文件保存到用户设备上。在调用saveAs()方法后&#xff0c;可以通过使用回调函数、Promise、或监听相关事件来确定saveAs(…

在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、部署测…

Go 1.21新增的内置函数(built-in functions)详解

Go 1.21新增的内置函数分别是 min、max 和 clear&#xff0c;接下来看下这几个函数的用途和使用示例。 在编程过程中&#xff0c;需要知道一组值中的最大或最小值的场景是很常见的&#xff0c;比如排序、统计等场景。之前都需要自己写代码来实现这个功能&#xff0c;现在 Go 1…

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

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

安卓获取当前的IP地址

文章目录 获取IP地址完整示例代码 获取IP地址 在安卓中&#xff0c;我们使用静态方法NetworkInterface.getNetworkInterfaces() 来获取当前设备上所有的网络接口。 网络接口是指设备上用于进行网络通信的硬件或软件。这些接口可以是物理接口&#xff08;如以太网接口、无线网…

使用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/…

Day 31 C++ STL常用算法(下)

文章目录 常用拷贝和替换算法copy——容器内指定范围的元素拷贝到另一容器中函数原型注意——利用copy算法在拷贝时&#xff0c;目标容器要提前开辟空间示例 replace——将容器内指定范围的第一个旧元素修改为新元素函数原型注意——replace只会替换区间内满足条件的第一个旧元…

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

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

C++ 动态内存

C 动态内存 C 程序中的内存分为两个部分&#xff1a; 栈&#xff1a;在函数内部声明的所有变量都将占用栈内存堆&#xff1a;这是程序中未使用的内存&#xff0c;在程序运行时可用于动态分配内存 很多时候&#xff0c;无法提前预知需要多少内存来存储某个定义变量中的特定信…

【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 &…