具体需求

在我的疫情可视化项目中有一个功能需要导出word文档,在页面点击按钮后处理数据生成word文件,然后自动下载文档。

实现步骤

  • 多番查询后发现前端导出word,使用docxtemplater较为方便。具体使用步骤如下:
  1. 安装docxtemplater:npm i docxtemplater
  2. 安装pizzip(使用PizZip实例获取文件内容):npm i pizzip
  3. 安装JSZipUtils(主要使用getBinaryContent获取文件二进制):npm i JSZipUtils
  4. 安装file-saver(保存文件的插件):npm i file-saver
  5. 创建downloadDoc.js文件,内容如下:
  1. import docxtemplater from 'docxtemplater'
  2. import PizZip from 'pizzip'
  3. import JSZipUtils from 'jszip-utils'
  4. import { saveAs } from 'file-saver'
  5. export function exportWord(tempDocxPath, wordData, fileName) {
  6. // 读取并获得模板文件的二进制内容
  7. JSZipUtils.getBinaryContent(tempDocxPath, (error, content) => {
  8. let zip = new PizZip(content);// 创建一个PizZip实例,内容为模板的内容
  9. // 创建并加载docxtemplater实例对象
  10. let doc = new docxtemplater();
  11. doc.loadZip(zip);
  12. doc.setData(wordData);
  13. try {
  14. // 用模板变量的值替换所有模板变量
  15. doc.render();
  16. } catch (error) {
  17. // 抛出异常
  18. let e = {
  19. message: error.message,
  20. name: error.name,
  21. stack: error.stack,
  22. properties: error.properties
  23. };
  24. console.log(JSON.stringify({
  25. error: e
  26. }));
  27. throw error;
  28. }
  29. // 生成一个代表docxtemplater对象的zip文件(不是一个真实的文件,而是在内存中的表示)
  30. let out = doc.getZip().generate({
  31. type: "blob",
  32. mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
  33. });
  34. // 将目标文件对象保存为目标类型的文件,并命名
  35. saveAs(out, fileName);
  36. });
  37. }
  1. exportWord入参为:模板路径、json数据、文件名。其中模板放在public路径下。
  2. 我的模板如下:

  3. 我的入参json数据结构如下:

vue导出word文档的更多相关文章

  1. .NET通过调用Office组件导出Word文档

    .NET通过调用Office组件导出Word文档 最近做项目需要实现一个客户端下载word表格的功能,该功能是用户点击"下载表格",服务端将该用户的数据查询出来并生成数据到Word ...

  2. C# 导出word文档及批量导出word文档(1)

         这里用到了两个dll,一个是aspose.word.dll,另外一个是ICSharpCode.SharpZipLib.dll,ICSharpCode.SharpZipLib.dll是用于批量 ...

  3. C# 导出word文档及批量导出word文档(4)

          接下来是批量导出word文档和批量打印word文件,批量导出word文档和批量打印word文件的思路差不多,只是批量打印不用打包压缩文件,而是把所有文件合成一个word,然后通过js来调用 ...

  4. C#导出Word文档开源组件DocX

    1.帮助文档,这东西找了很久,而且它版本很旧,还是英文,W8.1系统上打不开 http://download.csdn.net/detail/zuofangyouyuan/7673573 2.开源网址 ...

  5. freemarker导出word文档——WordXML格式解析

    前不久,公司一个项目需要实现导出文档的功能,之前是一个同事在做,做了3个星期,终于完成了,但是在项目上线之后却发现导出的文档有问题,此时,这个同事已经离职,我自然成为接班者,要把导出功能实现,但是我看 ...

  6. 自动生成并导出word文档

    今天很荣幸又破解一现实难题:自动生成并导出word文档 先看页面效果: word效果: 代码: 先搭建struts2项目 创建action,并在struts.xml完成注册 <?xml vers ...

  7. Java 用Freemarker完美导出word文档(带图片)

    Java  用Freemarker完美导出word文档(带图片) 前言 最近在项目中,因客户要求,将页面内容(如合同协议)导出成word,在网上翻了好多,感觉太乱了,不过最后还是较好解决了这个问题. ...

  8. freemarker导出word文档

    使用freemarker导出word文档的过程 **************************************************************************** ...

  9. 【Java】导出word文档之freemarker导出

    Java导出word文档有很多种方式,本例介绍freemarker导出,根据现有的word模板进行导出 一.简单导出(不含循环导出) 1.新建一个word文件.如下图: 2.使用word将文件另存为x ...

  10. PowerDesigner导出word,PowerDesigner把表导出到word,PDM导出word文档

    PowerDesigner导出word,PowerDesigner把表导出到word,PDM导出word文档 >>>>>>>>>>>& ...

随机推荐

  1. 韦东山freeRTOS系列教程之【第九章】任务通知(Task Notifications)

    目录 系列教程总目录 概述 9.1 任务通知的特性 9.1.1 优势及限制 9.1.2 通知状态和通知值 9.2 任务通知的使用 9.2.1 两类函数 9.2.2 xTaskNotifyGive/ul ...

  2. Java核心字符串String进阶

    字符串对象 字符串是对象,不是简单数据类型 封装在java.lang包,自动导入 创建字符串对象 常见创建一个字符串对象有下面2个方法 String str=new String("chen ...

  3. 详解Web应用安全系列(10)文件上传漏洞

    文件上传漏洞(File Upload Vulnerabilities)是Web攻击中常见的一种安全漏洞,它允许攻击者上传并执行恶意文件,从而可能对Web服务器造成严重的安全威胁. 一.定义与原理 文件 ...

  4. 网易数帆内核团队:memory cgroup 泄漏问题的分析与解决

    memory cgroup 泄露是 K8s(Kubernetes) 集群中普遍存在的问题,轻则导致节点内存资源紧张,重则导致节点无响应只能重启服务器恢复:大多数的开发人员会采用定期 drop cach ...

  5. [oeasy]python0086_ASCII_出现背景_1963年_DEC_PDP系列主机_VT系列终端

    编码进化 回忆上次内容 上次 回顾了 字符编码的新陈代谢 ibm 曾经的EBCDIC 由于 字符不连续 导致 后续 出现无数问题 随着 网络的发展 数据交换的 需要 原来的小隐患 现在 产生了 巨大问 ...

  6. [oeasy]python0074_设置高亮色_color_highlight_ansi_控制终端颜色

    更多颜色 回忆上次内容 上次我们搞的还是颜色 FG foreground 前景色 30-37 BG background 背景色 40-47 这些 都可以和字体样式 结合起来 难道 就这几种颜色 吗? ...

  7. C# 自定义泛型二维数组

    public class Array2D<T>{ public int Width { get; } public int Height { get; } public T[] Data ...

  8. 第四章:springboot整合mybatis

    1,引入mybatis依赖 <dependency> <groupId>org.mybatis.spring.boot</groupId> <artifact ...

  9. c++17 using继承所有构造函数

    //使用using继承所有的构造函数 #include "tmp.h" #include <iostream> using namespace std; struct ...

  10. 矩阵的奇异值分解(SVD)及其应用

    奇异值分解(Singular Value Decomposition, SVD)是矩阵的一种分解方法,与特征值分解不同,它可以应用于长方矩阵中,并将其分解成三个特殊矩阵的乘积.此外SVD分解还具有许多 ...