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 下载按钮区 -->