Maison > Article > interface Web > Prévisualiser le code au format PDF en ligne en HTML5
Prévisualiser le code au format PDF en ligne en HTML5
- 不言original
- 2018-06-12 14:41:166578parcourir
Cet article présente principalement l'exemple de code pour l'aperçu en ligne HTML5 du PDF. L'éditeur pense qu'il est plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence. Venez jeter un œil avec l'éditeur
Introduction
PDF.js est une visionneuse au format PDF (Portable Document Format) construite avec HTML5.
PDF.js est une communauté -piloté et pris en charge par Mozilla Labs. Notre objectif est de créer une plate-forme à usage général basée sur des normes Web pour l'analyse et le rendu des PDF.
Adresse open source : https://github.com/mozilla/pdf. .js
ne peut pas être utilisé directement après le téléchargement et doit être reconstruit. Si vous ne le connaissez pas, ce sera très gênant
Package construit : build_jb51.rar
ExempleCiter le fichier, vous pouvez le copier directement ci-dessous et l'utiliser directement<!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>
Ce qui précède est l'intégralité du contenu de cet article, j'espère qu'il sera utile à l'étude de chacun, plus connexe Veuillez faire attention au site Web PHP chinois pour le contenu ! Recommandations associées :
Comment implémenter la fonction vidéo en direct en HTML5
HTML5
Implémenter des méthodes pour accéder aux fichiers locaux
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!