1.前端页面
<body>
<div id="otherDiv">
//页面内容 .........
</div>
<div id="html2canvasDiv">
//页面内容 .........
</div>
</body>
2.在前端页面引入依赖
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.2/html2canvas.min.js"></script>
- 点击“获取html2canvasDiv截图”的事件后生成并下载截图
<script>
$(function(){
$(document).on('click',"#getDivImg",function(){ html2canvas(document.querySelector("#html2canvasDiv")).then(canvas => {
document.body.appendChild(canvas);
const imgUrl = canvas.toDataURL('image/jpeg')
const image = document.createElement('img')
image.src = imgUrl
// 将生成的图片放到 类名为 content 的元素中，展示图片
document.querySelector('.openimage').appendChild(image)
// 下载图片
const a = document.createElement('a')
a.href = imgUrl
// a.download 后面的内容为自定义图片的名称
a.download = '报告详情'
a.click()
});
});
})
</script>
969
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
