vue导出el-table为word格式

提示:如果是导出excel则注意导出的是table,自定义的标题等需换成table自定义表格头,此处导出的是word,需在本地static文件下提前准备好word文件,里面使用{变量}绑定标题等字段,表格内第一列使用{#table}{字段},最后一列{字段}{/table}---注意此处的table和传入的参数名保持一致


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

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

      // 生成一个代表docxtemplater对象的zip文件(不是一个真实的文件,而是在内存中的表示)
      let out = doc.getZip().generate({
        type: 'blob',
        mimeType:
          'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
      })
      // 将目标文件对象保存为目标类型的文件,并命名
      saveAs(out,form.tableTitle+'.docx')
    })
}
    form: {
        deptCodeName: "",
        tableTitle: "ICU医院感染监测日志与月报表",
        recordDate: '',
      },
     tableData: [],//存放表格的数组
import { cellStyle, headerCellStyle1, exportExcel, wordExport } from "@/utils/myfunction.js";

 wordExport(this.form,this.tableData)

在这里插入图片描述
在这里插入图片描述

GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891 Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐