前端生成指定模板的word文件

最新推荐文章于 2025-12-23 23:43:55 发布

原创

最新推荐文章于 2025-12-23 23:43:55 发布 · 1.3k 阅读

需求：前端生成word文件

实现步骤：

安装依赖

npm install jszip-utils docxtemplater file-saver pizzip --save
npm install angular-expressions --save
npm install docxtemplater-image-module-free --save

docxtemplater：这个插件可以通过预先写好的word，excel等文件模板生成对应带数据的文件。
file-saver：适合在客户端生成文件的工具，它提供的接口saveAs(blob, “1.docx”)将会使用到，方便我们保存文件。
pizzip：这个插件用来创建，读取或编辑.zip的文件，同步的（还有一个插件是jszip，异步的）。
jszip-utils：与jszip/pizzip一起使用，jszip-utils 提供一个getBinaryContent(path, data)接口，path即是文件的路径，支持AJAX get请求，data为读取的文件内容。
docxtemplater-image-module-free：需要导出图片的话需要这个插件
docxtemplater：不支持jszip，会有报错，因此要使用PizZip

编辑Word模板

例如：

后台出参:

{
   
   
   tableData:[{
   
   name:'张三',age:18},{
   
   name:'李四',age:19}],
   school:'实验中学',
   logo:'图片的base64格式'
}

模板内容：

保存模板
代码实现

①生成Word文档的触发按钮

<bt-button type="secondary" @click="handleGetCheckReport">生成报告</bt-button>

②定义公共生成文件方法（固定内容，可直接复制），路径：src/utils/doc.js

/**
 * 导出word文档（带图片）
 */
import Docxtemplater from 'docxtemplater'
import PizZip from 'pizzip'
import JSZipUtils from 'jszip-utils'
import {
   
    saveAs } from 'file-saver'
// import * as ImageModule from 'docxtemplater-image-module-free'

import * as expressions from 'angular-expressions'
/**
 * 将base64格式的数据转为ArrayBuffer
 * @param {Object} dataURL base64格式的数据
 */
function base64DataURLToArrayBuffer(dataURL) {
   
   
    const base64Regex = /^data:image\/(png|jpg|jpeg|svg|svg\+xml);base64,/
    if (!base64Regex.test(dataURL)) {
   
   
        return false
    }
    const stringBase64 = dataURL.replace(base64Regex, '')
    let binaryString
    if (typeof window !== 'undefined') {
   
   
        binaryString = window.atob(stringBase64)
    } else {
   
   
        binaryString = Buffer.from(stringBase64, 'base64').toString('binary')
    }
    const len = binaryString.length
    const bytes = new Uint8Array(len)
    for (let i = 0; i < len; i