前端预览 PDF 文件几种方式汇总(使用PDFJS)
哈喽大家好啊。前半年还挺忙的,一直也没有发文章,有老哥想我了嘛。这两天发现老有人私信问我 PDF 相关的内容。
那么好,为了我能安心摸鱼,我准备出一篇文章来介绍一下如何使用 PDFJS 。
PDF.js 是什么?
PDF.js 由 Mozilla 提供支持。目标是创建一个通用的、基于 Web 标准的平台,用于解析和呈现 PDF。
预览 PDF
使用 iframe、embed、新窗口打开
测试地址,方案比较简单,属于看天吃饭,全靠浏览器爸爸赏。
使用方式
<embed src="https://www.lilnong.top/static/pdf/B-4-RxJS%E5%9C%A8React%E4%B8%AD%E7%9A%84%E5%BA%94%E7%94%A8-%E9%BE%99%E9%80%B8%E6%A5%A0_.pdf">
<iframe src="https://www.lilnong.top/static/pdf/B-4-RxJS%E5%9C%A8React%E4%B8%AD%E7%9A%84%E5%BA%94%E7%94%A8-%E9%BE%99%E9%80%B8%E6%A5%A0_.pdf"></iframe>
测试结果
浏览器 | 兼容性 | 配图 |
---|---|---|
Chrome(PC)(Mac) | 支持 | |
safari(PC)(Mac) | 支持 | |
Firefox(PC)(Mac) | 支持 | |
Firefox(PC)(Windows) | 支持 | |
Edge(PC)(Windows) | 支持 | |
IE(PC)(Windows) | 不支持 | |
微信(Android)(vivo x27) | 不支持 | |
Chrome(Android)(vivo x27) | 不支持 | |
QQ浏览器(Android)(vivo x27) | 不支持 |
优点:简单,支持大部分 PC 浏览器(IE 不支持)。跨域资源同样可以(无需 cors)
缺点:不支持移动端浏览器,不支持 IE 等低版本浏览器。样式无法自定义。
pdfjs-view
测试地址,方案兼容性比较好,需要资源同域 或者 cors跨域,可以自定义样式。
使用方式
自己部署一个 pdfjs-view。 (推荐,更稳定)
- 下载项目,然后项目分为两个版本
/web/viewer-1.html
和/legacy/web/viewer.html
。legacy 支持低版本浏览器,使用 es5 编写,讲道理采用这个方案,你肯定也是为了兼容所有浏览器。(没有的话,就gulp generic-legacy
生成一份) - 然后将相关内容复制到你的目录,上传 FTP。
- 本质来讲他就是一个 HTML 文件,所以你可以针对他进行一些修改,比如说主题颜色、隐藏下载按钮等等。
- 下载项目,然后项目分为两个版本
使用 CDN 或者官方提供的 pdfjs-view。(不推荐,不稳定,异常CORS)
- https://mozilla.github.io/pdf.js/legacy/web/viewer.html
- https://mozilla.github.io/pdf.js/web/viewer.html
<iframe src="https://www.lilnong.top/static/project?file=https://www.lilnong.top/static/pdf/B-4-RxJS%E5%9C%A8React%E4%B8%AD%E7%9A%84%E5%BA%94%E7%94%A8-%E9%BE%99%E9%80%B8%E6%A5%A0_.pdf"></iframe>
<iframe src="https://www.lilnong.top/static/project/pdfjs-es5-2.5.207/web/viewer-1.html?file=https://www.lilnong.top/static/pdf/B-4-RxJS%E5%9C%A8React%E4%B8%AD%E7%9A%84%E5%BA%94%E7%94%A8-%E9%BE%99%E9%80%B8%E6%A5%A0_.pdf"></iframe>
测试结果
浏览器 | 兼容性 | 兼容性 ES5 版本 | 配图 |
---|---|---|---|
Chrome(PC)(Mac) | 支持 | 支持 | |
safari(PC)(Mac) | 支持 | 支持 | |
Firefox(PC)(Mac) | 支持 | 支持 | |
Firefox(PC)(Windows) | 支持 | 支持 | |
Edge(PC)(Windows) | 支持 | 支持 | |
IE(PC)(Windows) | 不支持 | 支持 | |
微信(Android)(vivo x27) | 支持 | 支持 | |
Chrome(Android)(vivo x27) | 支持 | 支持 | |
QQ浏览器(Android)(vivo x27) | 支持 | 支持 |
同上,可以看到 IE 都支持,移动端也 OK。
优点:支持大部分浏览器(PC、M端都支持)。跨域资源需要 cors。样式可以自定义。
缺点:需要部署一个 view。
pdfjs-canvas
测试地址,方案比较复杂,需要自己实现一套预览配套的内容(分页、放大缩小)。
使用方式
(function() {let el = document.getElementById('canvasWrap');if (!el) {el = document.createElement('div')el.id = 'canvasWrap'document.body.appendChild(el)}el.innerHTML = ''let winW = document.documentElement.clientWidth// 加载 pdf 资源let loadingTask = pdfjsLib.getDocument('https://www.lilnong.top/static/pdf/B-4-RxJS%E5%9C%A8React%E4%B8%AD%E7%9A%84%E5%BA%94%E7%94%A8-%E9%BE%99%E9%80%B8%E6%A5%A0_.pdf')// PDF 加载完成的回调。loadingTask.promise.then(function(pdf) {console.log('pdf', pdf)// 可以获取到总页数。let pageNum = pdf.numPagesvar _pageNum = 1;var renderPageToCanvas = function(pageNum, auto=false) {// 获取其中的一个页面pdf.getPage(pageNum).then(function(page) {// you can now use *page* here_pageNum = pageNum// 获取原始大小的数据var viewport = page.getViewport({scale: 1,});var scale = (500 / viewport.width).toFixed(2)viewport = page.getViewport({scale: scale});var canvas = document.createElement('canvas');el.appendChild(canvas)var context = canvas.getContext('2d');canvas.height = viewport.height;canvas.width = viewport.width;// 创建了一个canvas画板用来存放var renderContext = {canvasContext: context,viewport: viewport};page.render(renderContext);if (auto)renderPageToCanvas(pageNum + 1, auto);});}renderPageToCanvas(_pageNum, true);canvasPrev.onclick = function() {renderPageToCanvas(Math.max(_pageNum - 1, 1));}canvasNext.onclick = function() {renderPageToCanvas(Math.min(_pageNum + 1, pdf.numPages));}}, function(reason) {console.error(reason)})}
)()
测试结果
浏览器 | 兼容性 | 配图 |
---|---|---|
Chrome(PC)(Mac) | 支持 | |
safari(PC)(Mac) | 支持 | |
Firefox(PC)(Mac) | 支持 | |
Firefox(PC)(Windows) | 支持 | |
Edge(PC)(Windows) | 支持 | |
IE(PC)(Windows) | 不支持 | |
微信(Android)(vivo x27) | 支持 | |
Chrome(Android)(vivo x27) | 支持 | |
QQ浏览器(Android)(vivo x27) | 支持 |
兼容性也还可以,需要依赖canvas。
下载 PDF
- 下载头
直接打开
- 如果浏览器不支持解析 PDF 那么可以触发下载。
- 如果浏览器支持解析 PDF,那么会变成预览。
- 这个时候我们可以给 a 标签加上 download 来触发下载。(需要同域)
总结一下
通过上面的内容我们可以实现前端预览PDF功能了,我们来总结一下各个方案的特征。
方案 | 移动端 | PC端(高版本浏览器) | PC端(IE、低版本浏览器) | 跨域 | 复制内容 | 自定义样式(分页、下载等等) |
---|---|---|---|---|---|---|
iframe | ❌(平台不支持) | ✅ | ❌(平台不支持) | ✅ | ✅ | ❌ |
embed | ❌(平台不支持) | ✅ | ❌(平台不支持) | ✅(CORS) | ✅ | ❌ |
pdfjs-view | ✅ | ✅ | ❌(ES6 新特性) | ✅(CORS) | ✅ | ✅(基于原有基础去修改) |
pdfjs-view-es5 | ✅ | ✅ | ✅ | ✅(CORS) | ✅ | ✅(基于原有基础去修改) |
pdfjs-canvas | ✅ | ✅ | ❌(canvas) | ✅(CORS) | ❌(canvas) | ✅(完全需要自己去实现一整套操作) |
好了,还需要什么内容欢迎留言啊。我给更新到里面。
转载于:https://segmentfault.com/a/1190000040331855
前端预览 PDF 文件几种方式汇总(使用PDFJS)相关推荐
- Android在线预览pdf文件的几种方式
Android原生WebView不支持预览pdf文件,ios却可以,所以Android想要实现在线预览WebView要通过其他方法,有以下几种方法: 第一种方式: andorid原生自带的pdf管理库 ...
- 前端在线预览PDF文件
如何在vue项目中预览PDF格式的文件 需求:在vue3.x项目中预览pdf文件 提供以下三种方案: 1.Vue-pdf:适用于vue2.x版本,vue3.x需要改一些源码(vue2.x项目极力推荐, ...
- html中在线预览pdf文件之pdf在线预览插件
html中在线预览pdf文件之pdf在线预览插件 最近遇到一个需求,要在html页面查看pdf生成的pdf文件! 翻来覆去找到两种办法 ,最后采用了jquery.media.js插件 方式一 将pdf ...
- html做在线预览pdf文件,html中在线预览pdf文件之pdf在线预览插件
html中在线预览pdf文件之pdf在线预览插件 最近遇到一个需求,要在html页面查看pdf生成的pdf文件! 翻来覆去找到两种办法 ,最后采用了jquery.media.js插件 方式一 将pdf ...
- 关于Android 在线预览PDF文件
本篇文章大部分为转载内容,不过最后有我自己使用后的小总结,原文地址:https://www.jianshu.com/p/9e3ff8385e6f Android PdfViewer: 项目地址: ht ...
- android 在线预览pdf文件(目前最全)
android原生webView不支持预览pdf文件,ios却可以,所以android想要实现在线预览webView要通过其他方法,有以下几种方法: 一.andorid原生自带的pdf管理库,主要提供 ...
- vue项目中预览pdf文件
一.利用浏览器自带的预览pdf // [pdfUrl] 获取pdf地址 eg:http://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pl ...
- html 在线预览pdf功能,html中在线预览pdf文件之pdf在线预览插件
html中在线预览pdf文件之pdf在线预览插件 最近遇到一个需求,要在html页面查看pdf生成的pdf文件!javascript 翻来覆去找到两种办法 ,最后采用了jquery.media.js插 ...
- android 在线预览pdf文件
android原生webView不支持预览pdf文件,ios却可以,所以android想要实现在线预览webView要通过其他方法,有以下几种方法: 1.andorid原生自带的pdf管理库,主要提供 ...
最新文章
- 适配器设计模式,简单的Java代码模拟
- Gamebryo实例学习之二BackgroundLoad
- 如何评价强gis与弱gis_什么是gis的简化解释
- Javascript特效:图片切换
- QQ 腾讯QQ(简称“QQ”)是腾讯公司开发的一款基于Internet的即时通信(IM)软件...
- 算法笔记练习 题解合集
- word护眼模式使用方法
- windows立方体桌面
- 香橙派装php_香橙派Orange Pi 3电脑开发板如何安装安卓系统
- laravel 模型局部不更新updated_at字段
- linux下gz和tar.gz、zip压缩解压
- 老衲躺地上都中枪的“ = + ”
- L-System分形小结
- 通过共享门店收款码系统,可快速获得门店现金流
- 10家不同商店50种不同商品销售量预测数据
- zpl php,php – 如何在垂直标签中垂直打印zpl条形码
- Python超简单零基础树莓派摄像头车牌识别(使用开源openalpr)笔记
- PHP开发环境搭建与工具
- Echarts中饼状图的使用
- 想让血管更长寿,这些事不要做