vue 将数据和Echarts图片保存到word文档

js yekong 1071℃

使用到的js

http://demo.wanjunshijie.com/js/jszip.js
http://demo.wanjunshijie.com/js/mydoc.js

安装依赖

npm i file-saver --save

使用

import fileSaver from 'file-saver'
import { MyDoc } from '../../utils/mydoc'

导出word

 getdoc () {
      var that = this
      let doc = new MyDoc()
      // 添加头部
      doc.addHeader('标题1', '2', '')
      // let data1 = this.$refs.tables.gettabledata()
      // doc.addTable(data1, '')
      let img = this.$refs.echarts1.drawLine(1)
      console.log(img)
      doc.addHeader('标题2', '2', '')
      doc.addImage(img, 500, 150)
      doc.addHeader('标题3', '2', '')
      let img2 = this.$refs.echarts2.drawLine(1)
      doc.addImage(img2, 500, 150)
      let data = doc.generate()
      let blob = new Blob([that.s2ab(atob(data))], {
        type: 'data:application/vnd.openxmlformats-officedocument.wordprocessingml.document;base64,'
      })
      try {
        fileSaver.saveAs(blob, '文档.docx')
      } catch (e) {
        console.log(e)
      }
      doc.generate()
    }
s2ab (s) {
      let buf = new ArrayBuffer(s.length)
      let view = new Uint8Array(buf)
      for (let i = 0; i !== s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF
      return buf
    },
喜欢 (2)