如果内容过多，上下隐藏了也能截全图的方法
组件：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转换为图片URLvar 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>