Vue3_导出word文档

Rainbow_bead

已于 2023-10-07 16:39:12 修改

阅读量784

点赞数 1

文章标签： word javascript

于 2023-10-07 16:36:07 首次发布

本文链接：https://blog.csdn.net/Rainbow_bead/article/details/133639863

版权

本文介绍了如何使用Node.js的docxtemplater、Pizzip和file-saver等库在前端实现将数据填充到Word模板中，包括文本、数组和表格的处理，以及图片的插入，最后展示了导出报告的代码示例。

摘要由CSDN通过智能技术生成

【应用场景：由前端导出word文件的需求】

一、安装依赖

1、npm i docxtemplater

2、npm i docxtemplater-image-module-free

3、npm i pizzip

4、npm i file-saver（如果使用的是ts还需安装类型声明文件：npm i @types/file-saver）

二、引用

import docxtemplater from 'docxtemplater'

import PizZip from 'pizzip'

import PizZipUtils from 'pizzip/utils'

import { saveAs } from 'file-saver'

import ImageModule from 'docxtemplater-image-module-free'

三、制作word模板

1、文本类型（举个栗子）

A、简单文本类型

// 数据结构
let data = { nowDate: "2023-10-07", year: 2023 }

// word模板效果

报告年度：{year} 年

编制日期：{nowDate}

// 呈现效果

报告年度：2023 年

编制日期：2023-10-07

B、数组循环

// 数据结构
let data = { gas: [{gasEmissionTypeName: "E电力", totalValue: 18.26}] }

// word模板效果

温室气体排放 {#gas}{gasEmissionTypeName}：{totalValue}{/gas}

// 呈现效果

温室气体排放 E电力：18.26

C、表格数组

// 数据结构
let data = { source: [{

accountingBoundary: "净购入电力消费排放"

carbonEmissionValue: 0.77

dataSources: "2"

dataSourcesName: "表计量"

endTime: "2023-12-31 00:00:00"

gasEmissionTypeName: "E电力"

id: 3

netConsumption: "1.344"

startTime: "2023-01-01 00:00:00"

......

}] }

// word模板效果

// 呈现效果

2、图片类型（举个栗子）

// 数据结构
let data = { imgs: [{ url: "xxx/xxx.jpg" },{ url: "xxx/xxx.jpg" }] }

// word模板效果

{#imgs}{%url}{/imgs}

3、注意（word文档制作完成后，将模板文件放到public文件夹下）

四、实现代码

// 导出报告1（按钮）
const reportOne = async () => {
  formData.value.type = 1
  // 导出接口
  const res = await getCarbonReportData({
    startTime: enableDate.value ? enableDate.value[0] : '',
    endTime: enableDate.value ? enableDate.value[1] : '',
    siteId: formData.value.siteId,
    type: formData.value.type
  })
  if (res.code == result_code) {
    carbonReportData.value = res.data
  }
  const loadFile = function loadFile(url: any, callback: any) {
    PizZipUtils.getBinaryContent(url, callback)
  }
  // uploadUrlData.value + 'file/mapper/uploadfile/2023100510410530454.docx'
  loadFile(
    '@/../public/模板01.docx',
    function (error: any, content: any) {
      if (error) {
        throw error
      }
      // 有picture的话，需加上下面这段代码
      let opts: any = {}
      opts.centered = false
      opts.fileType = 'docx'
      opts.getImage = function (tagValue: any) {
        return new Promise(function (resolve, reject) {
          PizZipUtils.getBinaryContent(tagValue, function (error: any, content: any) {
            if (error) {
              return reject(error)
            }
            return resolve(content)
          })
        })
      }
      opts.getSize = function () {
        return [255, 200] //这里是生成的word文件里picture的宽和高
      }
      let imageModule = new ImageModule(opts)
      var zip = new PizZip(content)
      let doc = new docxtemplater().loadZip(zip).attachModule(imageModule).compile()
      // 有picture的话,需加载处理模块
      doc.resolveData(carbonReportData.value).then(function () {
        doc.render()
        var out = doc.getZip().generate({
          type: 'blob',
          mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
        })
        saveAs(out, '导出报告' + '.docx')
      })
    }
  )
}