vue 导出word文档（包括图片）

1.打开终端，安装依赖

-- 安装 docxtemplater
npm install docxtemplater pizzip  --save-- 安装 jszip-utils
npm install jszip-utils --save -- 安装 jszip
npm install jszip --save-- 安装 FileSaver
npm install file-saver --save-- 安装 angular-expressions
npm install angular-expressions --save-- 安装 image-size
npm install image-size --save

2.创建exportFile.js文件（导出word方法）
文件存放目录自定义

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的数据转为ArrayBufferreturn 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实例，内容为模板的内容let zip = new PizZip(content);// 创建并加载docxtemplater实例对象let doc = new docxtemplater();doc.attachModule(new ImageModule(opts));doc.loadZip(zip);doc.setData(wordData);try {// 用模板变量的值替换所有模板变量doc.render();} catch (error) {// 抛出异常let e = {message: error.message,name: error.name,stack: error.stack,properties: error.properties};console.log(JSON.stringify({error: e}));throw error;}// 生成一个代表docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示）let out = doc.getZip().generate({type: "blob",mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document"});// 将目标文件对象保存为目标类型的文件，并命名saveAs(out, fileName);});
}

3.组件调用
注意：引用文件的路径是你创建文件的路径

<template><a-form-modelref="ruleForm":model="form":rules="rules":label-col="labelCol":wrapper-col="wrapperCol"><a-form-model-item label="名称" prop="name"><a-input-number v-model="form.name" style="width:100%;"/></a-form-model-item><a-form-model-item label="日期" prop="date"><a-input v-model="form.date" /></a-form-model-item><a-form-model-item label="文件"><a-input v-model="form.imgUrl" read-only/><a-upload name="file" :showUploadList="false" :customRequest="customRequest"><a-button type="primary" icon="upload">导入图片</a-button></a-upload></a-form-model-item><a-form-model-item label="操作"><a-button type="primary" icon="export" @click="exportWordFile">导出word文档</a-button></a-form-model-item></a-form-model>
</template>
<script>
import {exportWord} from '@/assets/js/exportFile.js'
export default {name: 'ExportFile',data () {return {labelCol: { span: 6 },wrapperCol: { span: 16 },form: {},rules: {name: [{ required: true, message: '请输入名称！', trigger: 'blur' },],date:[{ required: true, message: '请输入日期！', trigger: 'blur' },],},};},created (){},methods: {customRequest (data){//图片必须转成base64格式var reader = new FileReader();reader.readAsDataURL(data.file);reader.onload = () => {// console.log("file 转 base64结果：" + reader.result);this.form.imgUrl = reader.result; //imgUrl必须与模板文件里的参数名一致};reader.onerror = function (error) {console.log("Error: ", error);};},exportWordFile (){let imgSize = {imgUrl:[65, 65], //控制导出的word图片大小};exportWord("./static/test.docx", this.form, "demo.docx", imgSize);//参数1：模板文档 //参数2：字段参数//参数3：输出文档//参数4：图片大小}},
};
</script>

4.创建test.docx文档模板。注：使用vue-cli2的时候，放在static目录下；使用vue-cli3的时候，放在public目录下。
模板参数名需与字段一致，普通字段：{字段名}，图片字段：{%字段名}
文档内容：

5.导出demo.docx结果展示：

vue 导出word文档（包括图片）相关推荐

java-制作flt模板，导出word文档带图片循环
java-制作flt模板,导出word文档带图片循环模板制作制作xml 编辑xml文档将xml模板转换为flt 编写工具类导出word工具类获取远程图片使用示例使用示例--springb ...
freemarker导出word文档对图片拉伸或拉长的处理
最近因为java项目中有大量的图片需要导出到word(采用freemarker导出模板),导出的过程中发现一个问题:导出饼图的时候会随着浏览器的大小不同被拉长或者拉伸,查阅很多质料但网上并没有找到相关 ...
vue 导出word文档，支持表格和图片
一.导入包 npm install docxtemplater npm install pizzip npm install jszip npm install jszip-utils npm ins ...
番外-vue 导出word文档（包括屏幕截图）
在线效果(用户名:liu:密码:12345) 点击数据管理统计->数据管理->导出模板按钮参考 1,安装包 npm install docxtemplater pizzip --save ...
java通过freemarker导出word文档带图片并且循环
转载请标明出处: https://blog.csdn.net/weixin_41965979/article/details/80969287 本文出自付付讶的博客 1:所需jar包:freemark ...
vue页面导出Word文档（含图片）
引用插件安装 npm i docxtemplater@3.17.6 npm i pizzip npm i jszip-utils@0.1.0 npm i jszip@2.6.1 npm i file ...
java 图片 word文档_【Java】用Freemarker完美导出word文档（带图片）
Java 用Freemarker完美导出word文档(带图片) 前言最近在项目中,因客户要求,将页面内容(如合同协议)导出成word,在网上翻了好多,感觉太乱了,不过最后还是较好解决了这个问题. ...
java freemarker word_Java 用Freemarker完美导出word文档（带图片）(示例代码)
Java 用Freemarker完美导出word文档(带图片) 前言最近在项目中,因客户要求,将页面内容(如合同协议)导出成word,在网上翻了好多,感觉太乱了,不过最后还是较好解决了这个问题. ...
Springboot 项目导出word文档(文档内容包括数据以及服务器图片)
Springboot 项目freemarker导出word文档(文档内容包括数据以及服务器图片) 前些天有需求要完成导出word文档功能,基础数据导出word文档,网上也能搜到很多源代码,但是我这边要 ...

vue 导出word文档（包括图片）

vue 导出word文档（包括图片）相关推荐

最新文章

热门文章