html2canvas区域截屏,vue实现网页区域截屏（结合html2canvas，pdf.js）
需求
打开office文件后，可以实现区域截屏，并且记住当前截屏位置的文档页码
image.png
业务场景
这边office文件用的officeweb365打开的，打开方式是officeweb365那边的方法
image.png
实现思路
1 需要把网页转化为canvas，借用了html2canvas
2 需要记住区域框的位置信息，利用drawImage方法实现区域截屏
3 生成截屏到oss
html2canvas使用方法
基本语法
html2canvas(element, options)
element： html的dom元素，options为参数配置项
image.png
实现过程中遇到的问题
1 因为文件是用officeweb365打开的，在获取iframe dom元素的时候，会报一个跨域的问题
image.png
因为有个服务器专门部署了预览officeweb365的配置服务，于是想我在这个服务器下写个静态页面，然后跟我这边的业务代码进行交互(跨域问题成功解决了)
image.png
既然是写在两个项目中的代码，就牵扯到数据之间的相互传递了，先买个关子，后面代码中会提到
2 因为要实现再打开的时候，记住截屏的页面，问了officeweb365那边，展示不支持这个方法，于是想到了用pdf.js,恰巧officeweb365有个可以把所有文件都转化成pdf文件的功能
image.png
自己的业务代码.previewDialog
html部分
image.png
js部分
image.png
officeweb365服务器上静态页面代码
html部分
scrolling="auto" sandbox="allow-same-origin allow-scripts allow-popups allow-forms">
js部分
技术难点： 因为要记住页码，所有实现截屏也是在某一页的基础上进行截屏，所有首先要定位当前打开pdf文件在第几页
pdf.js 打开文档拼接地址
image.png
获取打开pdf在第几页
发现利用pdf.js打开文件的时候，会在localStorage里面存储页面信息
image.png
pageNumber = history.files[0].page // 获取当前页码
获取当前页码的dom元素转化为canvas
image.png
业务代码截屏功能实现
html
image.png
接收刚刚传过来的参数
image.png
实现效果
开始截屏
image.png
image.png
image.png
image.png
至此所有功能实现，感想就是坐下来认真去想一个需求怎么实现，最后还能圆满实现的感觉真的很棒！
不问他年同尘忘烟波，多少故事转身千秋，共勉！！！
html2canvas区域截屏,vue实现网页区域截屏（结合html2canvas，pdf.js）相关推荐
- Html手机web背景全屏,使用全屏背景的网页设计欣赏 全屏网页背景教程
使用全屏背景的网页设计欣赏 & 全屏网页背景教程 Sponsor 全屏的大背景网站之前分享过不少,这是2012年以及2013年的设计趋势,适合用全屏背景的网站有很多,比如摄影类.建筑类.餐厅美 ...
- HTML转换成PDF 指定网页转换PDF（实际上是截取网页） pdf.js ， dompdf ， html2ps ， wkhtmltopdf
开发背景 在实际开发过程中,有一些特殊需要:需要把相关网页转换成PDF格式,作为资料留存 下面讲一下我所遇到的相关需求:证书的发放,在前期的需求调研的时候甲方提出一个需求,电子证书需要实时生成并且通过 ...
- Vue 实现页面一键截屏功能
1,安装所需要的包: npm i html2canvas --save //将页面内容区域转化为图片格式 2,在你的页面引入html2canvas 组件 import html2canvas from ...
- 利用Webbrowser类实现超长网页的截屏的实现（解决报错不能截取的难题）
之前写过一篇文章,说是解决了超长网页截图的问题.但是实际上,现实是很残酷的,试图截取一个网页的时候就出了问题 网址如下: http://www.cnblogs.com/grenet/archive/2 ...
- Echart + 百度地图实现区域聚合（Vue版）
Echart + 百度地图实现区域聚合(Vue版) 百度地图的聚合很简单,但是根据区域聚合怎么实现呢?结合Echart的百度地图怎么实现区域聚合呢? 单独玩过Echart,也单独用过百度地图,但是两个 ...
- dw8php如何使用,如何用DW8实现网页区域内选择显示
如何用DW8实现网页区域内选择显示 我们在制作网页时,有时会遇到这样的情况:根据用户的选择,显示不同的内容.比如,制作一个登录网页,上面有两个表格,一个给新用户注册用,一个供老用户登录用.我们想在页面 ...
- 【转】触屏手机点击区域的小秘密
本文章转自:触屏手机点击区域的小秘密 http://www.apkbus.com/android-23885-1-1.html 做触屏手机产品设计,要注意所有的可点击元素都有足够的点击区域,但是这并不 ...
- 原生微信小程序，scroll-view的使用，一屏两个滚动区域，scroll-y（纵向滚动）
原生微信小程序,scroll-view的使用,一屏两个滚动区域,scroll-y(纵向滚动) 这个会简单很多 结构层 <view class="container">& ...
- 网页怎么截长屏？好用的方法分享介绍
网页怎么截长屏?相比大家都知道截图的方法,但是有的时候一个网站的内容很长,并且不支持站外分享.这个时候我们只能借助截图保存内容了,有的时候一些截图只能截取一半,或者无法截取更多的内容.这个时候我们选择 ...
- Python selenium PIL 全网页滚动截屏 headless全网页截屏
思路 先截取当前屏幕的图片,获取其高度作为base高度 h,再获取全网页body到尾部的高度 H ,循环截取图片,再通过PIL进行拼接. 代码 # -*- coding:utf-8 -*- # a ...
最新文章
- 关于创建Custom Container View Controller
- Javascrip—拷贝对象（13）
- 在 Linux 上使用 Meld 比较文件夹
- 每日一句(2014-9-11)
- Android 高斯模糊demo
- centos 4.4配置使用
- 两种DIV水平居中的方法
- 数据结构思维 第十五章 爬取维基百科
- 语音识别——触发字检测
- fota mcsync洛达检测_详细解析最新推出的顶配版二代悦虎主板洛达1562M数字音频长续航款...
- zabbix自定义SNMP监控项
- 用 ASP.NET 管理 IIS（转）
- matlab绘制奈奎斯特图
- perl novel可变剪接识别（3）
- NOI 1966 玛雅历
- 小技巧 - 淘宝怎么联系人工客服？
- 正点原子IIC例程讲解笔记（三）——24cxx.c中函数理解
- 计算机组成原理（4）-中央处理器CPU
- MongoDB 分片迁移
- python元组拆包