vue 导出word文档，支持表格和图片

最新推荐文章于 2025-03-12 15:37:32 发布

322829

最新推荐文章于 2025-03-12 15:37:32 发布

阅读量1.6k

点赞数 1

分类专栏： vue导出word 文章标签：前端 vue 导出 word 导出word

本文链接：https://blog.youkuaiyun.com/u011155153/article/details/122478381

版权

一、导入包

npm install docxtemplater
npm install pizzip
npm install jszip
npm install jszip-utils
npm install file-saver
npm install docxtemplater-image-module-free
npm install angular-expressions
npm install image-size
二、utils 文件夹下添加 word.js 导出word的方法

/*
 * @Description:
 * @Version: 1.0
 * @Autor: lujun
 * @Date: 2022-01-13 14:37:10
 * @FilePath: \web\src\utils\word.js
 * @LastEditors: lujun
 * @LastEditTime: 2022-01-13 14:37:10
 */
import PizZip from 'pizzip'
import docxtemplater from 'docxtemplater'
import JSZipUtils from 'jszip-utils'
import { saveAs } from 'file-saver'

/**
 * 将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 = new Buffer(stringBase64, 'base64').toString('binary')
  }
  const len = binaryString.length
  const bytes = new Uint8Array(len)
  for (let i = 0; i < len; i++) {
    const ascii = binaryString.charCodeAt(i)
    bytes[i] = ascii
  }
  return bytes.buffer
}

/**
 * 导出word,支持图片
 * @param {Object} tempDocxPath 模板文件路径
 * @param {Object} wordData 导出数据
 * @param {Object} fileName 导出文件名
 * @param {Object} imgSize 自定义图片尺寸
 */
export con