JavaScript 实现屏幕截图

方法一需要安装file-saver,html2canvas插件 handleExport() { let htmlDom = document.querySelector('#centerPark'); var FileSaver = require('file-saver'); html2canvas(htmlDom, { allowTaint: false, //允许污染 taintTest: true, //在渲染前测试图片(没整明白有啥用) useCORS: true, //使用跨域(当allowTaint为true时这段代码没什么用,下面解释) background: "#fff", }).then(canvas => { if (navigator.msSaveBlob) { navigator.msSaveBlob(canvas.msToBlob(), 'map.png'); } else { canvas.toBlob(function (blob) { FileSaver.saveAs(blob, 'map.png'); }); } }) }, 对于地图截图也可以 handleExport() { let map = this.mymap; var FileSaver = require('file-saver') map.once('rendercomplete', function (event) { var canvas = event.context.canvas; if (navigator.msSaveBlob) { navigator.msSaveBlob(canvas.msToBlob(), 'map.png'); } else { canvas.toBlob(function (blob) { FileSaver.saveAs(blob, 'map.png'); }); } }); map.renderSync(); }, 这个方法的问题是标记标绘可以截不上。方法二首先进行预览后在导出成pdf，如下图所示： image.png

专题报告

{{unit}} 时间：{{nowDate | formatdatezhSimple}}

制作人：{{this.producer}} 签发人：{{this.issuer}}

导出pdf

js download() { var element = document.querySelector("#dialogPage") // 这个dom元素是要导出pdf的div容器 var w = element.style.width; // 获得该容器的宽 var h = element.style.height; // 获得该容器的高 var offsetTop = element.offsetHeight; // 获得该容器到文档顶部的距离 var offsetLeft = element.offsetWidth; // 获得该容器到文档最左的距离 var canvas = document.createElement("canvas"); var abs = 0; // var win_i = $(window).width(); // 获得当前可视窗口的宽度（不包含滚动条） var win_i = document.body.offsetWidth; // 获得当前可视窗口的宽度（不包含滚动条） var win_o = window.innerWidth; // 获得当前窗口的宽度（包含滚动条） if (win_o > win_i) { abs = (win_o - win_i) / 2; // 获得滚动条长度的一半 } canvas.width = w * 2; // 将画布宽&&高放大两倍 canvas.height = h * 2; var context = canvas.getContext("2d"); context.scale(2, 2); context.translate(-offsetLeft - abs, -offsetTop); // 这里默认横向没有滚动条的情况，因为offset.left(),有无滚动条的时候存在差值，因此 // translate的时候，要把这个差值去掉 html2canvas(element).then(canvas => { var contentWidth = canvas.width; var contentHeight = canvas.height; //一页pdf显示html页面生成的canvas高度; var pageHeight = contentWidth / 592.28 * 841.89; //未生成pdf的html页面高度 var leftHeight = contentHeight; //页面偏移 var position = 0; //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高 var imgWidth = 595.28; var imgHeight = 592.28 / contentWidth * contentHeight; var pageData = canvas.toDataURL('image/jpeg', 1.0); var pdf = new jsPDF('', 'pt', 'a4'); //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89) //当内容未超过pdf一页显示的范围，无需分页 if (leftHeight < pageHeight) { pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight); } else { // 分页 while (leftHeight > 0) { pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight) leftHeight -= pageHeight; position -= 841.89; //避免添加空白页 if (leftHeight > 0) { pdf.addPage(); } } } let now = new Date(); // 调用全局过滤器 let date = this.$options.filters.formatdatezhSimple(now); pdf.save(date + ' 专题报告.pdf'); }) }, handleExport1() { this.imgDialogVisible = true; }, openDialog() { let htmlDom = document.querySelector('#centerPark') html2canvas(htmlDom, { allowTaint: false, //允许污染 taintTest: true, //在渲染前测试图片(没整明白有啥用) useCORS: true, //使用跨域(当allowTaint为true时这段代码没什么用,下面解释) background: "#fff", }).then(canvas => { // this.imgDialogVisible = true; let img = document.querySelector('#downloadImg'); if (img.hasChildNodes()) { var childs = img.childNodes; for (var i = childs.length - 1; i >= 0; i--) { img.removeChild(childs[i]); } } const dataImg = new Image() dataImg.style.height = "500px"; dataImg.style.width = "100%"; dataImg.src = canvas.toDataURL('image/png', 1.0); //将图片转为base64, 0-1 表示清晰度,得到图片的base64编码数据 document.querySelector('#downloadImg').appendChild(dataImg); let blob_ = this.dataURLtoBlob(dataImg.src) const alink = document.querySelector("#imgA"); alink.href = window.URL.createObjectURL(blob_); alink.download = "map.png"; // alink.onclick = () => { // canvas.toBlob(function (blob) { // saveAs(blob, 'map.png'); // }); // }; }) }, dataURLtoBlob(dataurl) { var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n); while (n--) { u8arr[n] = bstr.charCodeAt(n); } return new Blob([u8arr], { type: mime }); },

发表评论 (审核通过后显示评论)：

文章评论(0)