How to show base64string data as pdf in iframe or embed?

Member

by lottie , in category: Javascript , 2 months ago

How to show base64string data as pdf in iframe or embed?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

Member

by orpha , 2 months ago

@lottie 

To display base64 encoded PDF data in an iframe or embed tag, you can follow these steps:

  1. Convert the base64 string to a Blob object:
1
2
3
4
5
6
7
8
var base64Data = "your base64 encoded string data";
var byteCharacters = atob(base64Data);
var byteNumbers = new Array(byteCharacters.length);
for (var i = 0; i < byteCharacters.length; i++) {
    byteNumbers[i] = byteCharacters.charCodeAt(i);
}
var byteArray = new Uint8Array(byteNumbers);
var blob = new Blob([byteArray], { type: 'application/pdf' });


  1. Create a URL for the Blob object using the URL.createObjectURL method:
1
var url = URL.createObjectURL(blob);


  1. Display the PDF data in an iframe or embed tag:
1
<iframe src="data:application/pdf;base64,{{base64Data}}" style="width:600px; height:400px;"></iframe>


Replace {{base64Data}} with the base64 encoded string data.

  1. Make sure to handle any errors that may occur during the conversion or loading of the PDF data.


By following these steps, you should be able to display base64 encoded PDF data in an iframe or embed tag on your website.