需求
打开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部分
<div class='preview-content'>
<iframe id="iframe01" class='iframeBox' :src='openUrl' style="border: 0;" height="100%" width="100%"
scrolling="auto" sandbox="allow-same-origin allow-scripts allow-popups allow-forms">
</iframe>
</div>
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
网友评论