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

至此所有功能实现，感想就是坐下来认真去想一个需求怎么实现，最后还能圆满实现的感觉真的很棒！

不问他年同尘忘烟波，多少故事转身千秋，共勉！！！