Heim  >  Artikel  >  Web-Frontend  >  Base64 in PDF-Javascript umwandeln

Base64 in PDF-Javascript umwandeln

PHPz
PHPzOriginal
2023-05-17 15:28:383916Durchsuche

Base64 ist eine Codierungsmethode, die häufig zum Konvertieren von Binärdaten in ein Textformat verwendet wird, damit diese über das Netzwerk übertragen werden können. PDF (Portable Document Format, Portable Document Format) ist ein Format zur Präsentation und zum Austausch von Dokumenten.

Bei der JavaScript-Programmierung müssen wir manchmal Base64-codierte Daten in das PDF-Format konvertieren, damit wir diese PDF-Dokumente im Browser anzeigen oder herunterladen können. In diesem Artikel erklären wir, wie Sie die Base64-Kodierung mithilfe von JavaScript in das PDF-Format konvertieren.

  1. Base64-codierte Daten abrufen

Zuerst müssen wir die Base64-codierten Daten abrufen. Dies kann auf verschiedene Weise erreicht werden, beispielsweise durch das Abrufen von Daten von einem Backend-Server oder einer Web-API oder von einem Formular oder einer Benutzerinteraktion im Frontend.

In diesem Beispiel verwenden wir eine Zeichenfolgenvariable namens base64Data, um unsere Base64-codierten Daten darzustellen. Hier ist der Beispielcode zur Darstellung dieser Daten:

var base64Data = "JVBERi0xLjMKJcfs...";
  1. Base64-Daten in Binärformat konvertieren

Als nächstes müssen wir die Daten mit Base64 kodieren Zurück in das Binärformat konvertieren. Dies kann durch die Verwendung der Funktion window.atob() erreicht werden, die eine Base64-codierte Zeichenfolge akzeptiert und eine Zeichenfolge zurückgibt, die die Binärdaten für diese Zeichenfolge darstellt.

Das Folgende ist ein Beispielcode zum Konvertieren von Base64-Daten in das Binärformat:

var binaryData = window.atob(base64Data);
  1. Blob-Objekt erstellen

Als nächstes müssen wir ein Blob-Objekt erstellen, das ein dateiähnliches Objekt unveränderlicher Rohdaten darstellt. Blob-Objekte werden häufig bei der AJAX-Datenübertragung in Webanwendungen verwendet.

Das Folgende ist der Beispielcode zum Erstellen eines Blob-Objekts:

var blob = new Blob([binaryData], { type: "application/pdf" });

Hier übergeben wir den BinaryData-String als Array-Parameter an den Blob-Konstruktor. Wir haben auch den MIME-Typ als „application/pdf“ angegeben, was angibt, dass wir ein Blob-Objekt im PDF-Dateiformat erstellen.

  1. ObjektURL erstellen

Sobald wir das Blob-Objekt erstellt haben, müssen wir es in ein URL-Format konvertieren, damit wir darüber darauf zugreifen können über ein Browserfenster darauf zugreifen. Wir können diese URL mit der Methode window.URL.createObjectURL() erstellen.

Das Folgende ist ein Beispielcode zum Konvertieren eines Blob-Objekts in das URL-Format:

var url = window.URL.createObjectURL(blob);

Dadurch wird eine URL-Zeichenfolge zurückgegeben, die das Blob-Objekt darstellt.

  1. Zeigen Sie das PDF in Ihrem Browser an oder laden Sie es herunter.

Da wir nun eine URL erstellt haben, können wir sie über einen Link mit der HTML-Seite verknüpfen Element, damit wir diese PDF-Datei im Browser anzeigen oder herunterladen können.

Hier ist ein Beispielcode zum Verknüpfen einer PDF-Datei mit einem Linkelement auf einer HTML-Seite:

var link = document.createElement('a');
link.href = url;
link.download = "file.pdf";
link.click();

Hier haben wir ein neues Linkelement namens „Link“ erstellt. und setzen Sie sein href-Attribut auf die zuvor erstellte URL. Wir geben außerdem das Download-Attribut an, das es uns ermöglicht, die Datei herunterzuladen, wenn auf den Link geklickt wird. Abschließend klicken wir mit link.click() auf dieses Linkelement, damit wir diese PDF-Datei im Browser anzeigen bzw. herunterladen können.

Zusammenfassung

In diesem Artikel haben wir vorgestellt, wie Sie mit JavaScript Base64-codierte Daten in das PDF-Format konvertieren und diese PDF-Dateien im Browser anzeigen und herunterladen können. Zu diesen Schritten gehören das Abrufen von Daten aus der Base64-Codierung, das Konvertieren von Daten in das Binärformat, das Erstellen von Blob-Objekten, das Erstellen von ObjectURLs und das Verknüpfen von PDF-Dateien auf HTML-Seiten. Achten Sie dabei darauf, Best Practices wie Datentypvalidierung, Fehlerbehandlung und Sicherheit zu befolgen.

Das obige ist der detaillierte Inhalt vonBase64 in PDF-Javascript umwandeln. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn