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=' +
var_filepath +
'" 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!
