js 实现 pdf 在线预览打印（完整版）

php是最好的语言

Lepaskan： 2018-08-09 10:34:37

asal

13722 orang telah melayarinya

今天想写的内容因为网上有用的太少了，自己半摸索的实现了。

1.说下需求：点击标题跳转预览的pdf 页，下载功能可选【最好有】。

2.实现结果：

3.代码实现：

依赖pdf.js 【需要下载完整控件】

下载官网：http://mozilla.github.io/pdf.js/

点击 ‘Download ’ 到下载页

git 克隆或者下载。

下载后文件长这样：

【重点在后面项目如何部署组装】

1.新建一个空项目把文件放到项目根目录下：

红色圈里是官网下载的就改个文件名字，然后拖进项目里，完全不用动里面任何文件记住，有需要另说。

绿色是我写的【dowwn.html 是测试文件;static 放pdf 文件】下面贴代码：

list.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="full-screen" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <meta name="format-detection" content="address=no">
    <title>list</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .title{
            background: #e50041;
            color: #ffffff;
            font-size: 16px;
        }
        .title{
            padding:10px 10px ;
        }
   ul{
       padding:0px 10px 10px 10px ;
   }
        li{
            list-style: none;
            border-bottom: 1px solid #eeeeee;
            height: 50px;
            line-height:50px;
        }
        a{
            text-decoration: none;
            color: #000;
        }
        .leftImg{
            width: 30px;
            vertical-align: middle;

        }
        .next{
            float: right;
            /*vertical-align: middle;*/
            margin-top: 4.5%;

        }
    </style>
</head>
<body>
<p class="title">产品说明书</p>
<ul>
    <li dataSrc = &#39;KD-122LA火灾探测报警器说明书.pdf&#39; onclick="fun(this)">
        <img class="leftImg" src="img/1.png" alt=""> <span href="">KD-122LA火灾探测报警器说明书ccc</span>  <img class="next" src="img/next.png" alt="">
    </li>
    <li dataSrc = &#39;KD-212LA可燃气体探测器说明书.pdf&#39; onclick="fun(this)">
        <img class="leftImg" src="img/1.png" alt=""> <span href="">KD-212LA 可燃气体探测器说明书</span>  <img class="next" src="img/next.png" alt="">
    </li>
    <li dataSrc = &#39;KD-216LA可燃气体探测器说明书.pdf&#39; onclick="fun(this)">
        <img class="leftImg" src="img/1.png" alt=""> <span href="">KD-216LA可燃气体探测器说明书</span>  <img class="next" src="img/next.png" alt="">
    </li>
    <li dataSrc = &#39;Kd-122LA_KD-601系统遥控器使用说明.pdf&#39; onclick="fun(this)">
        <img class="leftImg" src="img/1.png" alt=""> <span href="">Kd-122LA KD-601系统遥控器使用说明</span>  <img class="next" src="img/next.png" alt="">
    </li>
    <li dataSrc = &#39;KD-602LA_SOS一键救助使用说明书.pdf&#39; onclick="fun(this)">
        <img class="leftImg" src="img/1.png" alt=""> <span href="">KD-602LA  SOS一键救助使用说明书</span>  <img class="next" src="img/next.png" alt="">
    </li>
    <li dataSrc = &#39;KD-701LA_溢水探测器使用说明书.pdf&#39; onclick="fun(this)">
        <img class="leftImg" src="img/1.png" alt=""> <span href="">KD-701LA  溢水探测器使用说明书</span>  <img class="next" src="img/next.png" alt="">
    </li>
    <li dataSrc = &#39;KD-702LA红外人体移动探测器说明书.pdf&#39; onclick="fun(this)">
        <img class="leftImg" src="img/1.png" alt=""> <span href="">KD-702LA红外人体移动探测器说明书</span>  <img class="next" src="img/next.png" alt="">
    </li>
    <li dataSrc = &#39;KD-703LA_门窗探测器使用说明书.pdf&#39; onclick="fun(this)">
        <img class="leftImg" src="img/1.png" alt=""> <span href="">KD-703LA  门窗探测器使用说明书</span>  <img class="next" src="img/next.png" alt="">
    </li>
    <li dataSrc = &#39;KD-805A_WiFi系统主机使用说明书_V1.00.pdf&#39; onclick="fun(this)">
        <img class="leftImg" src="img/1.png" alt=""> <span href="">KD-805A  WiFi系统主机使用说明书_V1.00</span>  <img class="next" src="img/next.png" alt="">
    </li>
    <li dataSrc = &#39;WIFI智慧家庭安防系统操作说明书_v0.01.pdf&#39;onclick="fun(this)">
        <img class="leftImg" src="img/1.png" alt=""> <span href="">WIFI智慧家庭安防系统操作说明书_v0.01</span>  <img class="next" src="img/next.png" alt="">
    </li>


</ul>
<script src="js/jquery.min.js"></script>
<script>
    function fun(e){
     // console.log(e);
     var dataSrc = $(e).attr(&#39;dataSrc&#39;);
     //    console.log(dataSrc);
     //    sessionStorage.setItem(&#39;dataSrc&#39;,dataSrc);
     //    window.location.href=&#39;index.html&#39;
        var urlSrc =  &#39;http://testweixin.kingdun.net.cn/pdf/static/&#39;+dataSrc;
        $.ajax({
            url: urlSrc,
            type: "get",
            success: function(xhr, data){
                if (navigator.userAgent.indexOf(&#39;Android&#39;) > -1) {
                    //判断移动端是android 还是ios ，若是android 则要借助pdf插件
                    window.location.href = "http://testweixin.kingdun.net.cn/pdf/pdfjs/web/viewer.html?file="+urlSrc;
                } else {
                    //ios直接打开pdf
                    //window.location.href = url;
                    window.location.href = "http://testweixin.kingdun.net.cn/pdf/pdfjs/web/viewer.html?file="+urlSrc;
                }
            },
            error: function(){
                //window.location.href = &#39;${ctx}/core/user.androidPdf.do?mid=&#39;+mid+"&name="+storagename+"&realname="+realname;
                window.location.href = "http://testweixin.kingdun.net.cn/pdf/js/web/viewer.html?file="+urlSrc;
            }
        });
    }
</script>
</body>

</html>

Salin selepas log masuk

【兼容性】：苹果手机：直接预览，手机系统自带的，但是不能下载（有得必有失），可以在别的应用中打开例如 wps。

安卓：可预览，可下载，在手机默认浏览器打开可支持下载，本人小米8，uc浏览器下载乱码，但是小米自带浏览器可下载pdf文件。

交差。

彩蛋：down.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="full-screen" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <meta name="format-detection" content="address=no">
    <title>list</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .title{
            background: #e50041;
            color: #ffffff;
            font-size: 16px;
        }
        .title{
            padding:10px 10px ;
        }
   ul{
       padding:0px 10px 10px 10px ;
   }
        li{
            list-style: none;
            border-bottom: 1px solid #eeeeee;
            height: 50px;
            line-height:50px;
        }
        a{
            text-decoration: none;
            color: #000;
        }
        .leftImg{
            width: 30px;
            vertical-align: middle;

        }
        .next{
            float: right;
            /*vertical-align: middle;*/
            margin-top: 4.5%;

        }
    </style>
</head>
<body>
<p class="title">产品说明书</p>

<a href="static/1.pdf">00001</a>


</body>

</html>

Salin selepas log masuk

哈哈，直接a 标签 href 跳转 pdf文件；也是ok的哦！【苹果手机：直接预览；；；安卓:下载链接】