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

vue实现移动端H5页面截图相关推荐

vue多页面开发_使用VUE进行移动端H5页面开发前准备
在正式使用Vue进行移动端页面开发前,需要做一些前置工作,以此保证用户在访问页面时看到的东西不会因设备的差异而出现各种不同的效果,比如一个页面在iphone7 plus上显示的很正常,然后切换到了Ip ...
移动端H5页面编辑器开发实战--原理结构篇
一.前言在去年10月份左右,接到了需求:开发一个H5移动端页面编辑器的任务,目的主要是解放公司内在制作这类网页的所投入的人力以及解决使用外部H5编辑器所涉及到的版权问题. 因此,一款能够与市面上已经 ...
【通用CSS模板】移动端H5页面统一样式.css
/*移动端H5页面统一样式----------------------------------------*/ @charset "UTF-8"; body, html, li, ...
移动端H5页面高清多屏适配方案
背景开发移动端H5页面面对不同分辨率的手机面对不同屏幕尺寸的手机视觉稿在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范 ...
教你如何用 lib-flexible 实现移动端H5页面适配
前话好久没写教程了(可能会误导新手的菜鸟教程(￣▽￣)"). 这是我的github,欢迎前端大大们和我一起学习交流 https://github.com/pwcong 最近入职公司做前端实 ...
php清除h5格式,移动端H5页面端怎样除去input输入框的默认样式
这次给大家带来移动端H5页面端怎样除去input输入框的默认样式,移动端H5页面端除去input输入框的默认样式的注意事项有哪些,下面就是实战案例,一起来看一下. 前两天在开发在微信访问的HTML5页 ...
html5首页图标怎么除掉,移动端H5页面端如何除去input输入框的默认样式
移动端H5页面端如何除去input输入框的默认样式发布时间:2020-09-29 16:41:58 来源:亿速云阅读:124 作者:小新这篇文章主要介绍了移动端H5页面端如何除去input输入框 ...
m3u8 video ios h5_移动端H5页面踩坑记
移动端H5页面踩坑记移动端的样式问题「1. 安卓 font-weight:700;以上才被认为是加粗.」「2. border 在 1px 以内是不被安卓识别的一些 0.5px 的下划线怎么搞?」 ...
h5页面生成图片分享到微信js_微信端h5页面如何调用分享页面的接口
这次给大家带来微信端h5页面如何调用分享页面的接口,微信端h5页面调用分享页面接口的注意事项有哪些,下面就是实战案例,一起来看一下. 最近公司做了一个给学生投票的H5页面,主要是在微信端使用,需要添加 ...

vue实现移动端H5页面截图

vue实现移动端H5页面截图

vue实现移动端H5页面截图相关推荐

最新文章

热门文章