(一)、pdf.js 进行pdf预览
1. 先下载pdf.js 插件:https://files.cnblogs.com/files/liangziaha/pdf.7z
官网地址:https://mozilla.github.io/pdf.js/getting_started/#download(pdf.js)
git地址:https://github.com/mozilla/pdf.js(pdf.js)
2.先展示一下预览效果
3.这里我们使用的 layui的弹出层模块进行弹出预览pdf(这里layer 弹出层怎么使用就不记录了,自己去官网搜吧)
在引入layui之后,我们下载的pdf文件放到我们的项目下,可以创建一个js文件,放到此文件下
4.这时我们使用pdf在线预览时,可以使用layer 弹出 iframe 层的方法进行pdf预览
// pdf在线预览 function showFile(url) { layer.open({ type: 1, title: "信息(点击“+”号放大查看条款)", area: ["100%", "100%"], //宽高 content: "<iframe src='./js/pdf/web/viewer.html?file=" + url + "' style='100%;height:100%'></iframe>" }); }
注意:这里的 iframe 的src路径为 你下载的pdf 文件的相对路径,url是你的pdf地址
5.这里在本地预览可能会遇到跨域的问题,放到服务器上就可以正常预览pdf
(二)、h5pdf.js
git地址:https://gitee.com/pjjg/pdfh5 (下载先来打开Demo就知道怎么用了,本地预览不了,放到服务器上就可以)
预览效果:
根据大家需求选择预览方式即可