vue实现移动端H5页面截图

vue实现移动端H5页面截图

1、vue使用html2canvas实现移动端H5页面截图并下载。

2、html2canvas能够实现在用户浏览器端直接对整个或部分页面进行截屏。这个html2canvas脚本将当页面渲染成一个Canvas图片，通过读取DOM并将不同的样式应用到这些元素上实现。它不需要来自服务器任何渲染，整张图片都是在客户端浏览器创建。

3、首先需要安装html2canvas：

npm install html2canvas

4、然后在对应的vue组件script标签里引入：

<script>
    import html2canvas from 'html2canvas'
</script>

5、这里需要自定一个方法，因为需要下载截屏，所以这里自定义方法名为download具体的方法内容如下：

   // 下载
    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()
      })
    },

6、html2canvas(document.getElementById(‘main’)这里的main包含的是你需要截屏的内容的容器的id。比如：

<div id="main">
    这里面放自己想要截图的内容区，这个容器以外的内容不会截取到。
 </div>   

7、然后需要一个事件触发这个方法。这里因为项目需求使用一个底部按钮样式的点击事件触发截屏并下载图片，内容如下：

 <!--start 下载按钮区 -->
    <div class="footer"><span
        @click="download">下载</span>
    </div>
 <!--end 下载按钮区 -->