Explication détaillée de l'utilisation de Canvas pour enregistrer des pages Web sous forme de fichiers PDF afin de prendre en charge plusieurs domaines

Dans l'article précédent, j'ai mentionné que Canvas capture les pages Web en images. Voici une nouvelle exigence : capturez les pages Web et enregistrez-les sous forme de fichiers PDF que les utilisateurs peuvent télécharger.

L'utilisation de Canvas pour enregistrer des pages Web sous forme de fichiers PDF prend en charge plusieurs domaines

Exigences : l'utilisateur clique sur Télécharger, enregistre la page sous forme de fichier PDF et la télécharge.

Idée : continuez à utiliser Canvas pour prendre des captures d'écran et convertir le contenu du canevas en fichiers PDF.

Nous devons d’abord introduire le chemin de téléchargement du fichier js jspdf.debug.js https://github.com/MrRio/jsPDF

Présentation du fichier js de canvas, la page d'accueil du site officiel de l'adresse d'acquisition du fichier js : http://html2canvas.hertzen.com/

 <script type=text/javascript src=js/html2canvas.js></script><script type=text/javascript src=js/html2canvas.min.js></script><script type=text/javascript src=js /jspdf.debug.js></script>

code du bouton div

 <div id=down_pdf>Bouton Exporter vers PDF</div> <div class=sta-main>Le div qui doit être obtenu au format PDF</div>

code jsp

 <script type=text/javascript>/* var downPdf = document.getElementById(down_pdf); */var downPdf = document.getElementById(down_pdf);$(#down_pdf).on(click, function() { var canvas2 = document .createElement(canvas); let _canvas = document.querySelector('.sta-main'); //Obtenir la largeur et la hauteur var w = parseInt(window.getComputedStyle(_canvas).width); var h = parseInt(window.getComputedStyle(_canvas) .height); //Agrandissez le canevas de 2 fois, puis placez-le dans un petit conteneur pour gérer le flou canvas2.width = w * 2; toile2.hauteur = h * 2; toile2.style.width = w + px; px; var context = canvas2.getContext(2d); //Processus offset context.scale(1.5, 1.5); //Modifier la couleur d'arrière-plan, la valeur par défaut est le noir $('.sta-main').css(background, # fff) html2canvas( _canvas, { //Gérer le problème de ne pas obtenir d'informations inter-domaines à partir du pdf entre les domaines taintTest : false, useCORS : true,allowTaint : false, canvas : canvas2, dpi : 172, //Exporter la clarté du pdf lors du rendu : function (canvas) { var contentWidth = canvas.width; var contentHeight = canvas.height; //Une page de pdf affiche la hauteur du canevas générée par la page html ; * 841.89 ; //Hauteur de la page HTML sans PDF généré var leftHeight = contentHeight //Décalage de la page PDF var position = 0; //La largeur et la hauteur du canevas généré par la page html dans l'image pdf (format papier a4 [595,28,841,89]) var imgWidth = 595,28; var imgHeight = 592,28 / contentWidth * contentHeight; 'image/jpeg ', 1.0); var pdf = nouveau jsPDF('', 'pt', 'a4'); //Il y a deux hauteurs qui doivent être distinguées, l'une est la hauteur réelle de la page html et la hauteur de la page du pdf généré (841.89) //Lorsque le contenu ne dépasse pas la plage d'affichage de la page pdf, aucune pagination n'est requise if (leftHeight < pageHeight) { pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight } else { while (leftHeight > 0) { pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight) leftHeight -= pageHeight; position -= 841.89; //Évitez d'ajouter des pages vierges if (leftHeight > 0) { pdf.addPage(); pdf.save('Nom du PDF.pdf'); $('.sta-main').css(background, )})</script>

Cette fois, la page Web est modifiée en PDF et la dernière capture d'écran de la page Web est en PNG, en utilisant la même technologie, les deux utilisent Canvas pour capturer d'abord le canevas, puis convertir le format.

Il existe également des problèmes tels que le décalage, le flou, le cross-domain, etc., qui peuvent être résolus à l'aide du code précédent.

La conversion du PDF rendra la couleur d'arrière-plan noire. Utilisez simplement le style CSS pour changer la couleur d'arrière-plan.

Conversion parfaite en pdf.

Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.