当前位置:主页 > vue > vue导出word文档

vue导出word文档

xi1年前 (2022-11-06)vue7540

具体需求

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

实现步骤

  • 多番查询后发现前端导出word,使用docxtemplater(https://docxtemplater.com/ )较为方便。具体使用步骤如下:
  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. 我的模板如下:
  3. 我的入参json数据结构如下:
转载请标注来源与原作者

本文链接:https://xiblogs.top/?id=27

“vue导出word文档” 的相关文章

vscode使用vue代码模板

vscode使用vue代码模板

1、vscode中打开:文件>首选项>用户片段>输入vue按下回车2、复制下面代码并保存。 { "Print to console": {...

vue自定义组件的点击事件失效

vue自定义组件的点击事件失效

在vue开发过程中为了减少重复代码,很多时候都需要将重复的部分写成一个组件,方便调用。但是使用组件时很可能又会给该组件添加点击事件。如果直接这样写,事件则会失效:正确写法应该是这样:...

canvas实现图片标记

canvas实现图片标记

前言由于业务需求,需要有一个图片标记功能,其实就是对图片画框画线做标记,类似微信的图片编辑但是需要存下标记图及其标记的具体数据,。功能其实很简单,但刚开始的时候也是费了一些功夫的。我将原项目中该功能抽...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。