vue导出word文档

最新推荐文章于 2025-03-12 15:37:32 发布

zbh_701828

最新推荐文章于 2025-03-12 15:37:32 发布

阅读量797

点赞数 4

分类专栏：前端文章标签：前端 vue

本文链接：https://blog.youkuaiyun.com/zbh_701828/article/details/119841111

版权

前端专栏收录该内容

1 篇文章

订阅专栏

这篇博客介绍了如何利用JavaScript库docxtemplater、pizzip和file-saver，结合npm包来动态填充Word模板并导出文档。通过提供模板路径和数据对象，可以实现模板中变量替换，包括数组和对象的处理。示例代码展示了从读取模板到生成并保存最终Word文件的完整流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先安装相应插件

npm i docxtemplater

npm i pizzip

npm i jszip-utils

npm i file-saver

创建一个js文件

tempDocxPath 是word模板例如 “/xxxx.docx”

fillname 原本是作为导出的word的名字变量的后来作废了，写在了data里面

import docxtemplater from 'docxtemplater'
import PizZip from 'pizzip'
import JSZipUtils from 'jszip-utils'
import {saveAs} from 'file-saver'

export const exportDocx = (tempDocxPath,data) => {
  // 点击导出word
  // 读取并获得模板文件的二进制内容
  JSZipUtils.getBinaryContent(tempDocxPath,(error, content) => {
      // 抛出异常
      if (error) {
          throw error;
      }

      // 创建一个PizZip实例，内容为模板的内容
      let zip = new PizZip(content);
      // 创建并加载docxtemplater实例对象
      let doc = new docxtemplater();
      doc.loadZip(zip);

      // 设置模板变量的值
      doc.setData(data);
      try {
          // 用模板变量的值替换所有模板变量
          doc.render();
      } catch (error) {
        console.log(error);
          // 抛出异常
          let e = {
              message: error.message,
              name: error.name,
              stack: error.stack,
              properties: error.properties
          };
          throw error;
      }
      
      // 生成一个代表docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示）
      let out = doc.getZip().generate({
          type: "blob",
          mimeType:"application/vnd.openxmlformats-officedocument.wordprocessingml.document"
      });
      // 将目标文件对象保存为目标类型的文件，并命名
      saveAs(out,data.fillname + ".docx");
  });
}

WORD模板

word模板放在public文件下

data 为对象

data: {

name: name,

sex: sex,

shuzu: [ {age : 18}, {age : 20}]

}