vue导出word文档
具体需求
在我的疫情可视化项目中有一个功能需要导出word文档,在页面点击按钮后处理数据生成word文件,然后自动下载文档。
实现步骤
- 多番查询后发现前端导出word,使用docxtemplater较为方便。具体使用步骤如下:
- 安装docxtemplater:npm i docxtemplater
- 安装pizzip(使用PizZip实例获取文件内容):npm i pizzip
- 安装JSZipUtils(主要使用getBinaryContent获取文件二进制):npm i JSZipUtils
- 安装file-saver(保存文件的插件):npm i file-saver
- 创建downloadDoc.js文件,内容如下:
import docxtemplater from 'docxtemplater'
import PizZip from 'pizzip'
import JSZipUtils from 'jszip-utils'
import { saveAs } from 'file-saver'
export function exportWord(tempDocxPath, wordData, fileName) {
// 读取并获得模板文件的二进制内容
JSZipUtils.getBinaryContent(tempDocxPath, (error, content) => {
let zip = new PizZip(content);// 创建一个PizZip实例,内容为模板的内容
// 创建并加载docxtemplater实例对象
let doc = new docxtemplater();
doc.loadZip(zip);
doc.setData(wordData);
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, fileName);
});
}
- exportWord入参为:模板路径、json数据、文件名。其中模板放在public路径下。
- 我的模板如下:
- 我的入参json数据结构如下:
vue导出word文档的更多相关文章
- .NET通过调用Office组件导出Word文档
.NET通过调用Office组件导出Word文档 最近做项目需要实现一个客户端下载word表格的功能,该功能是用户点击"下载表格",服务端将该用户的数据查询出来并生成数据到Word ...
- C# 导出word文档及批量导出word文档(1)
这里用到了两个dll,一个是aspose.word.dll,另外一个是ICSharpCode.SharpZipLib.dll,ICSharpCode.SharpZipLib.dll是用于批量 ...
- C# 导出word文档及批量导出word文档(4)
接下来是批量导出word文档和批量打印word文件,批量导出word文档和批量打印word文件的思路差不多,只是批量打印不用打包压缩文件,而是把所有文件合成一个word,然后通过js来调用 ...
- C#导出Word文档开源组件DocX
1.帮助文档,这东西找了很久,而且它版本很旧,还是英文,W8.1系统上打不开 http://download.csdn.net/detail/zuofangyouyuan/7673573 2.开源网址 ...
- freemarker导出word文档——WordXML格式解析
前不久,公司一个项目需要实现导出文档的功能,之前是一个同事在做,做了3个星期,终于完成了,但是在项目上线之后却发现导出的文档有问题,此时,这个同事已经离职,我自然成为接班者,要把导出功能实现,但是我看 ...
- 自动生成并导出word文档
今天很荣幸又破解一现实难题:自动生成并导出word文档 先看页面效果: word效果: 代码: 先搭建struts2项目 创建action,并在struts.xml完成注册 <?xml vers ...
- Java 用Freemarker完美导出word文档(带图片)
Java 用Freemarker完美导出word文档(带图片) 前言 最近在项目中,因客户要求,将页面内容(如合同协议)导出成word,在网上翻了好多,感觉太乱了,不过最后还是较好解决了这个问题. ...
- freemarker导出word文档
使用freemarker导出word文档的过程 **************************************************************************** ...
- 【Java】导出word文档之freemarker导出
Java导出word文档有很多种方式,本例介绍freemarker导出,根据现有的word模板进行导出 一.简单导出(不含循环导出) 1.新建一个word文件.如下图: 2.使用word将文件另存为x ...
- PowerDesigner导出word,PowerDesigner把表导出到word,PDM导出word文档
PowerDesigner导出word,PowerDesigner把表导出到word,PDM导出word文档 >>>>>>>>>>>& ...
随机推荐
- 韦东山freeRTOS系列教程之【第九章】任务通知(Task Notifications)
目录 系列教程总目录 概述 9.1 任务通知的特性 9.1.1 优势及限制 9.1.2 通知状态和通知值 9.2 任务通知的使用 9.2.1 两类函数 9.2.2 xTaskNotifyGive/ul ...
- Java核心字符串String进阶
字符串对象 字符串是对象,不是简单数据类型 封装在java.lang包,自动导入 创建字符串对象 常见创建一个字符串对象有下面2个方法 String str=new String("chen ...
- 详解Web应用安全系列(10)文件上传漏洞
文件上传漏洞(File Upload Vulnerabilities)是Web攻击中常见的一种安全漏洞,它允许攻击者上传并执行恶意文件,从而可能对Web服务器造成严重的安全威胁. 一.定义与原理 文件 ...
- 网易数帆内核团队:memory cgroup 泄漏问题的分析与解决
memory cgroup 泄露是 K8s(Kubernetes) 集群中普遍存在的问题,轻则导致节点内存资源紧张,重则导致节点无响应只能重启服务器恢复:大多数的开发人员会采用定期 drop cach ...
- [oeasy]python0086_ASCII_出现背景_1963年_DEC_PDP系列主机_VT系列终端
编码进化 回忆上次内容 上次 回顾了 字符编码的新陈代谢 ibm 曾经的EBCDIC 由于 字符不连续 导致 后续 出现无数问题 随着 网络的发展 数据交换的 需要 原来的小隐患 现在 产生了 巨大问 ...
- [oeasy]python0074_设置高亮色_color_highlight_ansi_控制终端颜色
更多颜色 回忆上次内容 上次我们搞的还是颜色 FG foreground 前景色 30-37 BG background 背景色 40-47 这些 都可以和字体样式 结合起来 难道 就这几种颜色 吗? ...
- C# 自定义泛型二维数组
public class Array2D<T>{ public int Width { get; } public int Height { get; } public T[] Data ...
- 第四章:springboot整合mybatis
1,引入mybatis依赖 <dependency> <groupId>org.mybatis.spring.boot</groupId> <artifact ...
- c++17 using继承所有构造函数
//使用using继承所有的构造函数 #include "tmp.h" #include <iostream> using namespace std; struct ...
- 矩阵的奇异值分解(SVD)及其应用
奇异值分解(Singular Value Decomposition, SVD)是矩阵的一种分解方法,与特征值分解不同,它可以应用于长方矩阵中,并将其分解成三个特殊矩阵的乘积.此外SVD分解还具有许多 ...