Implementierung der Funktion zum Speichern von Screenshots aus HTML in PDF
|
Technologie nutzen itext.jar: Konvertiert den Byte-Datei-Eingabestrom in Bilder, PDF usw. html2canvas.js: Screenshots von HTML-Seitenbereichen als base64-kodierte Bildressourcen java + js 1. Ressourcen vorbereiten itext.jar html2canvas.js 2. Front-End-Code:
//Screenshot-Operation ausführen, document.querySelector("body") ist der Bereich, von dem ein Screenshot erstellt werden soll function test() {
html2canvas(document.querySelector("body"), {
onrendered: Funktion (Leinwand) {
var dataUrl = canvas.toDataURL('image/png');
var formData = new FormData(); //Formularobjekt simulieren formData.append("imgData", convertBase64UrlToBlob(dataUrl)); //Daten schreiben var xhr = new XMLHttpRequest(); //Datenübertragungsmethode xhr.open("POST", "http://localhost:8080/pdf"); //Übertragungsmethode und Adresse konfigurieren xhr.send(formData);
xhr.onreadystatechange = function () { //Rückruffunktion};
}
});
}
//Formatiere das Bild in Base64-Kodierung und konvertiere es in eine Byte-Dateistream-Funktion convertBase64UrlToBlob(urlData){
//Entfernen Sie den URL-Header und konvertieren Sie ihn in Byte
var bytes = window.atob(urlData.split(',')[1]);
//Ausnahmen behandeln und ASCII-Codes kleiner als 0 in größer als 0 konvertieren
var ab = neuer ArrayBuffer(bytes.länge);
var ia = neues Uint8Array(ab);
für (var s = 0; s < Bytes.Länge; s++) {
ia[s] = bytes.charCodeAt(s);
}
gibt neuen Blob zurück ([ab], {Typ: 'image/png'});
}
<body onclick="test()">//Rufen Sie die Screenshot-Methode auf3. Backend-Code:
@RequestMapping(Wert = "/pdf",Methode = RequestMethod.POST)
public void test(MultipartHttpServletRequest Anfrage, HttpServletResponse Antwort) löst IOException aus {
Zeichenfolge Dateipfad = "D:\\blog\\exportPdf2.pdf";
Zeichenfolge imagePath = "D:\\blog\\exportImg2.png";
Dokument Dokument = neues Dokument();
versuchen{
Map getMap = request.getFileMap();
MultipartFile mfile = (MultipartFile) getMap.get("imgData"); //Daten abrufen InputStream file = mfile.getInputStream();
byte[] fileByte = FileCopyUtils.copyToByteArray(Datei);
FileImageOutputStream imageOutput = new FileImageOutputStream(new File(imagePath));//Öffnen Sie den Eingabestream imageOutput.write(fileByte, 0, fileByte.length);//Generieren Sie eine lokale Bilddatei imageOutput.close();
PdfWriter.getInstance(Dokument, neuer FileOutputStream(Dateipfad)); //itextpdf filedocument.open();
document.add(new Paragraph("NUR TESTEN ..."));
Bild Bild = Bild.getInstance(Bildpfad); //itext-pdf-Bild
Float-Höhe = Bild.getHeight();
Float-Breite = Bild.getWidth();
int percent = getPercent2(heigth, width); //Bild verkleinern image.setAlignment(Image.MIDDLE);
image.scalePercent(Prozent+3);
Dokument.Hinzufügen(Bild);
dokument.schließen();
}catch (DocumentException de) {
System.err.println(de.getMessage());
}
Fang (Ausnahme e) {
e.printStackTrace();
}
}
private statische int getPercent2(float h, float w) {
}
Gleitkommazahl p2 = 0,0f;
p2 = 530 / w * 100;
p = Math.Runde(p2);
Rückgabe p;
}4 Paketname importiere com.itextpdf.text.Document; importiere com.itextpdf.text.DocumentException; importiere com.itextpdf.text.Image; importiere com.itextpdf.text.Paragraph; importiere com.itextpdf.text.pdf.PdfWriter; importiere org.springframework.boot.SpringApplication; importiere org.springframework.boot.autoconfigure.SpringBootApplication; importiere org.springframework.stereotype.Controller; importiere org.springframework.util.FileCopyUtils; importiere org.springframework.web.bind.annotation.RequestMapping; importiere org.springframework.web.bind.annotation.RequestMethod; importiere org.springframework.web.multipart.MultipartFile; importiere org.springframework.web.multipart.MultipartHttpServletRequest; importiere javax.imageio.stream.FileImageOutputStream; importiere javax.servlet.http.HttpServletResponse; importiere java.io.File; importiere java.io.FileOutputStream; importiere java.io.IOException; importiere java.io.InputStream; importiere java.util.Map; 4 Machen Sie Screenshots auf dem Front-End, greifen Sie auf die Back-End-Schnittstelle zu und speichern Sie die Screenshot-Dateien lokal als PDF oder in anderen Formaten. Interessierte Studierende können das Backend ändern, um Dateien lokal herunterzuladen. 5 Adresse des Projektquellcodes https://github.com/zhangjy520/learn_java/tree/master/boot Dies ist das Ende dieses Artikels über die Implementierung der Funktion zum Speichern von Screenshots von HTML in PDF. Weitere relevante Inhalte zum Speichern von Screenshots von HTML in PDF finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen! |
<<: Detaillierte Erklärung des CSS-Pseudoelements::marker
>>: Informationen zum CSS-Floating und zum Aufheben des Floatings
Artikel empfehlen
Detaillierte Erklärung von MySQL-Transaktionen und MySQL-Protokollen
Transaktionale Merkmale 1. Atomarität: Nach dem S...
Das schnellste Textsuchtool von Linux: ripgrep (die beste Alternative zu grep)
Vorwort Apropos Textsuchtools: Jeder sollte grep ...
Der Typ der Schaltfläche ist nicht als „Senden“ angegeben. Durch Klicken auf die Schaltfläche wird nicht zur angegebenen URL gesprungen.
Heutzutage wird aufgrund der Projektanforderungen ...
Bootstrap+Jquery zum Erreichen eines Kalendereffekts
In diesem Artikel wird der spezifische Code von B...
Docker generiert Bilder über Container und übermittelt DockerCommit im Detail
Inhaltsverzeichnis Nachdem Sie einen Container lo...
Reines HTML+CSS, um einen Tippeffekt zu erzielen
In diesem Artikel wird hauptsächlich der durch re...
HTML-Tabellen-Tag-Tutorial (46): Tabellenfußzeilen-Tag
Mit dem Tag <tfoot> wird der Stil der Tabel...
Die CSS-Priorität der Webseite wird für Sie ausführlich erklärt
Bevor wir über die CSS-Priorität sprechen, müssen...
Dynamischer Sternenhimmel Hintergrund umgesetzt mit CSS3
Ergebnis:Implementierungscode html <link href=...
Beispiel zum Erstellen von Tabellenanweisungen für den Benutzer Scott in der MySQL-Version von Oracle
Überblick: Oracle Scott-Benutzer haben vier Tabel...
Zusammenfassung gängiger Befehle für Ubuntu-Server
Die meisten der folgenden Befehle müssen in der K...
Lösung für ungültige obere Ränder von Elementen in Div-Tags
Genau wie der Titel sagt. Die Frage ist sehr merkw...
Ein Beispiel für die Umgestaltung eines Puzzlespiels mit vue3
Vorwort Es dauerte zwei Tage, um ein Puzzlespiel ...
Dieser Artikel zeigt Ihnen, wie Sie mit CSS-Rahmen spielen
Rahmenstil Die Eigenschaft „Border-Style“ gibt an...
Einführung in die Verwendung von CSS3-Farbwerten (RGBA) und Farbverlaufsfarben
Vor CSS3 konnten Verlaufsbilder nur als Hintergru...