一个适用于任何Web项目和框架的PDF预览插件

2,026 阅读2分钟

1.png

2.png

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)

  1. 将整个文件夹复制到public目录
  2. 修改插件名字例如pdfView
  3. 运行前端项目后通过链接访问:
//访问链接
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环境内部署

  1. 直接放入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

更多前端内容欢迎关注公众号:天小天个人网