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
So verwenden Sie .htaccess, um einer bestimmten IP den Zugriff auf die Website zu verbieten
Vorwort Aus Kostengründen kaufen die meisten Webm...
CSS sorgt dafür, dass der untergeordnete Container das übergeordnete Element übersteigt (der untergeordnete Container schwebt im übergeordneten Container).
Vorwort Manchmal benötigen wir eine Floating-Effe...
Vue implementiert horizontal abgeschrägtes Balkendiagramm
In diesem Artikel wird der spezifische Code von V...
CSS-Beispielcode zum Ausblenden der Bildlaufleiste und Scrollen des Inhalts
Vorwort Wenn die HTML-Struktur einer Seite viele ...
So bedienen Sie das Kontrollkästchen auf einer HTML-Seite
Kontrollkästchen sind auf Webseiten sehr verbreit...
Verwenden von Schleifen in awk
Lernen wir verschiedene Arten von Schleifen kenne...
Detailliertes Tutorial zur Installation von Docker auf CentOS 7.5
Einführung in Docker Docker ist eine Open-Source-...
Zusammenfassung häufig verwendeter Anweisungen zur Änderung mehrerer Tabellen in MySQL und Oracle
Ich habe diese Frage heute in der SQL-Schulungsfr...
Detaillierte Erläuterung des Vue Lazyload-Beispiels für verzögertes Laden von Bildern
Dokumentation: https://github.com/hilongjw/vue-la...
Analysieren Sie das Arbeitsprinzip von Tomcat
SpringBoot ist wie eine riesige Python, die sich ...
Nachdem Idea das Webprojekt veröffentlicht hat, kann der Tomcat-Server das Projekt und seine Lösung nicht finden
Überblick Das Projekt wurde erfolgreich erstellt ...
Grafisches Tutorial zur Installation und Konfiguration von CentOS 6.4 MySQL 5.7.18
Die spezifischen Schritte zur Installation von my...
Lösung für den Fehler von 6ull beim Laden des Linux-Treibermoduls
Inhaltsverzeichnis 0x01 Das Treibermodul konnte n...
Zusammenfassung gängiger Befehle für den Einstieg in die MySQL-Datenbankgrundlagen
Dieser Artikel beschreibt anhand von Beispielen d...
JavaScript-Canvas zum Erstellen eines Rubbellos-Beispiels
In diesem Artikel wird der spezifische Code von J...