番外-vue 导出word文档(包括屏幕截图)
在线效果(用户名:liu;密码:12345)
点击数据管理统计->数据管理->导出模板按钮
参考
1,安装包
npm install docxtemplater pizzip --savenpm install jszip-utils --save npm install jszip --savenpm install file-saver --savenpm install angular-expressions --savenpm install image-size --savenpm install html2canvas
2,创建word.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,创建canvas2image.js文件(截图方法)
代码:
/*** covert canvas to image* and save the image file*/var Canvas2Image = function() {// check if support sth.var $support = function() {var canvas = document.createElement('canvas'),ctx = canvas.getContext('2d');return {canvas: !!ctx,imageData: !!ctx.getImageData,dataURL: !!canvas.toDataURL,btoa: !!window.btoa};}();var downloadMime = 'image/octet-stream';function scaleCanvas(canvas, width, height) {var w = canvas.width,h = canvas.height;if (width == undefined) {width = w;}if (height == undefined) {height = h;}var retCanvas = document.createElement('canvas');var retCtx = retCanvas.getContext('2d');retCanvas.width = width;retCanvas.height = height;retCtx.drawImage(canvas, 0, 0, w, h, 0, 0, width, height);return retCanvas;}function getDataURL(canvas, type, width, height) {canvas = scaleCanvas(canvas, width, height);return canvas.toDataURL(type);}function saveFile(strData) {document.location.href = strData;}function genImage(strData) {var img = document.createElement('img');img.src = strData;return img;}function fixType(type) {type = type.toLowerCase().replace(/jpg/i, 'jpeg');var r = type.match(/png|jpeg|bmp|gif/)[0];return 'image/' + r;}function encodeData(data) {if (!window.btoa) { throw 'btoa undefined' }var str = '';if (typeof data == 'string') {str = data;} else {for (var i = 0; i < data.length; i++) {str += String.fromCharCode(data[i]);}}return btoa(str);}function getImageData(canvas) {var w = canvas.width,h = canvas.height;return canvas.getContext('2d').getImageData(0, 0, w, h);}function makeURI(strData, type) {return 'data:' + type + ';base64,' + strData;}/*** create bitmap image* 按照规则生成图片响应头和响应体*/var genBitmapImage = function(oData) {//// BITMAPFILEHEADER: http://msdn.microsoft.com/en-us/library/windows/desktop/dd183374(v=vs.85).aspx// BITMAPINFOHEADER: http://msdn.microsoft.com/en-us/library/dd183376.aspx//var biWidth = oData.width;var biHeight = oData.height;var biSizeImage = biWidth * biHeight * 3;var bfSize = biSizeImage + 54; // total header size = 54 bytes//// typedef struct tagBITMAPFILEHEADER {// WORD bfType;// DWORD bfSize;// WORD bfReserved1;// WORD bfReserved2;// DWORD bfOffBits;// } BITMAPFILEHEADER;//var BITMAPFILEHEADER = [// WORD bfType -- The file type signature; must be "BM"0x42, 0x4D,// DWORD bfSize -- The size, in bytes, of the bitmap filebfSize & 0xff, bfSize >> 8 & 0xff, bfSize >> 16 & 0xff, bfSize >> 24 & 0xff,// WORD bfReserved1 -- Reserved; must be zero0, 0,// WORD bfReserved2 -- Reserved; must be zero0, 0,// DWORD bfOffBits -- The offset, in bytes, from the beginning of the BITMAPFILEHEADER structure to the bitmap bits.54, 0, 0, 0];//// typedef struct tagBITMAPINFOHEADER {// DWORD biSize;// LONG biWidth;// LONG biHeight;// WORD biPlanes;// WORD biBitCount;// DWORD biCompression;// DWORD biSizeImage;// LONG biXPelsPerMeter;// LONG biYPelsPerMeter;// DWORD biClrUsed;// DWORD biClrImportant;// } BITMAPINFOHEADER, *PBITMAPINFOHEADER;//var BITMAPINFOHEADER = [// DWORD biSize -- The number of bytes required by the structure40, 0, 0, 0,// LONG biWidth -- The width of the bitmap, in pixelsbiWidth & 0xff, biWidth >> 8 & 0xff, biWidth >> 16 & 0xff, biWidth >> 24 & 0xff,// LONG biHeight -- The height of the bitmap, in pixelsbiHeight & 0xff, biHeight >> 8 & 0xff, biHeight >> 16 & 0xff, biHeight >> 24 & 0xff,// WORD biPlanes -- The number of planes for the target device. This value must be set to 11, 0,// WORD biBitCount -- The number of bits-per-pixel, 24 bits-per-pixel -- the bitmap// has a maximum of 2^24 colors (16777216, Truecolor)24, 0,// DWORD biCompression -- The type of compression, BI_RGB (code 0) -- uncompressed0, 0, 0, 0,// DWORD biSizeImage -- The size, in bytes, of the image. This may be set to zero for BI_RGB bitmapsbiSizeImage & 0xff, biSizeImage >> 8 & 0xff, biSizeImage >> 16 & 0xff, biSizeImage >> 24 & 0xff,// LONG biXPelsPerMeter, unused0, 0, 0, 0,// LONG biYPelsPerMeter, unused0, 0, 0, 0,// DWORD biClrUsed, the number of color indexes of palette, unused0, 0, 0, 0,// DWORD biClrImportant, unused0, 0, 0, 0];var iPadding = (4 - ((biWidth * 3) % 4)) % 4;var aImgData = oData.data;var strPixelData = '';var biWidth4 = biWidth << 2;var y = biHeight;var fromCharCode = String.fromCharCode;do {var iOffsetY = biWidth4 * (y - 1);var strPixelRow = '';for (var x = 0; x < biWidth; x++) {var iOffsetX = x << 2;strPixelRow += fromCharCode(aImgData[iOffsetY + iOffsetX + 2]) +fromCharCode(aImgData[iOffsetY + iOffsetX + 1]) +fromCharCode(aImgData[iOffsetY + iOffsetX]);}for (var c = 0; c < iPadding; c++) {strPixelRow += String.fromCharCode(0);}strPixelData += strPixelRow;} while (--y);var strEncoded = encodeData(BITMAPFILEHEADER.concat(BITMAPINFOHEADER)) + encodeData(strPixelData);return strEncoded;};/*** saveAsImage* @param canvasElement* @param {String} image type* @param {Number} [optional] png width* @param {Number} [optional] png height*/var saveAsImage = function(canvas, width, height, type) {if ($support.canvas && $support.dataURL) {if (typeof canvas == "string") { canvas = document.getElementById(canvas); }if (type == undefined) { type = 'png'; }type = fixType(type);if (/bmp/.test(type)) {var data = getImageData(scaleCanvas(canvas, width, height));var strData = genBitmapImage(data);saveFile(makeURI(strData, downloadMime));} else {var strData = getDataURL(canvas, type, width, height);saveFile(strData.replace(type, downloadMime));}}};var convertToImage = function(canvas, width, height, type) {if ($support.canvas && $support.dataURL) {if (typeof canvas == "string") { canvas = document.getElementById(canvas); }if (type == undefined) { type = 'png'; }type = fixType(type);if (/bmp/.test(type)) {var data = getImageData(scaleCanvas(canvas, width, height));var strData = genBitmapImage(data);return genImage(makeURI(strData, 'image/bmp'));} else {var strData = getDataURL(canvas, type, width, height);return genImage(strData);}}};return {saveAsImage: saveAsImage,saveAsPNG: function(canvas, width, height) {return saveAsImage(canvas, width, height, 'png');},saveAsJPEG: function(canvas, width, height) {return saveAsImage(canvas, width, height, 'jpeg');},saveAsGIF: function(canvas, width, height) {return saveAsImage(canvas, width, height, 'gif');},saveAsBMP: function(canvas, width, height) {return saveAsImage(canvas, width, height, 'bmp');},convertToImage: convertToImage,convertToPNG: function(canvas, width, height) {return convertToImage(canvas, width, height, 'png');},convertToJPEG: function(canvas, width, height) {return convertToImage(canvas, width, height, 'jpeg');},convertToGIF: function(canvas, width, height) {return convertToImage(canvas, width, height, 'gif');},convertToBMP: function(canvas, width, height) {return convertToImage(canvas, width, height, 'bmp');}};}();
export default Canvas2Image;
4,自定义word模板
新建模板.docx文件,内容如下:
放到static文件夹下
5,组件使用
import html2canvas from 'html2canvas';
import Canvas2Image from "../js/lib/canvas2image.js";
import { exportWord } from "../../util/word.js";
data: {cip: "",cname: "",image1:'',},demoName:'用户IP和屏幕截图',
//导出模板async exportWordTest () {// 获取待转换对象var downloadContent = document.getElementById("mapView")var width = downloadContent.offsetWidthvar height = downloadContent.offsetHeightvar canvas = document.createElement('canvas')var scale = 1canvas.width = width canvas.height = height * scalecanvas.getContext('2d').scale(scale, scale)var opts = {scale: scale,canvas: canvas,// 日志开关,便于查看html2canvas的内部执行流程// logging: true,width: width,height: height,// 避免下载不全backgroundColor: null,// 【重要】开启跨域配置useCORS: true}//屏幕截图html2canvas(downloadContent, opts).then((canvas) => {var context = canvas.getContext('2d')// 【重要】关闭抗锯齿context.mozImageSmoothingEnabled = falsecontext.webkitImageSmoothingEnabled = falsecontext.msImageSmoothingEnabled = falsecontext.imageSmoothingEnabled = falsevar img = Canvas2Image.convertToJPEG(canvas, canvas.width / 2, canvas.height / 2)let dataURL = img.getAttribute('src')// 下载图片let a = document.createElement('a')document.body.appendChild(a)a.href = img.srcthis.data.image1 = dataURL}).then(() => {let imgSize = {image1: [100, 100], //控制导出的word图片大小};exportWord("./static/模板.docx", this.data, this.demoName+".docx", imgSize);})},
番外-vue 导出word文档(包括屏幕截图)相关推荐
- vue 导出word文档(包括图片)
vue 导出word文档(包括图片) 1.打开终端,安装依赖 -- 安装 docxtemplater npm install docxtemplater pizzip --save-- 安装 jszi ...
- vue 导出word文档,支持表格和图片
一.导入包 npm install docxtemplater npm install pizzip npm install jszip npm install jszip-utils npm ins ...
- 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 ...
- vue实现导出word文档(含多张图片)
一.实现效果 以填写并导出房屋出租审批表为例,首先填写表格相应内容后,点击" 导出 "按钮实现word文档的导出功能,界面如下所示: 最后导出word文档如下所示: 二.所需插件 ...
- vue 生产word_nodejs(officegen)+vue(axios)在客户端导出word文档
前言 我的项目中有一个需求:点击按钮生成可编辑的word文档订单详情的信息 我使用的前端框架是Vue.js.后台使用的是node.js node.js生成和导出word文档我参考的是下面这两篇文章,写 ...
- Springboot 项目导出word文档(文档内容包括数据以及服务器图片)
Springboot 项目freemarker导出word文档(文档内容包括数据以及服务器图片) 前些天有需求要完成导出word文档功能,基础数据导出word文档,网上也能搜到很多源代码,但是我这边要 ...
- vue前端html页面导出word文件,Vue-纯前端导出word文档
在项目中,我们可以借助后端返回文件流实现文件下载.如果前端有数据,也可以借助前端框架进行下载.本文将介绍如何在前端纯js实现word文档导出. 1. 组件介绍 要实现前端纯js导出word文档,我们需 ...
- 「Vue To Words」 - 教你在Vue项目中导出Word文档(包含表格合并,图片修改大小)
前言:最近在项目中遇到了,vue页面需要导出word文档,今日就进行记录一下,如有不对的地方,还请见谅 ^^ 简单说一下需求:需要导出的页面是表格页面,因为包含表格的嵌套和合并,其实最主要的就是导出页 ...
- freemarker导出word文档——WordXML格式解析
前不久,公司一个项目需要实现导出文档的功能,之前是一个同事在做,做了3个星期,终于完成了,但是在项目上线之后却发现导出的文档有问题,此时,这个同事已经离职,我自然成为接班者,要把导出功能实现,但是我看 ...
最新文章
- Linux下使用终端调试Python程序:pudb
- 推荐介绍一项新的工程技术:[威胁建模]的相关系列文章《威胁建模Web 应用程序》...
- lazarus php,Lazarus 终于安装成功了
- eureka java_spring cloud 入门系列二:使用Eureka 进行服务治理
- 解决点击事件让背景变红,在点击背景变正常,并且可以多选的效果
- C# 规则引擎RulesEngine
- 多进程 VS 多线程
- Swagger介绍及使用
- 4乘4方格走的路线_国庆自驾游,4条成都出发沿途美景大汇合自驾游路线推荐
- mysql 判断是数据类型_mysql数据类型判断
- java jbutton 不显示_java让JButton按钮变成不可见
- java根据坐标轴_java 根据坐标截取图片实例代码
- MarkDown 分割线
- java8 成绩分数排名
- 第20件事 风险分析
- ibm tivoli_调优IBM DB2以获得最佳的IBM Tivoli Security Operations Manager性能
- Android长时间后台运行,内存被回收再次打开导致APP崩溃(APP在后台被系统回收后,如何重新启动?)
- 从零开始的WordPress个人博客搭建
- 对“空间数据库”的理解
- typename 的两种用法
热门文章
- 激光slam课程学习笔记--第11课:3D激光SLAM介绍
- python中用于创建文件对象的是_Python内置函数________用来打开或创建文件并返回文件对象。...
- 成年人正确学英语的方式
- 容量影响计算机性能嘛,内存条会影响电脑性能吗?
- Surfer18 绘制等势线图基本操作
- surfer18安装
- 【JavaSE学习笔记】
- 3d pool ball android,Ball Pool 3D
- 华为商城 删除订单_商城积分商城功能介绍
- MAC地址是干什么的?底层原理是什么?