Heim > Artikel > Web-Frontend > Vorschau des Codes im PDF-Format online in HTML5

Vorschau des Codes im PDF-Format online in HTML5

不言Original: 2018-06-12 14:41:166578Durchsuche

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>

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!

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：Online-Videowiedergabe in HTML5 implementiertNächster Artikel：Online-Videowiedergabe in HTML5 implementiert

In Verbindung stehende Artikel

Mehr sehen