So können Sie PDF-Dateien online in H5 in der Vorschau anzeigen-H5-Tutorial-php.cn

So können Sie PDF-Dateien online in H5 in der Vorschau anzeigen

php中世界最好的语言

Freigeben： 2018-03-27 11:32:18

Original

10664 Leute haben es durchsucht

Dieses Mal zeige ich Ihnen, wie Sie in H5 eine Online-Vorschau von PDFs anzeigen können. Einführung

PDF.js ist ein tragbarer Viewer für das

Dokument

-Format (PDF), der mit HTML5 erstellt wurde.PDF.js wird von der Community betrieben und unterstützt von Mozilla Labs. Unser Ziel ist es, eine universelle, auf Webstandards basierende Plattform zum Parsen und Rendern von PDFs zu schaffen.

Open-Source-Adresse:

https://

github.com /mozilla/pdf.jsKann nicht direkt nach dem Herunterladen verwendet werden und muss neu erstellt werden. Es wird sehr mühsam sein, wenn Sie damit nicht vertraut sind

Erstelltes Paket: build_jb51.rar

Beispiel

Zitieren Sie die

-Datei, kopieren Sie sie direkt und verwenden Sie sie direkt

Ich glaube, Sie haben die Methode gemeistert, nachdem Sie den Fall hier gelesen haben Weitere spannende Informationen finden Sie im Artikel zur chinesischen PHP-Website.

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>课程详情</title>
    <style type="text/css">
    </style>
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script src="~/Scripts/plugins/pdfjs/pdf.js"></script>
    <script src="~/Scripts/plugins/pdfjs/pdf.worker.js"></script>
    <script type="text/javascript">
        var var_filepath = decodeURIComponent("@filepath");//不能跨域
        var var_win_height = $(window).height();
        $(document).ready(function () {
            resetPlayerSize(); 
        });
        $(window).resize(function () {
            resetPlayerSize();
        });
        function resetPlayerSize() {
            var_win_height = $(window).height();
            $(".tmPlayer").css({ "height": var_win_height + "px" });
        } 
    </script>
</head>
<body style="margin: 0;overflow: hidden"> 
    <p id="tmPlayer" class="tmPlayer" style="height: 557px; width: 100%; height: 100%"></p>
    <script type="text/javascript">
        $('.tmPlayer').html('<iframe frameBorder="0" scrolling="no" src="/Scripts/plugins/pdfjs/generic/web/viewer.html?file=&#39; +
            var_filepath +
            &#39;" style="width:100%; height:100%;"></iframe>');
    </script>
</body>
</html>

Nach dem Login kopieren

Empfohlene Lektüre:

Ausführliche Erklärung von Drag & Drop in H5

Wie man APP in H5 aufruft

Das obige ist der detaillierte Inhalt vonSo können Sie PDF-Dateien online in H5 in der Vorschau anzeigen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!