js html导出word

1.需要npm 下载下面指定版本的包

"dependencies": {
    "jszip-utils": "^0.1.0",
    "pizzip": "^3.1.4",
    "file-saver": "^2.0.5",
    "docxtemplater": "^3.29.5",
    "docxtemplater-image-module-free": "^1.1.1"
}

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



   // 导出报告
    output()
    {
      
        let wordObj = {
          filename: 'xxxxx报告',
          endtime: 'xxxx',
          starttime: '2023-07-28',
          filteredArr
        }
        console.log(wordObj)
        this.exportWordAndImage(wordObj, 'config/module.docx', 'xxxxx报告')
    },
   /**
     * 可以导出图片的方法 浏览器导出
     * @param wordData  数据{}
     * @param template  模板文件位置
     * @param outputFilename  输出名
     */
    exportWordAndImage(wordData, template, outputFilename)
    {
      let ImageModule = require('docxtemplater-image-module-free')    // 图片模版
      let docxtemplater = require('docxtemplater')
      // 读取并获得模板文件的二进制内容
      JSZipUtils.getBinaryContent('static/' + template, function(error, content)
      {
        // model.docx是模板。我们在导出的时候，会根据此模板来导出对应的数据
        // 抛出异常
        if (error)
          return
        // 图片处理
        let opts = {}
        opts.centered = true  // 图片居中，在word模板中定义方式为{%%image}
        opts.fileType = 'docx'
        opts.getImage = function(tagValue, tagName)
        {
          return new Promise(function(resolve, reject)
          {
            JSZipUtils.getBinaryContent(tagValue, function(error, content)
            {
              if (error)
                return reject(error)
              return resolve(content)
            })
          })
        }
        opts.getSize = function(img, tagValue, tagName)
        {
          // FOR FIXED SIZE IMAGE :
          // return [470, 210] //图片大小 （这个可以写成动态的，开发文档上有）
          return new Promise(function(resolve, reject)
          {
            let image = new Image()
            image.src = tagValue
            image.onload = function()
            {
              resolve([550, 150])
            }
            image.onerror = function(e)
            {
              reject(e)
            }
          })
        }
        let imageModule = new ImageModule(opts)
        // 创建一个PizZip实例，内容为模板的内容
        let zip = new PizZip(content)
        // 创建并加载docxtemplater实例对象
        let doc = new docxtemplater()
          .loadZip(zip)
          .attachModule(imageModule)
          .compile()

        doc.resolveData(wordData).then(function()
        {
          doc.render()
          let out = doc.getZip().generate({
            type: 'blob',
            mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
          })
          /// / 将目标文件对象保存为目标类型的文件，并命名
          saveAs(out, outputFilename + '.docx')
        })
      })
      this.$processing.close()
    }

2.填写模板文件

跟代码的中的下面路径对应

 

word文件内容：（wordObj对象中的字段）

开始时间：{starttime}

结束时间：{endtime}

选择的类型：{checkedlabel}

{#isHasImage}

{%base64Image}

监测数据折线图

{/isHasImage}

{#isNodata}

{base64Image}

{/isNodata}