后台項目導出word功能（vue+echarts+elemnt）純前端

vue+echarts純前端導出word

圖表：echarts

UI:element

安裝

npm install docxtemplater pizzip  --save
npm install jszip-utils --save 
npm install jszip --save
npm install file-saver --save
npm install --save docxtemplater-image-module-free 
npm install pizzip --save

引入

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

HTML

<el-button @click="exportWord" type="primary">導出word</el-button>

JS

導出圖片的設置

getBaseImage(index, chart) {
      let img = new Image()
      img.src = chart.getDataURL({
        pixelRatio: 2, //分辨率
        backgroundColor: '#fff', //背景色
      })
      // 向父組件傳圖片base64格式
      this.setImageBase(index, img.src)
    },

導出圖base64存入本地

setImageBase(index, url) {
      this.imageListBase[index].url = url
    },

導出圖的格式通過插件渲染

base64DataURLToArrayBuffer(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() {
      let ImageModule = require('docxtemplater-image-module-free')
      let _this = this
      // 讀取並獲得模板文件的二進制內容
      // 模板文件在public文件夾下
      JSZipUtils.getBinaryContent('word.docx', function (error, content) {
        if (error) {
          throw error
        }
        let opts = {}
        opts.centered = true
        opts.fileType = 'docx'
        opts.getImage = function (chartId) {
          return _this.base64DataURLToArrayBuffer(chartId)
        }
        opts.getSize = function () {
          return [800, 450]
        }
        let imageModule = new ImageModule(opts)
        let zip = new PizZip(content)
        let doc = new docxtemplater()
        doc.attachModule(imageModule)
        doc.loadZip(zip)
        doc.setData({
          //導出的數據
          ..._this.form,
          table: _this.tableData,
          table1: _this.tableData1,
          imagelist: _this.imageListBase,
        })

        try {
          doc.render()
        } catch (error) {
          let e = {
            message: error.message,
            name: error.name,
            stack: error.stack,
            properties: error.properties,
          }
          throw error
        }
        let out = doc.getZip().generate({
          type: 'blob',
          mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
        })
        saveAs(out, 'echartsWord.docx')
      })
    },

data數據

form: {
        name: '***',
        name1: '***',
      },
      tableData: [],
      tableData1: [],
      imageListBase: [{ title: '***' }, { title: '***' }, { title: '***' }],

word模板

模板存放於public文件目錄下