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
MySQL-Tabellenfeld Zeiteinstellung Standardwert
Anwendungsszenario In der Datentabelle muss die A...
Schreiben und Verstehen von Pfeilfunktionen und diesem in JS
Inhaltsverzeichnis Vorwort 1. So schreiben Sie Fu...
Ursachen und Lösungen für MySQL-Deadlocks
Die Datenbank ist wie das Betriebssystem eine gem...
Ubuntu 15.04 öffnet den MySQL-Remote-Port 3306
Ubuntu 15.04 öffnet den MySQL-Remote-Port 3306. A...
jQuery erzielt einen atmenden Karusselleffekt
In diesem Artikel wird der spezifische Code von j...
Docker-Lösung zum Anmelden ohne Root-Rechte
Wenn Sie den Docker-Befehl zum ersten Mal verwend...
Beispiel für die MySQL-Methode zum Löschen von Daten und Datentabellen
Es ist sehr einfach, Daten und Tabellen in MySQL ...
CSS-Navigationsleistenmenü mit kleinem Dreieck-Implementierungscode
Viele Webseiten haben kleine Dreiecke in ihren Na...
So erstellen Sie Ihren eigenen privaten Nexus-Server unter Linux
Dieser Artikel beschreibt, wie man über Docker ei...
Detaillierte Erläuterung der Speicherverwaltung der MySQL InnoDB-Speicher-Engine
Inhaltsverzeichnis Speicherverwaltung der Speiche...
So verhindern Sie eine Verlangsamung des Computers, wenn unter WIN10 mehrere Datenbanken installiert sind
Aktivieren Sie den Dienst, wenn Sie ihn benötigen...
Implementierung der MySQL GRANT-Benutzerautorisierung
Bei der Autorisierung geht es darum, einem Benutz...
Detaillierte Erläuterung der Systemeingabe- und -ausgabeverwaltung in Linux
Verwaltung der Ein- und Ausgaben im System 1. Ver...
Detailliertes Tutorial zur JDK-Installation und Umgebungsvariablenkonfiguration unter Win10
Inhaltsverzeichnis Vorwort 1. Vorbereitung 2. Ins...
Eine kurze Diskussion über die Fallstricke und Lösungen der neuen Features von MySQL 8.0 (Zusammenfassung)
1. Benutzer anlegen und autorisieren Das Erstelle...