Heim >Web-Frontend >H5-Tutorial >So können Sie PDF-Dateien online in H5 in der Vorschau anzeigen
Dieses Mal zeige ich Ihnen, wie Sie in H5 eine Online-Vorschau von PDFs anzeigen können. 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.jsKann 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
Ich glaube, Sie haben die Methode gemeistert, nachdem Sie den Fall hier gelesen haben Weitere spannende Informationen finden Sie im Artikel zur chinesischen PHP-Website.<!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>
Empfohlene Lektüre:
Ausführliche Erklärung von Drag & Drop in H5Wie man APP in H5 aufruftDas obige ist der detaillierte Inhalt vonSo können Sie PDF-Dateien online in H5 in der Vorschau anzeigen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!