Heim > Artikel > Web-Frontend > So können Sie PDF-Dateien online in H5 in der Vorschau anzeigen

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

php中世界最好的语言Original: 2018-03-27 11:32:1810591Durchsuche

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>

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!

php html5 for format JS github https

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Ausführliche Erklärung von H5 Drag & DropNächster Artikel：Ausführliche Erklärung von H5 Drag & Drop

In Verbindung stehende Artikel

Mehr sehen