pdf.js使用

作者	时间	说明
雨中星辰	2021-10-08

概述

pdf.js是用于解析和呈现 PDF的通用、基于 Web 标准的工具

下载发布包

官方下载地址：http://mozilla.github.io/pdf.js/getting_started/#download

目录说明

│   ├── pdf.js                             - 显示层
│   ├── pdf.js.map                         - 显示层source map
│   ├── pdf.worker.js                      - 核心层
│   └── pdf.worker.js.map                  - 核心层source map
├── web/
│   ├── cmaps/                             - character maps (required by core)
│   ├── compressed.tracemonkey-pldi-09.pdf - PDF文件，用于测试目的
│   ├── debugger.js                        - 用于debug
│   ├── images/                            - 图标
│   ├── locale/                            - 本地化文件
│   ├── viewer.css                         - 样式
│   ├── viewer.html                        - 用于展示的html文件
│   ├── viewer.js                          - 展示层
│   └── viewer.js.map                      - 展示层source map
└── LICENSE

集成pdf.js

按照图示将目录拷贝到项目中即可。

image-20211008142112387

测试

首先使用自带的pdf进行测试，验证功能是否可用：

http://0.0.0.0:4545/poseidon-admin-ui/web/viewer.html?file=compressed.tracemonkey-pldi-09.pdf

image-20211008142652719

使用动态的web url:

http://0.0.0.0:4545/poseidon-admin-ui/web/viewer.html?file=http://192.168.5.60:9988/file/preview/77687cd1-da22-4b98-848c-cafc0cc61793

http://192.168.5.60:9988/file/preview/77687cd1-da22-4b98-848c-cafc0cc61793为pdf的web地址。

image-20211008143116491

从官方的常见问题查询可知pdf.js默认情况下是不支持跨域的。

image-20211008144159891

根据错误提示在pdf.js的源码中搜索

image-20211008143437078

尝试将这块代码进行注释：

image-20211008143601186

再次测试预览：

image-20211008143634882

跨域问题解决。