vue word模板下载 docxtemplater

一、安装插件

npm i docxtemplater

npm i pizzip

npm i jszip-utils

npm i file-saver

二、封装exportWord.js

import docxtemplater from "docxtemplater";
import PizZip from "pizzip";
import JSZipUtils from "jszip-utils";
import { saveAs } from "file-saver";
// const TableModule = require("docxtemplater-table-module");
export function exportWord (form, table, docx, name) {
  if (!form && !table) return;
  //这里要引入处理图片的插件，下载docxtemplater后，引入的就在其中了
  // var ImageModule = require('docxtemplater-image-module-free')
  var self = this
  //这里是我的Word路径
  JSZipUtils.getBinaryContent(docx, function (error, content) {
    if (error) {
      throw error
    }
    let opts = {}
    opts.centered = true
    opts.fileType = 'docx'
    opts.getImage = (tag) => {
      return self.base64DataURLToArrayBuffer(tag)
    }
    opts.getSize = () => {
      return [550, 200] //输出的图片宽和高
    }
    let zip = new PizZip(content)
    let doc = new docxtemplater().loadZip(zip)
    doc.setData({//我的最外层包裹一切要导出的数据名称
      ...form,
      table,
    })
    try {
      doc.render()
    } catch (error) {
      var e = {
        message: error.message,
        name: error.name,
        stack: error.stack,
        properties: error.properties,
      }
      throw error
    }
    var out = doc.getZip().generate({
      type: 'blob',
      mimeType:
        'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
    })
    saveAs(out, name+".docx")
  })
}

三、引用

import { exportWord } from "@/utils/exportWord.js";

//导出word
function exportDoc(tableData) {
  let name = "天气预报";
  let docx = "/docx/export.docx";
  let from = {
     title: name,
  };
  exportWord(from, tableData, docx, name);
}

四、docx模板

五、效果展示