Vue 导出word 功能

引入插件

npm install file-saver
npm install docxtemplater
npm install pizzip
npm install jszip-utils
npm install angular-expressions
npm install lodash 

配置导出word文件js

将下面的代码保存为 exportBriefDataDocx.js，放在自己项目的工具类中，方便调用。

import Docxtemplater from 'docxtemplater'
import PizZip from 'pizzip'
import JSZipUtils from 'jszip-utils'
import { saveAs } from 'file-saver'
 
export const ExportBriefDataDocx = (tempDocxPath, data, fileName) => {
  console.log(tempDocxPath, data, fileName, 111)
  var expressions = require('angular-expressions')
  var assign = require('lodash/assign')
  expressions.filters.lower = function(input) {
    // This condition should be used to make sure that if your input is
    // undefined, your output will be undefined as well and will not
    // throw an error
    if (!input) return input
    // toLowerCase() 方法用于把字符串转换为小写。
    return input.toLowerCase()
  }
  function angularParser(tag) {
    tag = tag
      .replace(/^\.$/, 'this')
      .replace(/(’|‘)/g, "'")
      .replace(/(“|”)/g, '"')
    const expr = expressions.compile(tag)
    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 = assign(obj, scopeList[i])
        }
        return expr(scope, obj)
      }
    }
  }
  JSZipUtils.getBinaryContent(tempDocxPath, (error, content) => {
    if (error) {
      console.log(error)
    }
 
    // 创建一个JSZip实例，内容为模板的内容
    // let zip = new JSZip(content); //用PizZip替代
    const zip = new PizZip(content)
    // 创建并加载 Docxtemplater 实例对象
    const doc = new Docxtemplater(zip, { parser: angularParser })
    // 设置模板变量的值
    doc.setData(data)
    try {
      // 呈现文档，会将内部所有变量替换成值，
      doc.render()
    } catch (error) {
      const e = {
        message: error.message,
        name: error.name,
        stack: error.stack,
        properties: error.properties
 
      }
      console.log({ error: e })
      // 当使用json记录时，此处抛出错误信息
      throw error
    }
    // 生成一个代表Docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示）
    const out = doc.getZip().generate({
      type: 'blob',
      mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
    })
    // 将目标文件对象保存为目标类型的文件，并命名
    saveAs(out, fileName)
  })
}

配置导出word 模板

新建后缀名为 .docx 的文件，根据需求绘制word 模板，将文件保存到 (static/public) 文件下

导出事件代码展示

// 引入工具类中写的导出Word 配置文件 js
import { ExportBriefDataDocx } from '../***/exportBriefDataDocx'

....

// 导出按钮触发事件
exportDocx(){
	this.$message.success("导出事件触发“)
	/*
	* 三个入参
	* 第一个入参对应导出word模板的路径
	* 第二个入参是word模板渲染的数据
	* 第三个入参是导出word模板的名称
	*/
	ExportBriefDataDocx('/exportWord.docx', this.docxData, '文档导出')
}

导出成功展示

参考

郭小白呀：vue导出word
GL曲终人散：vue项目导出word

几个注意点

模板位置

vue 2.0创建的项目 就放在 static 文件夹下，vue3.0创建的放在 public 文件夹下

点击导出报错怎么办

• 检查导出word文件路径引入对不对
• 检查导出word模板后缀名是否正确
• 检查渲染word模板的格式是不是正确（只能是对象）

类似于这样的错误

支持数组么

渲染只能是对象，数组渲染需要嵌套在对象里，如下所示

导出的word有些字段展示的是 undefined 是怎么回事

导出模板上有某一个字段，但是渲染的对象中没有该字段，或者该字段是一个不可展示的类型。解决办法可以预处理一下，没有值的话传 ""。

数组怎么展示

{#Data} 开始 {/Data} 结束，循环主题写每一个对象的key值