vue：前端导出word 加图片：前端

导出word

word模板放在vue的 static 里面

return中的数据

引入的包

npm i jszip@^2.6.1
npm i file-saver@^2.0.2
npm i docxtemplater@^3.17.6
npm i jszip-utils@^0.1.0
npm i pizzip
npm i open-docxtemplater-image-module

导入

import docxtemplater from 'docxtemplater'
import PizZip from 'pizzip'
import JSZipUtils from 'jszip-utils'
import {saveAs} from 'file-saver'

 clients: [{"first_name": "John","last_name": "Doe","phone": "+44546546454"},{"first_name": "Jane","last_name": "Doe","phone": "+445476454"}],text_: '铁蛋水上漂',echartUrl1: localStorage.getItem('echarts1'),echartUrl2: sessionStorage.getItem('echarts2'),echartUrl3: sessionStorage.getItem('echarts3'),echartUrl4: sessionStorage.getItem('echarts4'),echartUrl5: sessionStorage.getItem('echarts5'),echartUrl6: sessionStorage.getItem('echarts6'),}

word的导出代码 methed中

这个代码不用动下面调用

 base64DataURLToArrayBuffer(dataURL) {const base64Regex = /^data:image\/(png|jpg|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;},/*** description： 导出文档** created by aa on 2020-08-18**/

exportWord(){var ImageModule = require('open-docxtemplater-image-module');// 点击导出wordlet _this = this;// 读取并获得模板文件的二进制内容JSZipUtils.getBinaryContent("../../../../../static/demo_word.docx",function(error, content) {// exportTemplate.docx是模板。我们在导出的时候，会根据此模板来导出对应的数据// 抛出异常if (error) {throw error;}// 图片处理let opts = {}opts.centered = true;  // 图片居中，在word模板中定义方式为{%%image}opts.fileType = "docx";opts.getImage = function(chartId){return _this.base64DataURLToArrayBuffer(chartId);}opts.getSize = function(){return [600,300]}let imageModule = new ImageModule(opts);// 创建一个PizZip实例，内容为模板的内容let zip = new PizZip(content);// 创建并加载docxtemplater实例对象let doc = new docxtemplater();doc.attachModule(imageModule);doc.loadZip(zip);// 设置模板变量的值doc.setData({clients: _this.clients,image1:_this.echartUrl1, // 获取echarts图片image2:_this.echartUrl2, // 获取echarts图片image3:_this.echartUrl3, // 获取echarts图片image4:_this.echartUrl4, // 获取echarts图片image5:_this.echartUrl5, // 获取echarts图片image6:_this.echartUrl6, // 获取echarts图片text_:  _this.text_,});try {// 用模板变量的值替换所有模板变量doc.render();} catch (error) {// 抛出异常let e = {message: error.message,name: error.name,stack: error.stack,properties: error.properties};throw error;}// 生成一个代表docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示）let out = doc.getZip().generate({type: "blob",mimeType:"application/vnd.openxmlformats-officedocument.wordprocessingml.document"});// 将目标文件对象保存为目标类型的文件，并命名saveAs(out, "xxx.docx");});}
//打印

最终生成的word

vue：前端导出word 加图片：前端相关推荐

记录前端导出word 本地图片不显示问题
导出方法一: jquery.wordexport 可以做导出word(也可以导出html,把源码里面的doc换成html) 导出方法二: 借助HTML5 Blob 可以做导出word 出现问题外 ...
vue：前端导出PDF 加图片：前端
npm i vue-to-pdf --save <div id="exportPdf" ref="exportPdf"></div> & ...
纯前端JS导出Word包含图片
纯前端JS导出Word包含图片纯前端JS导出Word文档包含图片 Word导出方式依赖实现代码纯前端JS导出Word文档包含图片在做项目中,遇到一个需求,是将后台返回的属性以及URL图片导出 ...
vue前端html页面导出word文件,Vue-纯前端导出word文档
在项目中,我们可以借助后端返回文件流实现文件下载.如果前端有数据,也可以借助前端框架进行下载.本文将介绍如何在前端纯js实现word文档导出. 1. 组件介绍要实现前端纯js导出word文档,我们需 ...
Vue导出word附表部分横向显示(承接上一篇Vue纯前端导出word)
Vue纯前端导出word直通车 1. 引入js import htmlDocx from "@/utils/html-docx"; 2. page-break-before:alw ...
vue 导出word带图片
下载依赖包 npm install docxtemplater npm install pizzip npm install jszip npm install jszip-utils npm in ...
前端导出word（包含图表）
前端导出word文档,包含(图表),先把canvas转成图片,再导出,还有点问题,不过功能实现了,不用通过后台,看到的大神可以留言提出改进的方法代码如下: canvas转图片用的是html2canv ...
纯前端导出word、pdf、excel、txt、svg文档方法与技巧（附带问题总结）
文章目录导出pdf **实现思路:** **问题总结:** **具体代码** **封装好的导出函数,记得引入js插件** 封装方法一: 封装方法二: 封装方法三: 纯前端导出word文档方法与技巧 ...
vue实现导出word文档（含多张图片）
一.实现效果以填写并导出房屋出租审批表为例,首先填写表格相应内容后,点击" 导出 "按钮实现word文档的导出功能,界面如下所示: 最后导出word文档如下所示: 二.所需插件 ...

vue：前端导出word 加图片：前端

vue：前端导出word 加图片：前端相关推荐

最新文章

热门文章