vue 截图
1.安装
npm install html2canvas
2.页面中加入
<script>
import html2canvas from 'html2canvas'
</script>
download() {
// 截图下载
html2canvas(document.getElementById('main'), {
backgroundColor: 'white', //画出来的图片有白色的边框,不要可设置背景为透明色(null)
useCORS: true, //支持图片跨域
scale: 1, //设置放大的倍数
}).then((canvas) => {
//截图用img元素承装,显示在页面的上
let img = new Image()
//如果你需要下载截图,可以使用a标签进行下载
let a = document.createElement('a')
a.href = canvas.toDataURL('image/pdf')
a.download = 'test'
a.click()
})
},
3.要截图的区域
<div id="main">
这里面放自己想要截图的内容区,这个容器以外的内容不会截取到。
</div>
4.下载
<!--start 下载按钮区 -->
<div class="footer"><span
@click="download">下载</span>
</div>
<!--end 下载按钮区 -->
还不快抢沙发