html 实现桌面截图,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}}

{{textarea}}

导出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 });

},