前端导出word实现方法

最新推荐文章于 2025-02-17 10:05:34 发布

cofecode

最新推荐文章于 2025-02-17 10:05:34 发布

阅读量1.8k

点赞数 1

分类专栏： Vue.js

本文链接：https://blog.youkuaiyun.com/cofecode/article/details/117077296

版权

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

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

如何实现？

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