Vue导出word+echarts，pdf

文件导出word导出// 这是word导出需要的插件import JSZipUtils from jszip-utilsimport { saveAs } from file-saverimport PizZip from pizzipimport Docxtemplater from docxtemplater// 这是在模板...

文件导出

word导出

// 这是word导出需要的插件
import JSZipUtils from 'jszip-utils'
import { saveAs } from 'file-saver'
import PizZip from 'pizzip'
import Docxtemplater from 'docxtemplater'
// 这是在模板中书写简单的JS代码的插件
import expressions from 'angular-expressions'
import merge from 'lodash/merge'



// 这里是官网写的应该是处理图片的代码，照着写就行，没动过
// dataURL 是转化成base64之后的字符串
    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++) {
        bytes[i] = binaryString.charCodeAt(i)
      }
      return bytes.buffer
    },
    // 导出word函数
    exportWordFile() {
      this.getWordData() // wordData 函数，处理word模板需要的数据结构
      const that = this
      // 引入下载的模板
      // const docxUrl = process.env.BASE_URL
      // 这里要引入处理图片的插件，下载docxtemplater后，引入的就在其中了
      // 将 test.docx 模板文件放在 public 文件夹下，用node全局变量引入，打包后也可生效
      const ImageModule = require('docxtemplater-image-module-free')
      JSZipUtils.getBinaryContent(`${process.env.BASE_URL}test.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, 200]// 这里可更改输出的图片宽和高
        }
        // 下面这个函数就是处理在模板中简单的JS代码的，如果不需要，可以选择删除，在import 中最后的两行插件可以不用引入
        const angularParser = function(tag) {
          if (tag === '.') {
            return {
              get: function(s) { return s }
            }
          }
          const expr = expressions.compile(
            tag.replace(/(’|‘)/g, "'").replace(/(“|”)/g, '"')
          )
          return {
            get: function(scope, context) {
              let obj = {}
              const scopeList = context.scopeList
              const num = context.num
              for (let i = 0, len = num + 1; i < len; i++) {
                obj = merge(obj, scopeList[i])
              }
              return expr(scope, obj)
            }
          }
        }
        const zip = new PizZip(content)
        const doc = new Docxtemplater()
        doc.attachModule(new ImageModule(opts))
        doc.setOptions({ parser: angularParser })
        doc.loadZip(zip)
        doc.setData({
          ...that.wordData // 我的最外层包裹一切要导出的数据名称
        })
        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'
        })
        const downLoadFileName = that.monitorObj + '_' + that.downloadTime
        saveAs(out, downLoadFileName) // 导出为word
      })
    }

word 模板介绍

// 一般数据格式
data: [
  {
    text: '111'
  },
  {
    text: '222'
  }
]

// word 模板中使用

//{#data}
	//{text}
//{/data}

// 上述方法可以简单的循环data数组中的item

// 有一种情况就是根据勾选的选项，动态下载word
// 就需要用简单的JS代码在word 模板中控制,data 必须是数组

// {#data.length > 0}
// {text}
// {