Heim > Artikel > Web-Frontend > So verwenden Sie H5 zur Vorschau von Dokumenten im PDF-Format
So verwenden Sie H5 zur Vorschau von Dokumenten im PDF-Format
- php中世界最好的语言Original
- 2018-01-19 09:23:465147Durchsuche
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">
$('.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>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!