js截图，截全图

如果内容过多，上下隐藏了也能截全图的方法

组件：html2canvas

中文官网 关于 html2canvas | html2canvas中文文档

<template>
  <el-dialog :visible.sync="dialogVisiblePre" modal-append-to-body>
    <div style="height: 400px;overflow-y:auto ;">
      <div id="ScreenshotContent">
        【沟通摘要总结】
        本次沟通围绕贵司对xxxxx销售保产品的功能验证需求展开。贵司在试用过程中发现仪表盘、A
        人效分析等核心模块数据缺失，希望获取完整功能演示以评估产品效果。经协商，双方约定周一通过腾讯会议远程演示住宅行业客户(小海湘公司)的真实使用案例。 【沟通摘要总结】
        本次沟通围绕贵司对xxxxx销售保产品的功能验证需求展开。贵司在试用过程中发现仪表盘、A
        人效分析等核心模块数据缺失，希望获取完整功能演示以评估产品效果。经协商，双方约定周一通过腾讯会议远程演示住宅行业客户(小海湘公司)的真实使用案例。 【沟通摘要总结】
        本次沟通围绕贵司对xxxxx销售保产品的功能验证需求展开。贵司在试用过程中发现仪表盘、A
        人效分析等核心模块数据缺失，希望获取完整功能演示以评估产品效果。经协商，双方约定周一通过腾讯会议远程演示住宅行业客户(小海湘公司)的真实使用案例。 【沟通摘要总结】
        本次沟通围绕贵司对xxxxx销售保产品的功能验证需求展开。贵司在试用过程中发现仪表盘、A
        人效分析等核心模块数据缺失，希望获取完整功能演示以评估产品效果。经协商，双方约定周一通过腾讯会议远程演示住宅行业客户(小海湘公司)的真实使用案例。 【沟通摘要总结】
        本次沟通围绕贵司对xxxxx销售保产品的功能验证需求展开。贵司在试用过程中发现仪表盘、A
        人效分析等核心模块数据缺失，希望获取完整功能演示以评估产品效果。经协商，双方约定周一通过腾讯会议远程演示住宅行业客户(小海湘公司)的真实使用案例。 【沟通摘要总结】
        本次沟通围绕贵司对xxxxx销售保产品的功能验证需求展开。贵司在试用过程中发现仪表盘、A
        人效分析等核心模块数据缺失，希望获取完整功能演示以评估产品效果。经协商，双方约定周一通过腾讯会议远程演示住宅行业客户(小海湘公司)的真实使用案例。 【沟通摘要总结】
        本次沟通围绕贵司对xxxxx销售保产品的功能验证需求展开。贵司在试用过程中发现仪表盘、A
        人效分析等核心模块数据缺失，希望获取完整功能演示以评估产品效果。经协商，双方约定周一通过腾讯会议远程演示住宅行业客户(小海湘公司)的真实使用案例。 【沟通摘要总结】
        本次沟通围绕贵司对xxxxx销售保产品的功能验证需求展开。贵司在试用过程中发现仪表盘、A
        人效分析等核心模块数据缺失，希望获取完整功能演示以评估产品效果。经协商，双方约定周一通过腾讯会议远程演示住宅行业客户(小海湘公司)的真实使用案例。 【沟通摘要总结】
        本次沟通围绕贵司对xxxxx销售保产品的功能验证需求展开。贵司在试用过程中发现仪表盘、A
        人效分析等核心模块数据缺失，希望获取完整功能演示以评估产品效果。经协商，双方约定周一通过腾讯会议远程演示住宅行业客户(小海湘公司)的真实使用案例。 【沟通摘要总结】
        本次沟通围绕贵司对xxxxx销售保产品的功能验证需求展开。贵司在试用过程中发现仪表盘、A
        人效分析等核心模块数据缺失，希望获取完整功能演示以评估产品效果。经协商，双方约定周一通过腾讯会议远程演示住宅行业客户(小海湘公司)的真实使用案例。 【沟通摘要总结】
        本次沟通围绕贵司对xxxxx销售保产品的功能验证需求展开。贵司在试用过程中发现仪表盘、A
        人效分析等核心模块数据缺失，希望获取完整功能演示以评估产品效果。经协商，双方约定周一通过腾讯会议远程演示住宅行业客户(小海湘公司)的真实使用案例。 【沟通摘要总结】
      </div>
    </div>
    <el-button @click="SavePicture(1)">复制图片</el-button>
    <el-button @click="SavePicture(2)">保存图片</el-button>
  </el-dialog>
</template>
<script>
import html2canvas from "html2canvas";
export default {
  data() {
    return {
      dialogVisiblePre: false
    }
  },
  methods: {
    SavePicture(num) {
      event.stopPropagation();
      // 滚动到顶部
      window.scrollTo(0, 0);
      html2canvas(document.getElementById("ScreenshotContent"), {
        scale: 2,
        windowWidth: document.documentElement.scrollWidth,
        windowHeight: document.documentElement.scrollHeight,
        scrollX: 0,
        scrollY: 0
      }).then(function (canvas) {
        // 将canvas转换为图片URL
        var imgData = canvas.toDataURL('image/png');
        if (num == 1) {
          var that=this
          // 将canvas内容转换为Blob对象
          canvas.toBlob(function (blob) {
            // 创建ClipboardItem对象
            const clipboardItem = new ClipboardItem({ 'image/png': blob });
            // 写入剪贴板
            navigator.clipboard.write([clipboardItem]).then(function () {
              that.$message.success('图片已成功复制到剪贴板！')
            }).catch(function (err) {
              that.$message.error('复制图片到剪贴板失败：'+ err)
            });
          }, 'image/png');
        }
        if (num == 2) {
          // 创建一个a标签用于下载
          var link = document.createElement('a');
          link.href = imgData;
          link.download = 'screenshot.png'; // 设置下载的文件名

          // 触发下载
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link); // 下载完成后移除a标签
        }
      });
    }
  }
}
</script>