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
Verwenden Sie ein Iframe, um das Formular zu senden, ohne die Seite zu aktualisieren
Deshalb führen wir ein Einbettungsframework ein, u...
Detaillierte Erklärung des Unterschieds zwischen Flex und Inline-Flex in CSS
inline-flex ist dasselbe wie inline-block. Es ist...
Grafisches Tutorial zur Installation und Konfiguration von MySQL5.7+ MySQL Workbench unter MAC
Dieser Artikel konzentriert sich hauptsächlich au...
So erstellen Sie einen Flammeneffekt mit CSS
Unten beginnt der Haupttext. 123WORDPRESS.COM Her...
React+Koa-Beispiel zur Implementierung des Datei-Uploads
Inhaltsverzeichnis Hintergrund Serverabhängigkeit...
Eine kurze Analyse des Kimono-Memo-Problems
Heute musste ich nach dem Neustart des Spiels fes...
Eine einfache Implementierungsmethode für eine digitale LED-Uhr in CSS3
Das dürfte etwas sein, was viele Leute gemacht ha...
Chrome überwacht Cookie-Änderungen und weist Werte zu
Der folgende Code führt die Überwachung von Cooki...
Erläuterung der Schritte für Tomcat zur Unterstützung des https-Zugriffs
So ermöglichen Sie Tomcat die Unterstützung des h...
Mehrere Implementierungsmethoden sowie Vor- und Nachteile der SQL-Paging-Abfrage in MySQL
【SQL】 Zusammenfassung der SQL-Paging-Abfragen Wäh...
Detaillierte Erläuterung gängiger Methoden von JavaScript Array
Inhaltsverzeichnis Methoden, die das ursprünglich...
Schritte zum Kapseln von Element-UI-Popupkomponenten
Kapseln Sie el-dialog als Komponente ein Wenn wir...
Express-Projektdateiverzeichnisbeschreibung und detaillierte Funktionsbeschreibung
app.js: Startdatei oder Einstiegsdatei package.js...
Beispiel für das Hinzufügen einer Mehrsprachenfunktion zur Vue-Hintergrundverwaltung
Inhaltsverzeichnis 1. Konfigurieren Sie zunächst ...
Detaillierte Erläuterung der Linux-Textverarbeitungstools
1. Zählen Sie die Anzahl der Benutzer, deren Stan...