1.并不是以浏览器截屏为原理,而是以遍历加载页面的DOM,保存DOM信息来进行构建
如果我们想截屏并打印的话,我们需要先npm安装一下
npm install html2canvas
在main.js中引入
import html2canvas from "html2canvas";
Vue.prototype.$html2canvas = html2canvas;
//参数是你要操作的dom元素和配置项,返回的参数是一个convas
this.$html2canvas(document.getElementById("base_map_box"),{
width: width,
height: height,
x: x,
y: y,
}).then(canvas => {
//调用canvasAPI,转化成blob文件对象
canvas.toBlob((blob) => {
//使用fileSaver的saveAs方法把文件变成图片
this.$FileSaver.saveAs(blob, this.imgname + ".png");
})
})