移動端展示pdf（在線打開pdf）

本文轉載自查看原文 2018-01-02 18:02 15530 javascript知識

需求：在手機微信瀏覽器或者其他瀏覽器中打開pdf

准備：前端插件：查找pdf.js 官網地址：http://mozilla.github.io/pdf.js/ 在官網中下載demo

注釋：pdf的demo 必須在web項目中打開，所以必須得部署web項目

官方API,如下

畫方框的文件目錄結構，請不要更改，直接在下載的demo中拷貝出來

demo 地址：

web 項目中文件的目錄

testPdf.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
</head>
<body>
        <button>在線瀏覽pdf</button>
</body>
<script type="text/javascript">
    function browserPdf()
    {
        $.ajax({
            url: 'http://192.168.1.110:8060/mypdf/testPDF.pdf,
            type: "get",
            success: function(xhr, data){
                if (navigator.userAgent.indexOf('Android') > -1) {
                    //判斷移動端是android 還是ios ，若是android 則要借助pdf插件
                    window.location.href = "http://192.168.1.110:8060/js/web/viewer.html?file="+url;
                } else {
                    //ios直接打開pdf
                    //window.location.href = url;
                    window.location.href = "http://192.168.1.110:8060/js/web/viewer.html?file="+url;
                }
            },
            error: function(){
                        //window.location.href = '${ctx}/core/user.androidPdf.do?mid='+mid+"&name="+storagename+"&realname="+realname;
                window.location.href = "http://192.168.1.110:8060/js/web/viewer.html?file="+url;
            }
        });
    }
    
    
</script>
</html>

項目啟動，之后進行訪問

效果圖：

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 處理移動端pdf展示問題簡單的移動端打開pdf文件。 Vue-base64移動端PDF展示在線pdf請你謹慎打開 php在線打開pdf文件移動端pdf在線預覽，使用pdf.js插件實現用pdf.js實現在移動端在線預覽pdf文件移動端pdf預覽---vue-pdf PDF.js實現在線展示pdf文件 FlexPaper：使用flash在線展示pdf