Maison > Article > interface Web > js implémente la prévisualisation et l'impression en ligne du pdf (version complète)

js implémente la prévisualisation et l'impression en ligne du pdf (version complète)

php是最好的语言original: 2018-08-09 10:34:3713674parcourir

Ce que je veux écrire aujourd'hui, c'est parce qu'il y a trop peu de choses utiles sur Internet, alors je m'en suis rendu compte sans enthousiasme.

1. Faites-nous part de vos besoins : cliquez sur le titre pour accéder à la page PDF prévisualisée, et la fonction de téléchargement est facultative [de préférence].

js implémente la prévisualisation et limpression en ligne du pdf (version complète)

2. Résultats de la mise en œuvre :

js implémente la prévisualisation et limpression en ligne du pdf (version complète)

3. Mise en œuvre du code :

Dépend du pdf. js [Besoin de télécharger le contrôle complet]

Télécharger le site officiel : http://mozilla.github.io/pdf.js/

Cliquez sur "Télécharger" pour accéder à la page de téléchargement

js implémente la prévisualisation et limpression en ligne du pdf (version complète)

cloner ou télécharger git.

Après le téléchargement, le fichier ressemble à ceci :

js implémente la prévisualisation et limpression en ligne du pdf (version complète)

[L'accent est mis plus tard sur la façon de déployer et d'assembler le projet]

1. Créez un nouveau projet vide et placez le fichier. Placez-le dans le répertoire racine du projet :

js implémente la prévisualisation et limpression en ligne du pdf (version complète)

Le cercle rouge est téléchargé depuis le site officiel. Modifiez simplement le nom du fichier et faites-le glisser dans le projet sans y toucher du tout. N'oubliez pas les documents si nécessaire.

La couleur verte est écrite par moi [dowwn.html est un fichier test ; statique est un fichier pdf] Collez le code ci-dessous :

list.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="full-screen" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <meta name="format-detection" content="address=no">
    <title>list</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .title{
            background: #e50041;
            color: #ffffff;
            font-size: 16px;
        }
        .title{
            padding:10px 10px ;
        }
   ul{
       padding:0px 10px 10px 10px ;
   }
        li{
            list-style: none;
            border-bottom: 1px solid #eeeeee;
            height: 50px;
            line-height:50px;
        }
        a{
            text-decoration: none;
            color: #000;
        }
        .leftImg{
            width: 30px;
            vertical-align: middle;

        }
        .next{
            float: right;
            /*vertical-align: middle;*/
            margin-top: 4.5%;

        }
    </style>
</head>
<body>
<p class="title">产品说明书</p>
<ul>
    <li dataSrc = &#39;KD-122LA火灾探测报警器说明书.pdf&#39; onclick="fun(this)">
        <img class="leftImg" src="img/js implémente la prévisualisation et limpression en ligne du pdf (version complète)" alt=""> <span href="">KD-122LA火灾探测报警器说明书ccc</span>  <img class="next" src="img/next.png" alt="">
    </li>
    <li dataSrc = &#39;KD-212LA可燃气体探测器说明书.pdf&#39; onclick="fun(this)">
        <img class="leftImg" src="img/js implémente la prévisualisation et limpression en ligne du pdf (version complète)" alt=""> <span href="">KD-212LA 可燃气体探测器说明书</span>  <img class="next" src="img/next.png" alt="">
    </li>
    <li dataSrc = &#39;KD-216LA可燃气体探测器说明书.pdf&#39; onclick="fun(this)">
        <img class="leftImg" src="img/js implémente la prévisualisation et limpression en ligne du pdf (version complète)" alt=""> <span href="">KD-216LA可燃气体探测器说明书</span>  <img class="next" src="img/next.png" alt="">
    </li>
    <li dataSrc = &#39;Kd-122LA_KD-601系统遥控器使用说明.pdf&#39; onclick="fun(this)">
        <img class="leftImg" src="img/js implémente la prévisualisation et limpression en ligne du pdf (version complète)" alt=""> <span href="">Kd-122LA KD-601系统遥控器使用说明</span>  <img class="next" src="img/next.png" alt="">
    </li>
    <li dataSrc = &#39;KD-602LA_SOS一键救助使用说明书.pdf&#39; onclick="fun(this)">
        <img class="leftImg" src="img/js implémente la prévisualisation et limpression en ligne du pdf (version complète)" alt=""> <span href="">KD-602LA  SOS一键救助使用说明书</span>  <img class="next" src="img/next.png" alt="">
    </li>
    <li dataSrc = &#39;KD-701LA_溢水探测器使用说明书.pdf&#39; onclick="fun(this)">
        <img class="leftImg" src="img/js implémente la prévisualisation et limpression en ligne du pdf (version complète)" alt=""> <span href="">KD-701LA  溢水探测器使用说明书</span>  <img class="next" src="img/next.png" alt="">
    </li>
    <li dataSrc = &#39;KD-702LA红外人体移动探测器说明书.pdf&#39; onclick="fun(this)">
        <img class="leftImg" src="img/js implémente la prévisualisation et limpression en ligne du pdf (version complète)" alt=""> <span href="">KD-702LA红外人体移动探测器说明书</span>  <img class="next" src="img/next.png" alt="">
    </li>
    <li dataSrc = &#39;KD-703LA_门窗探测器使用说明书.pdf&#39; onclick="fun(this)">
        <img class="leftImg" src="img/js implémente la prévisualisation et limpression en ligne du pdf (version complète)" alt=""> <span href="">KD-703LA  门窗探测器使用说明书</span>  <img class="next" src="img/next.png" alt="">
    </li>
    <li dataSrc = &#39;KD-805A_WiFi系统主机使用说明书_V1.00.pdf&#39; onclick="fun(this)">
        <img class="leftImg" src="img/js implémente la prévisualisation et limpression en ligne du pdf (version complète)" alt=""> <span href="">KD-805A  WiFi系统主机使用说明书_V1.00</span>  <img class="next" src="img/next.png" alt="">
    </li>
    <li dataSrc = &#39;WIFI智慧家庭安防系统操作说明书_v0.01.pdf&#39;onclick="fun(this)">
        <img class="leftImg" src="img/js implémente la prévisualisation et limpression en ligne du pdf (version complète)" alt=""> <span href="">WIFI智慧家庭安防系统操作说明书_v0.01</span>  <img class="next" src="img/next.png" alt="">
    </li>


</ul>
<script src="js/jquery.min.js"></script>
<script>
    function fun(e){
     // console.log(e);
     var dataSrc = $(e).attr(&#39;dataSrc&#39;);
     //    console.log(dataSrc);
     //    sessionStorage.setItem(&#39;dataSrc&#39;,dataSrc);
     //    window.location.href=&#39;index.html&#39;
        var urlSrc =  &#39;http://testweixin.kingdun.net.cn/pdf/static/&#39;+dataSrc;
        $.ajax({
            url: urlSrc,
            type: "get",
            success: function(xhr, data){
                if (navigator.userAgent.indexOf(&#39;Android&#39;) > -1) {
                    //判断移动端是android 还是ios ，若是android 则要借助pdf插件
                    window.location.href = "http://testweixin.kingdun.net.cn/pdf/pdfjs/web/viewer.html?file="+urlSrc;
                } else {
                    //ios直接打开pdf
                    //window.location.href = url;
                    window.location.href = "http://testweixin.kingdun.net.cn/pdf/pdfjs/web/viewer.html?file="+urlSrc;
                }
            },
            error: function(){
                //window.location.href = &#39;${ctx}/core/user.androidPdf.do?mid=&#39;+mid+"&name="+storagename+"&realname="+realname;
                window.location.href = "http://testweixin.kingdun.net.cn/pdf/js/web/viewer.html?file="+urlSrc;
            }
        });
    }
</script>
</body>

</html>

【Compatibilité】 : Téléphone mobile Apple : Aperçu directement, il est livré avec le système de téléphonie mobile, mais il ne peut pas être téléchargé (il y a des gains et des pertes), il peut être ouvert dans d'autres applications comme wps.

Télécharger le fichier PDF.

Crossover.

Easter egg : down.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="full-screen" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <meta name="format-detection" content="address=no">
    <title>list</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .title{
            background: #e50041;
            color: #ffffff;
            font-size: 16px;
        }
        .title{
            padding:10px 10px ;
        }
   ul{
       padding:0px 10px 10px 10px ;
   }
        li{
            list-style: none;
            border-bottom: 1px solid #eeeeee;
            height: 50px;
            line-height:50px;
        }
        a{
            text-decoration: none;
            color: #000;
        }
        .leftImg{
            width: 30px;
            vertical-align: middle;

        }
        .next{
            float: right;
            /*vertical-align: middle;*/
            margin-top: 4.5%;

        }
    </style>
</head>
<body>
<p class="title">产品说明书</p>

<a href="static/1.pdf">00001</a>


</body>

</html>

Haha, utilisez simplement la balise a href pour accéder au fichier pdf ; c'est bien aussi ! [iPhone : aperçu direct ; Android : lien de téléchargement]

js implémente la prévisualisation et limpression en ligne du pdf (version complète)

Recommandations associées :

Fonction d'impression JS Le code peut réaliser un aperçu avant impression, des paramètres d'impression, etc.

JavaScript peut réaliser une impression, un aperçu avant impression, des paramètres d'impression

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!

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：Cas frontal : utilisez js pour implémenter la suppression, le tri et le filtrage des lignes du tableauArticle suivant：Cas frontal : utilisez js pour implémenter la suppression, le tri et le filtrage des lignes du tableau

Articles Liés

Voir plus