JavaScript PDF Conversion: Converting Base64 Encoded Strings to PDF Files

Introduction:

In this article we are going to learn how we can convert base64 encoding string data to PDF file and download them into your system. Base64 is a way to represent binary data in an ASCII string format. PDF files can be encoded in Base64 format for transmission over the internet. In order to convert a Base64 encoded string to a PDF file, you need to decode the Base64 string and convert it back to its original binary format.

Steps Convert base64 String to PDF File:

To convert a Base64 encoded string to a PDF file in JavaScript, you can follow these steps:

1. Decode the Base64 string using the atob() function. This will return a binary string.
2. Create a Uint8Array from the binary string using the Uint8Array() constructor.
3. Create a Blob object from the Uint8Array using the Blob() constructor.
4. Create a URL for the Blob using the URL.createObjectURL() method.
5. Create an a element and set its href attribute to the URL of the Blob.
6. Set the download attribute of the a element to the desired filename.
7. Programmatically click the a element using the click() method.

Here's an example code snippet:

function downloadPdfFromBase64(base64String, fileName) {
  const binaryString = atob(base64String);
  const uint8Array = new Uint8Array(binaryString.length);
  for (let i = 0; i < binaryString.length; i++) {
    uint8Array[i] = binaryString.charCodeAt(i);
  }
  const blob = new Blob([uint8Array], { type: "application/pdf" });
  const url = URL.createObjectURL(blob);
  const a = document.createElement("a");
  a.href = url;
  a.download = fileName;
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  URL.revokeObjectURL(url);
}

Code Explanation:

1. Decode the Base64 string using the atob() function. This function takes a Base64 encoded string as input and returns a binary string.
2. Create a Uint8Array from the binary string using the Uint8Array() constructor. This constructor creates an array of 8-bit unsigned integers that represent the binary data. In this code, we create a new Uint8Array with the length of the binary string. Then we loop through the binary string and set each element of the array to the character code of the corresponding character in the binary string.
3. Create a Blob object from the Uint8Array using the Blob() constructor. A Blob is a data structure that represents a file-like object of immutable, raw data. In this code, we create a new Blob with the Uint8Array as its data and a type of "application/pdf".
4. Create a URL for the Blob using the URL.createObjectURL() method. This method creates a DOMString containing a URL representing the Blob object.
5. Create an a element and set its href attribute to the URL of the Blob. This will create a hyperlink that can be clicked to download the PDF file.
6. Set the download attribute of the a element to the desired filename. This attribute specifies that the target will be downloaded when a user clicks on the hyperlink. In this code, we set the download attribute to the desired filename.
7. Programmatically click the a element using the click() method. This will simulate a user clicking the hyperlink, which will trigger the file download.
8. Clean up by removing the a element and revoking the URL using the URL.revokeObjectURL() method.

In this code, we remove the a element from the document body and revoke the URL, which releases the resources associated with it. And that's it! You've successfully converted a Base64 encoded string to a PDF file in JavaScript.

You can call this function with the Base64 encoded string and the desired filename:

JavaScript code:

const base64String = "..."; // replace with your Base64 encoded string
const fileName = "example.pdf"; // replace with your desired filename
downloadPdfFromBase64(base64String, fileName);

Views