So verwenden Sie H5 zur Vorschau von Dokumenten im PDF-Format-HTML-Tutorial-php.cn

So verwenden Sie H5 zur Vorschau von Dokumenten im PDF-Format

php中世界最好的语言

Freigeben： 2018-01-19 09:23:46

Original

5214 Leute haben es durchsucht

Dieses Mal zeige ich Ihnen, wie Sie mit H5 eine Vorschau von Dokumenten im PDF-Format anzeigen können. Was sind die Vorsichtsmaßnahmen für die Vorschau von Dokumenten im PDF-Format in H5?

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.js

Kann 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

<!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">
    <div id="tmPlayer" class="tmPlayer" style="height: 557px; width: 100%; height: 100%"></div>
 
    <script type="text/javascript">
        $(&#39;.tmPlayer&#39;).html(&#39;<iframe frameBorder="0" scrolling="no" src="/Scripts/plugins/pdfjs/generic/web/viewer.html?file=&#39; +
            var_filepath +
            &#39;" style="width:100%; height:100%;"></iframe>&#39;);
    </script>
 
</body>
</html>

Nach dem Login kopieren

Ich glaube, Sie beherrschen die Methode, nachdem Sie diese Fälle gelesen haben Für weitere spannende Informationen beachten Sie bitte andere verwandte Themen im chinesischen PHP-Website-Artikel!

Verwandte Lektüre:

So implementieren Sie die Tabellen-Maus-Drag-Sortierung in HTML

Neue Funktionen von HTML 5. Verwendung

Html, um den Berichtseffekt der dynamischen Anzeige von Farbblöcken zu erzielen

Das obige ist der detaillierte Inhalt vonSo verwenden Sie H5 zur Vorschau von Dokumenten im PDF-Format. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!