PDF预览插件
(一) 版本介绍
- 普通型版本V2.8.335
- 大小11.4 MB
- 不兼容低版本浏览器
- 兼容型版本V2.8.335
- 大小14.0 MB
- 能兼容低版本浏览器
(二) 优点说明
- 部署即可快速使用,无需开发
- 只需Web环境即可运行
- 旋转、目录、下载、预览、缩放等功能丰富
- 移动端PC端自动适配
- 本地文件,PDF后缀链接,PDF下载链接皆可
(三) 缺点说明
- 功能集中度高,定制修改较麻烦
- 文件较大(但是可独立在项目外)
- 自带跨域预需要注释几行源码解决
使用方法
1. 下载插件
下载地址
//可自由选择是否使用低浏览器兼容版。
http://mozilla.github.io/pdf.js/getting_started/#download
2. 复制插件
将下载好的插件解压并复制整个项目文件夹
3. 部署插件
(一) 前端框内部署(例如vue)
- 将整个文件夹复制到public目录
- 修改插件名字例如pdfView
- 运行前端项目后通过链接访问:
//访问链接
http://localhost:8080/pdfView/web/viewer.html?file=文件链接或地址
//远程PDF后缀文件或者PDF下载链接
//url需要encodeURIComponent()编码
http://localhost:8080/pdfView/web/viewer.html?file=url
//public下本地文件
//直接通过本地地址访问
//例如访问:/public/file/test.pdf 文件
http://localhost:8080/pdfView/web/viewer.html?file=/file/test.pdf
(二) 项目页面内访问使用
//需要定义好宽高
<frame src="http://localhost:8080/pdfView/web/viewer.html?file=文件链接或地址"/>
(三) 其他Web环境内部署
- 直接放入Web项目目录通过网站链接访问即可
http://域名/pdfView/web/viewer.html?file=文件链接或地址
(四) 跨域解决
注释插件viewer.js里面的如下内容
// if (origin !== viewerOrigin && protocol !== "blob:") {
// throw new Error("file origin does not match viewer's");
// }
(五)预览插件URL后的参数文档
https://github.com/mozilla/pdf.js/wiki/Viewer-options