Vorschau des Codes im PDF-Format online in HTML5-H5-Tutorial-php.cn

Vorschau des Codes im PDF-Format online in HTML5

不言

Freigeben： 2018-06-12 14:41:16

Original

6637 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich der Beispielcode für die HTML5-Online-Vorschau von PDF vorgestellt. Der Herausgeber findet ihn recht gut, daher werde ich ihn jetzt mit Ihnen teilen und als Referenz verwenden. Kommen Sie und schauen Sie sich den Editor an

Einführung

PDF.js ist ein Portable Document Format (PDF)-Viewer, der mit HTML5 erstellt wurde.

PDF.js ist eine Community -gesteuert 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 .js

kann nicht direkt nach dem Herunterladen verwendet werden und muss neu erstellt werden. Wenn Sie damit nicht vertraut sind, wird es sehr problematisch sein

Erstelltes Paket: build_jb51.rar

Beispiel

Zitieren Sie die Datei, kopieren Sie sie direkt unten und verwenden Sie sie direkt

<!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

Das Obige ist der gesamte Inhalt dieses Artikels Ich hoffe, es wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website!

Verwandte Empfehlungen:

So implementieren Sie die Live-Video-Funktion in HTML5

HTML5 Implementieren Sie Methoden für den Zugriff auf lokale Dateien

Das obige ist der detaillierte Inhalt vonVorschau des Codes im PDF-Format online in HTML5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!