vue 導出word

本文轉載自查看原文 2020-12-09 10:26 850 vue

https://www.cnblogs.com/wuqilang/p/14085382.html

https://blog.csdn.net/weixin_43880497/article/details/106275823

yarn add docxtemplater@3.19.7 docxtemplater-image-module-free@1.1.1 file-saver@2.0.5 jszip@2.6.1 jszip-utils@^0.1.0 pizzip@3.0.6

import JSZipUtils from "jszip-utils"
import docxtemplater from "docxtemplater"
import {
  saveAs
} from 'file-saver'
import PizZip from 'pizzip'
const ImageModule = require('docxtemplater-image-module-free');

const {
  downWordPath
} = require('@/config')

 download() {
      let _this = this
      // 讀取並獲得模板文件的二進制內容
      JSZipUtils.getBinaryContent(downWordPath, function (error, content) {
        if (error) throw error // 拋出異常
        var opts = {}
        opts.centered = false;
        opts.getImage = function (tagValue, tagName) {
          return new Promise(function (resolve, reject) {
            JSZipUtils.getBinaryContent(tagValue, function (error, content) {
              if (error) {
                return reject(error)
              }
              return resolve(content)
            })
          })
        } 
        opts.getSize = function (img, tagValue, tagName) {
          // FOR FIXED SIZE IMAGE :
          return [50, 50];
        }
        var imageModule = new ImageModule(opts);

        let zip = new PizZip(content) // 創建一個JSZip實例，內容為模板的內容
        // let doc=new docxtemplater().loadZip(zip).compile() //沒有圖片的
        let doc = new docxtemplater().loadZip(zip).attachModule(imageModule)
          .compile(); // 創建並加載docxtemplater實例對象 帶有圖片的


        doc.resolveData(_this.downloadData).then(function (res) {
          console.log('ready', res)
          doc.render()
          var out = doc.getZip().generate({
            type: 'blob',
            mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
          })
          //輸出文檔
          saveAs(out, _this.wordName)
        })

      })


    },