PDF.js 加载文档，实现任意位置当前可视范围截图下载

最新推荐文章于 2024-08-26 15:27:04 发布

置顶

ITSean

最新推荐文章于 2024-08-26 15:27:04 发布

阅读量1.9k

点赞数

文章标签： PDF.js javaScript

本文链接：https://blog.csdn.net/ITSean/article/details/81630200

版权

本文介绍了一种使用PDF.js在前端页面上实现PDF文档任意位置截图并下载为图片的方法。由于PDF.js每一页都是一个canvas，常规方法无法截取跨页内容。作者通过获取当前屏幕下展示的页，将每个canvas转成图片，再在新的canvas上按原位置组合这些图片，从而达到截图需求。最后展示了相关代码。

摘要由CSDN通过智能技术生成

关于前端页面转成图片格式的方法，网上已经有很多了，div转图片我一般用html2canvas.js引用调用就能返回Base64格式的串，

canvas转成图

片直接用canvas.toDataURL()f方法转换。但是项目上要求一个很奇葩的需求，无论是div或者是canvas转成图片都必须是一个完整的dom元素对象。项目上PDF文档用的PDF.js做展示渲染需要一个截图功能要求在文档的任意位置截取可视范围的内容输出成一个图片类似于浏览器的截图。当时我就呵呵了，PDf.js的渲染方式每一页都是一个canvas，一页一页的转换我是OK的，这要是任意位置就可能包括屏幕中展示两页的中间位置，包括上一页的下半部分和这页的下半部分。简而言之就是两个一半的canvas，都不是一个完整的dom元素。这种截图一看就是浏览器和桌面端实现的功能，这一半的dom元素咋整。可能是我水平不够这种从技术上已经实现不了。经过苦思冥想，神游天地，探索宇宙的真知，找寻存在的价值。终于想到一个解决的方法实现这个功能。看到这也累了吧，废话就不说了。