一、下载pdf.js
- GitHub下载地址:https://github.com/mozilla/pdf.js/releases/tag/v2.5.207
- 根据自己需要下载
- 下载完成后解压,解压目录如下图所示
二、将pdfjs导入项目,进行测试
- 在项目 /resource/static/ 下新建一个pdfjs目录,将解压后的文件复制到该目录下
- 在html文件中添加下述代码,可以查看默认的PDF文件
window.open("/pdfjs/web/viewer.html");
(1)查看viewer.js
文件中默认设置的PDF文件
(2)访问成功,出现下述页面
3. 将上述viewer.js
中的 value
值更改为目标PDF所在的位置看是否能正确访问(可能会涉及到跨域问题,在nginx中配置解决)
4. 若出现下述错误,将viewer.js
中的下述代码注释即可正确访问
if (origin !== viewerOrigin && protocol !== "blob:") {
throw new Error("file origin does not match viewer's");
}
三、编辑viewer.html
文件,禁用打印和下载按钮,如下图所示
四、查看不同的PDF文件
- 将
viewer.js
文件中的value
值设置为空;也可不设置为空,当资源获取不到的时候会默认展示value
里的PDF文件
defaultUrl: {
value: "",
kind: OptionKind.VIEWER
},
2. 通过传参的方式,来显示不同的PDF文件,类似于下述代码所示,设置对于的点击事件传递不同的URL,查看PDF文件
var url = "http://localhost:8080/pdf.pdf"
window.open("/pdfjs/web/viewer.html?file="+url);
五、pdfjs-2.5.207相关压缩包
链接:https://pan.baidu.com/s/1DGx4bPILDG6wex86ckZzyA
提取码:yhr6
六、遇到的问题及解决方案
1、Faild to load resource:the server responded with a status of 404()
https://blog.csdn.net/jadeandplum/article/details/110471333