Save Base64 String As Pdf At Client Side With Javascript

When it comes to working with files in web development, knowing how to save a Base64 string as a PDF directly on the client-side using JavaScript can be a very handy skill. This capability can come in useful when you want to generate PDF files dynamically and allow users to download them without server-side processing.

To achieve this, we will need to follow a few steps to convert the Base64 string into a PDF file and prompt the user to download it. Let's dive into the process:

Step 1: Decode Base64 String
The first step is to decode the Base64 string to convert it back to binary data. JavaScript provides a built-in method `atob()` to decode Base64-encoded data. You can use this method to decode the Base64 string and store the result in a variable. Here's an example:

let pdfData = atob(yourBase64String);

Step 2: Create Blob
Next, we need to create a Blob object from the decoded binary data. Blobs represent data that isn't necessarily in a JavaScript-native format. To create a Blob, you can use the Blob constructor and provide an array containing the decoded binary data. Here's how you can create a Blob object:

let blob = new Blob([pdfData], { type: 'application/pdf' });

Step 3: Create Object URL
After creating the Blob, we need to create a URL object that points to the Blob data. This can be done using the `URL.createObjectURL()` method. The URL created will be a temporary reference to the Blob data. Here's how you can create an object URL:

let url = URL.createObjectURL(blob);

Step 4: Create Anchor Element
To trigger the download of the PDF file, we can create an anchor element (``) and set its `href` attribute to the object URL we generated. Additionally, set the `download` attribute with the desired filename for the downloaded file. Here's how you can create the anchor element:

let a = document.createElement('a');
a.href = url;
a.download = 'your-file-name.pdf';

a.click();