前端页面截全屏的方法Vue

第一步：安装html2canvas的包：

npm install html2canvas --save-dev

第二步：引入html2canvas的包：

import html2canvas from "html2canvas";

第三步：在组件的template的根div中加ref和调用方法的事件：

第四步：写入方法：

/**
 * 生成图片
 */
hanledDownload() {
   this.hanledDownload2(this.$refs.home_main);
},
/**
 * 生成图片
 */
hanledDownload2(ref) {
   html2canvas(ref, {
     backgroundColor: "#ffffff",
     scale: 1,
   }).then((canvas) => {
        var imgData = canvas.toDataURL("image/jpeg");
        this.fileDownload(imgData);
   });
},
/**
 * 下载文件到本地
 */
fileDownload(downloadUrl) {
   let aLink = document.createElement("a");
   aLink.style.display = "none";
   aLink.href = downloadUrl;
   aLink.download = "img.png";
   // 触发点击-然后移除
   document.body.appendChild(aLink);
   aLink.click();
   document.body.removeChild(aLink);
}

点击绑定事件的地方就可以把整个页面截屏下来啦！！！