Se7en's Blog|Learn and live

PDF.js更优雅的pdf在线预览体验

字数统计: 324阅读时长: 1 min
2018/08/19 Share

image

前段时间无意间遇到了pdf在线预览的问题,查了一下,发现H5有标签直接套用。

例子:

1
<embed></embed>

缺点:加载的速度差,文件稍微大一点,页面就会陷入长期的一个停顿。如果是以base64传输数据的,等待时间会更长,且移动端对这个标签的支持很不友好

1
<iframe></iframe>

缺点:一遇IE深似海,从此兼容是路人,同样的移动端浏览一样差强人意

这些问题让我一开始很难受,后来发现了一个神奇的项目:PDF.js
,完美的解决了这个移动端不兼容的问题。

image

这是源代码目录结构:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
├── LICENSE
├── build/
│ ├── pdf.js - display layer
│ └── pdf.worker.js - core layer
└── web/
├── cmaps/ - character maps(required by core)
├── compressed.tracemonkey-pldi-09.pdf - test pdf
├── debugger.js - helpful pdf debugging features
├── images/ - images for the viewer and annotation icons
├── l10n.js - localization
├── locale/ - translation files
├── viewer.css - viewer style sheet
├── viewer.html - viewer html
└── viewer.js - viewer layer

使用方法:

我们只需用到viewer.html这个文件

首先将pdf放入文件夹中,然后构造如下链接:

http://xxx.com/pdfjs/web/viewer.html?file=pdf/test.pdf

访问即可查看,可以发现无论是加载速度,还是客户端兼容性都是不错的。

CATALOG