JS实现网页截图 html2canvas

第一步 下载插件 npm i html2canvas -D

第二步引入插件 import html2canvas from 'html2canvas';

第三步使用插件

<template>
  <div ref ="imageWrapper">要截图的元素,如果要截取整个页面，把ref ="imageWrapper"给到最外层的父元素</div>
  <el-button @click="clickGeneratePicture(imageWrapper)">点击截图</el-button>
</template>
<script lang="ts" setup>
import html2canvas from 'html2canvas';
let imageWrapper = ref(null)
let clickGeneratePicture = (imageWrapper: any) => {
  html2canvas(imageWrapper, {
    width: imageWrapper.clientWidth, //截图宽度
    height: imageWrapper.clientHeight, //截图高度
    backgroundColor: null, //画出来的图片有白色的边框,不要可设置背景为透明色（null）
    useCORS: true, //支持图片跨域
    scale: 1, //设置放大的倍数
  }).then((canvas) => {
    // 把生成的base64位图片上传到服务器,生成在线图片地址
    let imgUrl = canvas.toDataURL('image/png');
    var tempLink = document.createElement('a'); // 创建一个a标签
    tempLink.style.display = 'none';
    tempLink.href = imgUrl;
    tempLink.setAttribute('download', '截图'); // 给a标签添加下载属性
    if (typeof tempLink.download === 'undefined') {
      tempLink.setAttribute('target', '_blank');
    }
    document.body.appendChild(tempLink); // 将a标签添加到body当中
    tempLink.click(); // 启动下载
    document.body.removeChild(tempLink); // 下载完毕删除a标签
    window.URL.revokeObjectURL(imgUrl);
  });
};
</script>

效果图