vue 导出word文档,支持表格和图片 admin 2023-02-14 13:21:02 篇首语:本文由小编为大家整理,主要介绍了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文档,支持表格和图片的主要内容,如果未能解决你的问题,请参考以下文章 c#如何读取txt文件内容 shell 获取字符串长度 您可能还会对下面的文章感兴趣: 相关文章 浏览器打不开网址提示“ERR_CONNECTION_TIMED_OUT”错误代码的解决方法 如何安装ocx控件 VMware的虚拟机为啥ip地址老是自动变化 vbyone和EDP区别 linux/debian到底怎么重启和关机 苹果平板键盘被弄到上方去了,如何调回正常? 机器学习常用距离度量 如何查看kindle型号