html5和js实现移动端浏览器pdf在线预览和下载

作者：七棵菜日期：2022-11-30 栏目：计算机分类：1 人气：208

站在巨人的肩膀上，我们可以借助`pdf.js`实现pdf的在线预览和下载

- 去`pdf.js`的官网下载稳定版本的[Prebuilt (ES5-compatible)](http://mozilla.github.io/pdf.js/getting_started/)

```
├── build/
│   ├── pdf.js                             - display layer
│   ├── pdf.js.map                         - display layer's source map
│   ├── pdf.worker.js                      - core layer
│   └── pdf.worker.js.map                  - core layer's source map
├── web/
│   ├── cmaps/                             - character maps (required by core)
│   ├── compressed.tracemonkey-pldi-09.pdf - PDF file for testing purposes
│   ├── debugger.js                        - helpful debugging features
│   ├── images/                            - images for the viewer and annotation icons
│   ├── locale/                            - translation files
│   ├── viewer.css                         - viewer style sheet
│   ├── viewer.html                        - viewer layout
│   ├── viewer.js                          - viewer layer
│   └── viewer.js.map                      - viewer layer's source map
└── LICENSE
```

- 在浏览器中打开`web/viewer.html`，默认的`pdf`会被加载进来，浏览器标题变成pdf文件名

&gt; 不支持`file`协议的pdf路径，file:// urls

- 更改默认`pdf`文件，在`web/viewer.js`中搜索默认的pdf，把pdf换掉即可

- 更改页面顶部的工具按钮，修改`web/viewer.html`，自动检测根据客户端类型显示不同的按钮

- 更改样式，修改`web/viewer.css`

#### 高级用法

[自定义功能和高级用法](http://mozilla.github.io/pdf.js/examples/)

#### 鸣谢

- [pdf.js](http://mozilla.github.io/pdf.js/)

标签： pdf.js pdf下载 pdf在线预览

上一篇：Found the synthetic property @showTooltip. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application. 下一篇：使用 javascript 实现回到页面顶部功能

html5和js实现移动端浏览器pdf在线预览和下载

随便看看

留言