Maison > interface Web > Tutoriel H5 > le corps du texte

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

不言
Libérer: 2018-06-12 14:41:16
original
6637 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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!