recherche

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:166667parcourir

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

Exemple

Citer 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=&#39; +
            var_filepath +
            &#39;" 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!

php html5 for format JS github https
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Lecture vidéo en ligne implémentée en HTML5Article suivant：Lecture vidéo en ligne implémentée en HTML5

Articles Liés

Voir plus