vue导出word

vue2在static文件夹下,vue3在public文件夹下新建模板

{name}({timeLength}分钟)
单位:{unitName}部门:{departmentName}
开始时间:{startDatetime}结束时间:{endDatetime}
{a},{b},{#c}{c}{/c},{#d}{d}{/d},{e},{f},{g},{h}
{#question}
{index}【{type}】{content}
{#questionOptions}
{questionId}{content}
{/questionOptions}
{answerRight}
{/question}
{}//变量值
{#}//循环
{/}//循环结束
ps:{}中不要有空格

安装插件

npm i docxtemplater pizzip jszip-utils file-saver -S

引入

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

保存函数exportWord()

export default {
  name: 'About',
  data() {
    return {
      baseInfo: {
        name: '测试试卷',
        timeLength: '120',
        unitName: '测试单位',
        departmentName: '测试部门',
        startDatetime: '2020-02-11 09:00',
        endDatetime: '2020-02-11 11:00',
      },
      types: {
        a: 1,
        b: 1,
        e: 2,
        f: 1,
        h: 6,
      },
      question: [
        {
          index: 1,
          type: '选择题',
          content: '内容',
          answerRight: 'A',
          questionOptions: [
            {
              questionId: 'A',
              content: 'A内容',
            },
            {
              questionId: 'B',
              content: 'B内容',
            },
          ],
        },
        {
          index: 2,
          type: '填空题',
          content: '内容',
          answerRight: '答案',
        },
        {
          index: 2,
          type: '填空题',
          content: '内容',
          answerRight: '答案',
        },
      ],
    }
  },
  methods: {

    exportWord() {
      const _this = this
      JSZipUtils.getBinaryContent('test.docx', function (error, content) {
        // 抛出异常
        if (error) {
          throw error
        }
        // 创建一个JSZip实例,内容为模板的内容
        let zip = new JSZip(content)
        // 创建并加载docxtemplater实例对象
        let doc = new Docxtemplater().loadZip(zip)
        // 设置模板变量的值
        doc.setData({
          ..._this.baseInfo,
          ..._this.types,
          question: _this.question,
        })
        try {
          // 用模板变量的值替换所有模板变量
          doc.render()
        } catch (error) {
          // 抛出异常
          // let e = {
          //   message: error.message,
          //   name: error.name,
          //   stack: error.stack,
          //   properties: error.properties,
          // }
          this.$message.error('导出报表失败')
          throw error
        }

        // 生成一个代表docxtemplater对象的zip文件(不是一个真实的文件,而是在内存中的表示)
        let out = doc.getZip().generate({
          type: 'blob',
          mimeType:
            'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
        })
        // 将目标文件对象保存为目标类型的文件,并命名
        saveAs(out, '试卷.docx')
      })
    },
  },
}

这里的JSZipUtils.getBinaryContent直接读取的是public或者static文件夹下面的test.docx文件,所以不用/或者@

数据setData()之后render()

最后修改:2021 年 08 月 20 日
如果觉得我的文章对你有用,请随意赞赏