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具体的方法内容如下：