Im vorherigen Artikel habe ich erwähnt, dass Canvas Screenshots von Webseiten in Bilder umwandelt. Hier ist eine neue Anforderung: Screenshots von Webseiten erstellen und diese als PDF-Dateien speichern, damit Benutzer sie herunterladen können.
Die Verwendung von Canvas zum Speichern von Webseiten als PDF-Dateien unterstützt domänenübergreifend
TextVoraussetzungen: Der Benutzer klickt auf „Herunterladen“, speichert die Seite als PDF-Datei und lädt sie herunter.
Idee: Canvas weiterhin nutzen, um Screenshots zu machen und den Canvas-Inhalt in PDF-Dateien umzuwandeln.
Zuerst müssen wir den Downloadpfad für die JS-Datei jspdf.debug.js https://github.com/MrRio/jsPDF einführen
Einführung in die JS-Datei von Canvas, die offizielle Website-Homepage der JS-Datei-Erwerbsadresse: 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>
div-Tastencode
<div id=down_pdf>Schaltfläche „In PDF exportieren“</div> <div class=sta-main>Das Div, das als PDF abgerufen werden muss</div>
JSP-Code
<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'); //Breite und Höhe abrufen var w = parseInt(window.getComputedStyle(_canvas).width); var h = parseInt(window.getComputedStyle(_canvas) .height); //Vergrößern Sie die Leinwand um das Zweifache und legen Sie sie dann in einen kleinen Container, um Unschärfe zu verarbeiten = w * 2; canvas2.height = h * 2; canvas2.style.width = w + px; px; var context = canvas2.getContext(2d); //Prozess-Offset context.scale(1.5, 1.5); //Ändern Sie die Hintergrundfarbe, der Standard ist schwarz $('.sta-main').css(background, # fff) html2canvas( _canvas, { //Behandeln Sie das Problem des domänenübergreifenden PDF-Fehlers beim Abrufen domänenübergreifender Informationen taintTest : false, useCORS : true,allowTaint : false, canvas : canvas2, dpi: 172, //PDF-Klarheit exportieren: function (canvas) { var contentHeight = canvas.height; //Eine PDF-Seite zeigt die von der HTML-Seite generierte Canvas-Höhe an; * 841.89 ; //HTML-Seitenhöhe ohne generiertes PDF var leftHeight = contentHeight; //PDF-Seitenversatz var position = 0; //Die Breite und Höhe der von der HTML-Seite im PDF-Bild generierten Leinwand (Größe von A4-Papier [595,28.841,89]) var imgWidth = 595,28; var imgHeight = 592,28 / contentHeight; var pageData = canvas.toDataURL( 'image/jpeg', 1.0); var pdf = new jsPDF('', 'pt', 'a4'); //Es müssen zwei Höhen unterschieden werden, eine ist die tatsächliche Höhe der HTML-Seite und die Seitenhöhe des generierten PDF (841,89) //Wenn der Inhalt den Anzeigebereich von nicht überschreitet Für die PDF-Seite ist kein Paging erforderlich 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; //Hinzufügen leerer Seiten vermeiden if (leftHeight > 0) { pdf.addPage(); pdf.save('PDF-Name.pdf'); $('.sta-main').css(background, )})</script>Diesmal wird die Webseite in PDF geändert, und der letzte Screenshot der Webseite ist PNG, wobei dieselbe Technologie verwendet wird. Beide verwenden zuerst Canvas, um die Leinwand zu erfassen und dann das Format zu konvertieren.
Es gibt auch Probleme wie Versatz, Unschärfe, domänenübergreifend usw., die mit dem vorherigen Code behoben werden können.
Beim Konvertieren von PDF wird die Hintergrundfarbe schwarz. Verwenden Sie einfach den CSS-Stil, um die Hintergrundfarbe zu ändern.
Perfekte Konvertierung in PDF.
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.