前端实现导出word(docxtemplater、pizzip、jszip-utils、file-saver )

简介: docxtemplater、pizzip、jszip-utils、file-saver 前端实现导出word

一、准备工作

1、插件安装:

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

2、安装完成:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Iu1VJ6mQ-1653906589782)(C:\Users\huawei\AppData\Roaming\Typora\typora-user-images\image-20220530160346164.png)]

3、导出的模板文件。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OTjBDoVS-1653906589784)(C:\Users\huawei\AppData\Roaming\Typora\typora-user-images\image-20220530161012157.png)]

我这里是将其命名word-export.docx,并将其放在public/docxs目录下,如图所示:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-trHu6cWE-1653906589785)(C:\Users\huawei\AppData\Roaming\Typora\typora-user-images\image-20220530173756156.png)]

二、实现代码

页面使用:

<template>
  <div>
    <el-button type="primary" size="mini" @click="exportWord">导出word</el-button>
    <div style="margin: 20px 10px; width: 500px">
        使用 JSON 数据格式作为输入,可以处理docx 和 ppt模板。不像一些其它的工具,比如 docx.js, docx4j, python-docx 等,需要自己编写代码来生成文件,docxtemplater只需要用户通过标签的形式编写模板,就可以生成文件。
    </div>
  </div>
</template>
<script>
import docxtemplater from 'docxtemplater'
import PizZip from 'pizzip'
import JSZipUtils from 'jszip-utils'
import { saveAs } from 'file-saver'

export default {
  data() {
    return {}
  },
  mounted() {},
  methods: {
    // 导出word
    exportWord() {
      const docTitle = "测试报表"
      // 读取并获得模板文件的二进制内容
      JSZipUtils.getBinaryContent('./docxs/word-export.docx', function(
        error,
        content
      ) {
        // model.docx是模板。我们在导出的时候,会根据此模板来导出对应的数据
        // 抛出异常
        if (error) {
          throw error
        }

        // 创建一个PizZip实例,内容为模板的内容
        const zip = new PizZip(content)
        // 创建并加载docxtemplater实例对象
        // eslint-disable-next-line new-cap
        const doc = new docxtemplater().loadZip(zip)
        // 设置模板变量的值
        doc.setData({
          year: '2022',
          month: '05',
          JSON: 'json',
          ex: 'docx.js, docx4j, python-docx'
        })

        try {
          // 用模板变量的值替换所有模板变量
          doc.render()
        } catch (error) {
          // 抛出异常
          const e = {
            message: error.message,
            name: error.name,
            stack: error.stack,
            properties: error.properties
          }
          console.log(JSON.stringify({ error: e }))
          throw error
        }

        // 生成一个代表docxtemplater对象的zip文件(不是一个真实的文件,而是在内存中的表示)
        const out = doc.getZip().generate({
          type: 'blob',
          mimeType:
            'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
        })
        // 将目标文件对象保存为目标类型的文件,并命名,这里可以使用.doc,也可以使用.docx,但.doc兼容性也好一些,所以就采用了.doc
        saveAs(out, `${docTitle}.doc`)
      })
    }
  }
}
</script>

方法封装:

将该功能封装为一个mixin,取名export-word.js

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

export default {
  methods: {
    // 点击导出word
    exportWord(
      data,
      docTitle = '内部质量保证体系行政管理人员自我诊断与改进登记表'
    ) {
      // let that = this;
      // 读取并获得模板文件的二进制内容
      JSZipUtils.getBinaryContent('/docxs/world-export.docx', function(
        error,
        content
      ) {
        // model.docx是模板。我们在导出的时候,会根据此模板来导出对应的数据
        // 抛出异常
        if (error) {
          throw error
        }

        // 创建一个PizZip实例,内容为模板的内容
        const zip = new PizZip(content)
        // 创建并加载docxtemplater实例对象
        // eslint-disable-next-line new-cap
        const doc = new docxtemplater().loadZip(zip)
        // 设置模板变量的值
        doc.setData({
          ...data
        })

        try {
          // 用模板变量的值替换所有模板变量
          doc.render()
        } catch (error) {
          // 抛出异常
          const e = {
            message: error.message,
            name: error.name,
            stack: error.stack,
            properties: error.properties
          }
          console.log(JSON.stringify({ error: e }))
          throw error
        }

        // 生成一个代表docxtemplater对象的zip文件(不是一个真实的文件,而是在内存中的表示)
        const out = doc.getZip().generate({
          type: 'blob',
          mimeType:
            'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
        })
        // 将目标文件对象保存为目标类型的文件,并命名,这里可以使用.doc,也可以使用.docx,但.doc兼容性也好一些,所以就采用了.doc
        saveAs(out, `${docTitle}.doc`)
      })
    }
  }
}

页面使用:

import exportWordMixin from '@/mixins/export-word'

export default {
  mixins: [exportWordMixin],
  data() {
    return {}
  },
  mounted() {},
  methods: {
    const data = {
      year: '2022',
      month: '05',
      JSON: 'json',
      ex: 'docx.js, docx4j, python-docx'
    }
    this.exportWord(data);
  }
}

导出效果:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-16yCpEE1-1653906589786)(C:\Users\huawei\AppData\Roaming\Typora\typora-user-images\image-20220530173324048.png)]

目录
相关文章
|
前端开发
前端如何支持PDF、Excel、Word在线预览 #42
前端如何支持PDF、Excel、Word在线预览 #42
638 0
|
1月前
|
前端开发 API
前端界面生成PDF并导出下载
【10月更文挑战第21天】利用合适的第三方库,你可以在前端轻松实现界面生成 PDF 并导出下载的功能,为用户提供更方便的文档分享和保存方式。你还可以根据具体的需求进一步优化和定制生成的 PDF 文件,以满足不同的业务场景要求。
|
2月前
|
前端开发 JavaScript
💥【exceljs】纯前端如何实现Excel导出下载和上传解析?
本文介绍了用于处理Excel文件的库——ExcelJS,相较于SheetJS,ExcelJS支持更高级的样式自定义且易于使用。表格对比显示,ExcelJS在样式设置、内存效率及流式操作方面更具优势。主要适用于Node.js环境,也支持浏览器端使用。文中详细展示了如何利用ExcelJS实现前端的Excel导出下载和上传解析功能,并提供了示例代码。此外,还提供了在线调试的仓库链接和运行命令,方便读者实践。
427 5
|
2月前
|
前端开发 JavaScript 编译器
不走弯路,纯前端如何把图片导出成视频!
【10月更文挑战第3天】不走弯路,纯前端如何把图片导出成视频!
70 3
|
7月前
|
JSON 前端开发 JavaScript
前端使用lottie-web,使用AE导出的JSON动画贴心教程
前端使用lottie-web,使用AE导出的JSON动画贴心教程
676 2
|
6月前
|
前端开发 JavaScript 数据处理
前端新手指南:如何解决JavaScript导出CSV文件不完整的问题
【6月更文挑战第4天】在JavaScript中处理CSV文件时,需要特别注意一些特殊字符,例如逗号、双引号、换行符等。这些字符可能会影响CSV文件的解析,导致数据错乱。
236 0
|
3月前
|
运维 前端开发
前端使用antdesign导出插件跨域问题
前端使用antdesign导出插件跨域问题
46 1
|
2月前
|
前端开发 JavaScript Java
导出excel的两个方式:前端vue+XLSX 导出excel,vue+后端POI 导出excel,并进行分析、比较
这篇文章介绍了使用前端Vue框架结合XLSX库和后端结合Apache POI库导出Excel文件的两种方法,并对比分析了它们的优缺点。
773 0
|
3月前
|
前端开发
前端使用xlsx模板导出表格
【9月更文挑战第10天】在前端使用 `xlsx` 模板导出表格需完成以下步骤:首先引入 `xlsx` 库,准备数据与模板;接着读取模板文件,选择特定工作表并填充数据;最后将填充后的表格转换为二进制数据,创建 Blob 对象并触发下载。整个过程中可根据需求调整模板格式和数据填充方式。
117 5
|
5月前
|
前端开发
纯前端导出表格数据 -- csv格式 (含表格末尾的自动合计行)
纯前端导出表格数据 -- csv格式 (含表格末尾的自动合计行)
38 0