移动端pdf在线预览,使用pdf.js插件实现

(一)、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='width:100%;height:100%'></iframe>"
        });
    }

注意:这里的 iframe 的src路径为 你下载的pdf 文件的相对路径,url是你的pdf地址

5.这里在本地预览可能会遇到跨域的问题,放到服务器上就可以正常预览pdf

(二)、h5pdf.js

git地址:https://gitee.com/pjjg/pdfh5 (下载先来打开Demo就知道怎么用了,本地预览不了,放到服务器上就可以)

预览效果:

 

 

根据大家需求选择预览方式即可

posted @ 2020-03-13 15:26  男孩亮亮  阅读(7975)  评论(0编辑  收藏  举报