vue中导出图表数据成为word文档（含echats）

安装依赖

	// 下载
	npm install docxtemplater pizzip  --save
	npm install jszip-utils --save 
	npm install jszip --save
	npm install file-saver --save
	//在需要导出Word的vue文件导入
	import JSZipUtils from 'jszip-utils'；
    import docxtemplater from 'docxtemplater'；
    import { saveAs } from 'file-saver'；
    import PizZip from 'pizzip'；

设置模板

注意：vue cli2 放在static目录下，vue cli3 放在public

获取echats的base64

  const myChart = echarts.init(element)
      const img = new Image()
      // 获取图表base64
      img.src = myChart.getDataURL({
        type: 'png',
        pixelRatio: 2,
        backgroundColor: '#fff'
      })

注意要图片格式一定要是png的，如果获取不到对应的base64，一个是把echats的动画关掉，一个是定时器延时获取。

导出word文档

    // 这里是官网写的应该是处理图片的代码，照着写就行，没动过
    base64DataURLToArrayBuffer (dataURL) {
      console.log(dataURL, 'dataURL')
      const base64Regex = /^data:image\/(png|jpg|svg|svg\+xml);base64,/
      if (!base64Regex.test(dataURL)) {
        return false
      }
      const stringBase64 = dataURL.replace(base64Regex, '')
      let binaryString
      if (typeof window !== 'undefined') {
        binaryString = window.atob(stringBase64)
      } else {
        binaryString = new Buffer(stringBase64, 'base64').toString('binary')
      }
      const len = binaryString.length
      const bytes = new Uint8Array(len)
      for (let i = 0; i < len; i++) {
        const ascii = binaryString.charCodeAt(i)
        bytes[i] = ascii
      }
      return bytes.buffer
    },
       // 导出word
    exportWord () {
      // 这里要引入处理图片的插件，下载docxtemplater后，引入的就在其中了
      const ImageModule = require('docxtemplater-image-module-free')
      const that = this
      // 这里是我的Word路径，在static文件下
      JSZipUtils.getBinaryContent('../../../static/input.docx', function (error, content) {
        if (error) {
          throw error
        }
        const opts = {}
        opts.centered = true
        opts.fileType = 'docx'
        opts.getImage = (tag) => {
          return that.base64DataURLToArrayBuffer(tag)
        }
        opts.getSize = () => {
          return [600, 400]// 这里可更改输出的图片宽和高
        }
        const zip = new PizZip(content)
        const doc = new docxtemplater()
        doc.attachModule(new ImageModule(opts))
        doc.loadZip(zip)
        //这个地方的数据就是word的变量名是用一个，是需要解析的。
        doc.setData({
          txt: that.txt,
          imgBase64: that.imgBase64,
          imgBase64_two: that.imgBase64_two,
          imgBase64_type: that.imgBase64_type,
          imgBase64_level: that.imgBase64_level
          // 一切要导出的数据名称
        })
        try {
          doc.render()
        } catch (error) {
          const e = {
            message: error.message,
            name: error.name,
            stack: error.stack,
            properties: error.properties,
          }
          console.log(JSON.stringify({
            error: e
          }))
          throw error
        }
        const out = doc.getZip().generate({
          type: 'blob',
          mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
        })
        saveAs(out, `数据分析.docx`)
      })
    },
  }

小坑

mock不要和导出文件一起用，需要关掉。图片加载不出来，看看是不是没有加载出来；先用浏览器打开base64的图片。

点击对面的copy进行复制，不要自己手动去复制。

参考项目：https://github.com/weitangshi/study.git
参考博客：https://blog.csdn.net/target_for/article/details/108122644
https://www.jianshu.com/p/b3622d6f8d98

标签：vue,echats,doc,base64,new,imgBase64,error,word,const
来源： https://blog.csdn.net/qq_41163341/article/details/112242628