step one

package.json

安裝文件包

? ?

"docxtemplater": "^3.33.0",? //文檔模板器

"docxtemplater-image-module-free": "^1.1.1",? //免費圖片下載模塊

"file-saver": "^2.0.5",? //內(nèi)存流導(dǎo)出文件流

"jszip": "^3.10.1", //文件、圖片打包壓縮

"jszip-utils": "^0.1.0",//網(wǎng)頁壓縮軟件

"pizzip": "^3.1.4", //?文件轉(zhuǎn)為zip文件

step two?

?1.導(dǎo)入插件包

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

? 2.初始化echarts圖表時? 將echarts圖片轉(zhuǎn)為base64格式（為后續(xù)導(dǎo)出準(zhǔn)備）

    initChart(id) {
      let mychart = echarts.init(document.getElementById(id))
      mychart.setOption(statisticsOption)
      // ECHARTS圖表的圖片并轉(zhuǎn)為base64格式
      this.img1 = mychart.getDataURL({
        pixelRatio: 2, // 導(dǎo)出的圖片分辨率比例，默認(rèn)為 1。
        backgroundColor: '#fff' // 導(dǎo)出的圖片背景色，默認(rèn)使用 option 里的 backgroundColor
      })
    },

? 3.導(dǎo)出echarts圖片，格式轉(zhuǎn)換，官方自帶，不需要修改

     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
    },

?4.導(dǎo)出word 具體實現(xiàn)方法（包含發(fā)郵件，上傳到服務(wù)器）

    //點擊按鈕導(dǎo)出word （形參作為word發(fā)送到郵箱標(biāo)識 無需考慮）
    exportWord(fileExport) {
      //這里要引入處理圖片的插件，下載docxtemplater后，引入的就在其中了
      //編寫docx模板 本文后續(xù)有文檔模板語法教學(xué)
      var ImageModule = require('docxtemplater-image-module-free')
      var fs = require('fs')
      let _this = this

      // 讀取并獲得模板文件的二進(jìn)制內(nèi)容，放在項目根目錄public中即可
      JSZipUtils.getBinaryContent(
        'dataStatistics.docx',
        function (error, content) {
          if (error) {
            throw error
          }

          // 圖片處理
          let opts = {}
          opts = { centered: false }
          opts.getImage = chartId => {
            return _this.base64DataURLToArrayBuffer(chartId)
          }
          opts.getSize = function (img, tagValue, tagName) {
            //自定義指定圖像大小，此處可動態(tài)調(diào)試各別圖片的大小
            return [50, 100]  //例子：寬50px  高度100px
          }

          // 創(chuàng)建一個PizZip實例，內(nèi)容為模板的內(nèi)容
          let zip = new PizZip(content)
          // 創(chuàng)建并加載docxtemplater實例對象
          let doc = new docxtemplater()
          doc.attachModule(new ImageModule(opts))
          doc.loadZip(zip)

          // 設(shè)置模板變量的值
          doc.setData({
            ..._this.articleParams,  //詳情內(nèi)容字段（Object）
            table: _this.detailParams,  //表格內(nèi)容（Array）
            img1: _this.img1,   // echarts圖片
          })

          try {
            // 用模板變量的值替換所有模板變量
            doc.render()
          } catch (error) {
            // 拋出異常
            let e = {
              message: error.message,
              name: error.name,
              stack: error.stack,
              properties: error.properties
            }
            console.log(JSON.stringify({ error: e }))
            throw error
          }

          // 生成一個代表docxtemplater對象的zip文件（不是一個真實的文件，而是在內(nèi)存中的表示）
          let out = doc.getZip().generate({
            type: 'blob',
            mimeType:
              'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
          })
          //此文件流 可以傳送到后端服務(wù)器生成二進(jìn)制文件（包含上傳到阿里云服務(wù)器）
          if (fileExport == 'export') {
            let formData = new FormData() //創(chuàng)建formdata來存文件
            const chunkfile = new File([out], '數(shù)據(jù)統(tǒng)計.docx')
            formData.append('file', chunkfile) //存入文件
            formData.append('toEmailList', _this.mailForm.toEmailList)
            formData.append('customSubject', _this.mailForm.customSubject)
            //formData文件  需注意此api請求方式 下文會描述
            dataDetailsEmailApi(formData).then(res => {
              if (res.data.code == 200) {
                _this.$message.success('發(fā)送成功')
              }
            })
          } else {
             // 將目標(biāo)文件對象保存為目標(biāo)類型的文件，并命名
            saveAs(out, '數(shù)據(jù)統(tǒng)計.docx')
          }
        }
      )
    },

5.word文檔模板

?step three

效果圖：

?

?

Tips

? 1.如果有將文件流上傳到服務(wù)器需求? axios請求封裝 （請求頭）

  upLoadFileStream(url, params) {
    return new Promise((resolve, reject) => {
      axios.request({
        url: url,
        method: "post",
        data: params,
        headers: {
          'Content-type': "multipart/form-data",
          clientId: "PC",
        }
      }).then(response => {
        resolve(response)
      })
    })
  }

?2.加入想要以變量的形式上傳圖片也需要將圖片轉(zhuǎn)為base64格式去上傳

????(下方為前端實現(xiàn)圖片轉(zhuǎn)為base64方法)文章來源地址http://www.zghlxwxcb.cn/news/detail-639112.html

    creatBase64Sync(imgUrl) {
      return new Promise(function (resolve, reject) {
        // 一定要設(shè)置為let，不然圖片不顯示
        let image = new Image()
        //圖片地址
        image.src = imgUrl
        // 解決跨域問題
        image.setAttribute('crossOrigin', 'Anonymous')
        // image.setAttribute('crossOrigin', '*') // 支持跨域圖片
        // image.onload為異步加載
        image.onload = function () {
          let canvas = document.createElement('canvas')
          canvas.width = image.width
          canvas.height = image.height
          let context = canvas.getContext('2d')
          context.drawImage(image, 0, 0, image.width, image.height)
          //圖片后綴名
          let ext = image.src
            .substring(image.src.lastIndexOf('.') + 1)
            .toLowerCase()
          //圖片質(zhì)量
          let quality = 0.8
          //轉(zhuǎn)成base64
          let dataurl = canvas.toDataURL('image/' + ext, quality)
          //返回
          // console.log(dataurl)
          resolve(dataurl)
        }
      })
    },

到了這里，關(guān)于vue導(dǎo)出word文檔（含ECharts，多圖片，表格等）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！