前端导出word实现方法

最新推荐文章于 2025-07-10 11:59:59 发布

原创

最新推荐文章于 2025-07-10 11:59:59 发布 · 1.8k 阅读

6 ·

CC 4.0 BY-SA版权

本文介绍在Vue项目中如何实现前端导出Word文档，重点是将内容放入.docx模板，并确保模板文件存放在项目的public目录下。

如何实现？

npm i docxtemplater jszip-utils file-saver jszip@2.6.1

import Docxtemplater from 'docxtemplater'
import JSZipUtils from 'jszip-utils'
import { saveAs } from 'file-saver'
import JSZip from 'jszip'

wordData: any =  {
    title: "5月监控月报",
    data: [
      {
        name: "天气雷达",
        remark: "remark1",
        status: "70%"
      },
      {
        name: "探空雷达",
        remark: "remark2",
        status: "72%"
      }
    ]
}

放入word模板，在vue项目的public文件下面，且必须是.docx，不能是.doc

exportWord  () {
    let _this = this
    // 读取并获得模板文件的二进制内容
    JSZipUtils.getBinaryContent('report/word.docx', function (error:any, content:any) {
      if (error) throw error // 抛出异常
      let zip = new JSZip(content) // 创建一个JSZip实例，内容为模板的内容
      let doc = new Docxtemplater().loadZip(zip) // 创建并加载docxtemp