vue导出word文档

  • vue导出word文档已关闭评论
  • 11 次浏览
  • A+
所属分类:Web前端
摘要

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


具体需求

在我的疫情可视化项目中有一个功能需要导出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文件,内容如下:
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);     }); } 
  1. exportWord入参为:模板路径、json数据、文件名。其中模板放在public路径下。
  2. 我的模板如下:
    vue导出word文档
  3. 我的入参json数据结构如下:
    vue导出word文档