Prévisualiser le code au format PDF en ligne en HTML5-Tutoriel H5-php.cn

Prévisualiser le code au format PDF en ligne en HTML5

不言

Libérer： 2018-06-12 14:41:16

original

6668 Les gens l'ont consulté

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>

Copier après la connexion

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!