篇首语：本文由小编为大家整理，主要介绍了vue 导出word文档，支持表格和图片相关的知识，希望对你有一定的参考价值。
一、导入包
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 const exportWord = (tempDocxPath, wordData, fileName, imgSize) => // 这里要引入处理图片的插件 var ImageModule = require("docxtemplater-image-module-free") const expressions = require("angular-expressions") // 读取并获得模板文件的二进制内容 JSZipUtils.getBinaryContent(tempDocxPath, function(error, content) if (error) throw error expressions.filters.size = function(input, width, height) return data: input, size: [width, height] // function angularParser(tag) // const expr = expressions.compile(tag.replace(/’/g, """)) // return // get(scope) // return expr(scope) // // // // 图片处理 let opts = opts = // 图像是否居中 centered: false opts.getImage = chartId => // console.log(chartId);//base64数据 // 将base64的数据转为ArrayBuffer return base64DataURLToArrayBuffer(chartId) opts.getSize = function(img, tagValue, tagName) // console.log(img);//ArrayBuffer数据 // console.log(tagValue);//base64数据 // console.log(tagName);//wordData对象的图像属性名 // 自定义指定图像大小 if (imgSize.hasOwnProperty(tagName)) return imgSize[tagName] else return [600, 350] // 创建一个PizZip实例，内容为模板的内容 const zip = new PizZip(content) // 创建并加载docxtemplater实例对象 const doc = new docxtemplater() doc.attachModule(new ImageModule(opts)) doc.loadZip(zip) doc.setData(wordData) 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" ) // 将目标文件对象保存为目标类型的文件，并命名 saveAs(out, fileName) )/** * 将图片的url路径转为base64路径 * 可以用await等待Promise的异步返回 * @param Object imgUrl 图片路径 */export function getBase64Sync(imgUrl) return new Promise(function(resolve, reject) // 一定要设置为let，不然图片不显示 const image = new Image() // 解决跨域问题 image.crossOrigin = "anonymous" // 图片地址 image.src = imgUrl // image.onload为异步加载 image.onload = function() const canvas = document.createElement("canvas") canvas.width = image.width canvas.height = image.height const context = canvas.getContext("2d") context.drawImage(image, 0, 0, image.width, image.height) // 图片后缀名 const ext = image.src .substring(image.src.lastIndexOf(".") + 1) .toLowerCase() // 图片质量 const quality = 0.8 // 转成base64 const dataurl = canvas.toDataURL("image/" + ext, quality) // 返回 resolve(dataurl) )三、模板文件制作方法
注意：
1）模板文件必须是docx文件。doc文件不能通过修改后缀名变为docx，必须另存时选择docx类型，才能实现类型转变。但是docx是可以通过修改后缀名改为doc文件的，因为office的升级基本都是向下兼容的。
2）使用英文下的花括号；
3）花括号内的键名前后不要有空格，且它与程序中的data对象的键名必须保持一致 ；
4）表格中想要循环添加的数据，需要在开头添加undefined#键名，在结尾处添加undefined/键名，例如下图的
#table和/table；
5）图片居中不要使用%%image2
模板文件temp.docx放在public或者static文件夹下
description
| #title name/title | |||
| 姓名 | 性别 | 年龄 | 照片 |
| #tablename | gender | age | %image/table |
%image1
%image2
四、方法调用
import getBase64Sync exportWord from "@/utils/word" // 引用包 async exportWordTest() let url = "/attachment/info/202302/hp2gnjo3idw23.jpg";let url1 ="/attachment/info/202302/cwubir5dlkp24.jpg";let url2 ="https://imgsa.baidu.com/forum/w%3D580/sign=1f7f688786cb39dbc1c0675ee01709a7/eeaee0faaf51f3de7634b50993eef01f3b297915.jpg";let url3 = "https://img2.baidu.com/it/u=2308269185,3514715988&fm=26&fmt=auto"; let data = description: "可以自定义图片大小：先在word中放置一个示例图片 ",title: name: "测试表格" ,table: [name: "张三",gender: "男",age: "49",image: await getBase64Sync(url1), name: "李四",gender: "男",age: "31",image: await getBase64Sync(url2),name: "王五",gender: "男",age: "24",image: await getBase64Sync(url3)],image1: await getBase64Sync(url),image2: await getBase64Sync(url); let imgSize = image: [65, 65],image1: [596, 300],image2: [435, 193] // 调用导出方法exportWord("temp.docx", data, "demo.docx",imgSize);,以上是关于vue 导出word文档，支持表格和图片的主要内容，如果未能解决你的问题，请参考以下文章
