前端页面截全屏的方法Vue

最新推荐文章于 2024-01-22 14:52:06 发布

前端小凯

最新推荐文章于 2024-01-22 14:52:06 发布

阅读量315

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/qq_43235503/article/details/131132473

版权

第一步：安装html2canvas的包：

npm install html2canvas --save-dev

第二步：引入html2canvas的包：

import html2canvas from "html2canvas";

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

<template>
    <div ref="home_main" @click="hanledDownload()">点击截屏整个页面</div>
</template>

第四步：写入方法：

/**
 * 生成图片
 */
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);
}

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