Utilisez js pour convertir du HTML en PDF-js tutoriel-php.cn

Utilisez js pour convertir du HTML en PDF

php中世界最好的语言

Libérer： 2018-03-20 09:55:06

original

3390 Les gens l'ont consulté

Cette fois, je vais vous apporter les précautions pour utiliser js pour convertir du html en pdf, et pour utiliser js pour convertir du html en pdf. Ce qui suit est un cas pratique, jetons un coup d'œil.

J'ai donc réalisé un petit boitier pour tester cette fonction.

<body>
    <!-- PDF -->
    <p class="bb" id="ctn">
        <p class="anliu" id="anliu">生成PDF</p>
  
    </p></body><script src="../../Scripts/aps/html2canvas.js"></script><script src="../../Scripts/aps/jsPdf.debug.js"></script>

Copier après la connexion

Méthode d'écriture js

window.onload =function(){var downPdf = document.getElementById("anliu");
downPdf.onclick = function() {
   html2canvas(document.body, {
        onrendered: function(canvas) {                //返回图片URL，参数：图片格式和清晰度(0-1)
                  var pageData = canvas.toDataURL('image/jpeg', 1.0);                  //方向默认竖直，尺寸ponits，格式a4【595.28,841.89]
                  var pdf = new jsPDF('', 'pt', 'a4');                  //需要dataUrl格式
                  pdf.addImage(pageData, 'JPEG', 0, 0, 595.28, 592.28/canvas.width * canvas.height );
                  pdf.save('tup.pdf');
            
        }
    });
}
}

Copier après la connexion

1. Après l'écriture d'un test, une erreur a été signalée : Échec de l'exécution de 'toDataURL' sur 'HTMLCanvasElement' : les canevas contaminés ne peuvent pas être exportés. . J'ai donc changé de méthode, supprimé toutes les images pour les tests, puis cliqué pour générer un fichier PDF. Le résultat n'a posé aucun problème. Il semble que la cause de l'erreur soit due aux images.

Lorsque j'ai vérifié les informations, c'était parce que les images et les pages se trouvaient dans des domaines différents et qu'il y avait un problème de transmission entre domaines. Pour parler franchement, il fallait y accéder dans un environnement serveur. Il n’y a donc eu aucun problème lors des tests dans l’environnement serveur et le fichier pdf a été généré avec succès.

2. Le problème des captures d'écran incomplètes de html2canvas.js

J'ai mis la fonction de cette implémentation de test dans le projet et j'ai rencontré un nouveau problème avec le pdf généré uniquement. a des pages La zone visible de la fenêtre et la zone située sous la barre de défilement ne sont pas générées.

J'ai donc cherché à nouveau et j'ai découvert que html2canvas ne prend pas en charge la hauteur de l'image capturée. Il ne pourra capturer que ce qui est visible par le navigateur. Si une barre de défilement apparaît, elle ne sera pas capturée. donc le pdf généré par jsPdf.js basé sur la capture d'écran sera généré. Un problème incomplet se produit. Puisqu'il est causé par une capture d'écran html2canvas, résolvons-le à partir d'ici.

Après avoir lu les cas écrits par d'autres en ligne, combinés avec mes propres tests et analyses, j'ai découvert que si l'interception se fait au niveau du corps, et que le corps se trouve être en état de débordement : caché ; alors la partie excédentaire est Elle ne peut jamais être interceptée, car la hauteur DOM de ce nœud est la hauteur visible de la fenêtre, et n'inclut pas la partie supplémentaire de la barre de défilement.

J'ai donc changé le style du nœud de la barre de défilement en height: auto; pour laisser la hauteur être étirée par les éléments enfants. Montez et supprimez tous les nœuds parents : overflow : caché ; supprimez l'élément visible.

Regardez le js réécrit dans le projet après avoir introduit jquery

        var pdfcc = $('.pdf-cc');
        pdfcc.on('click', function (event) {
            html2canvas($("#bb-pdf-ctn"), {
                allowTaint: true,
                height: $("#bb-pdf-ctn").outerHeight(),
                onrendered: function (canvas) {                    //返回图片URL，参数：图片格式和清晰度(0-1)
                    var pageData = canvas.toDataURL('image/jpeg', 1.0);                    //方向默认竖直，尺寸ponits，格式a4【595.28,841.89]
                    var pdf = new jsPDF('', 'pt', 'a4');                    //需要dataUrl格式
                    pdf.addImage(pageData, 'JPEG', 0, 0, 595.28, 592.28 / canvas.width * canvas.height);
                    pdf.save('pdf.pdf');
                }
            });
        });

Copier après la connexion

3, html2canvas définit 2 nouveaux paramètres

Autoriser les domaines croisés :allowTaint : true,

Définissez la hauteur : height: $("#bb-pdf-ctn").outerHeight(),

La hauteur est la hauteur du nœud de la barre de défilement.

OK, cela résout le problème des captures d'écran incomplètes de la zone de la barre de défilement.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment l'alignement du texte réalise l'alignement aux deux extrémités

Héritage JavaScript et chaîne de prototypes

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!