Javascript - How to convert and download base64 pdf data as an png image?

Question

I want to tricker a png file download with base64 pdf data. How to do so? That's my script:

var base64pdfData = atob(
  'JVBERi0xLjcKCjEgMCBvYmogICUgZW50cnkgcG9pbnQKPDwKICAvVHlwZSAvQ2F0YWxvZwogIC9QYWdlcyAyIDAgUgo+PgplbmRvYmoKCjIgMCBvYmoKPDwKICAvVHlwZSAvUGFnZXMKICAvTWVkaWFCb3ggWyAwIDAgMjAwIDIwMCBdCiAgL0NvdW50IDEKICAvS2lkcyBbIDMgMCBSIF0KPj4KZW5kb2JqCgozIDAgb2JqCjw8CiAgL1R5cGUgL1BhZ2UKICAvUGFyZW50IDIgMCBSCiAgL1Jlc291cmNlcyA8PAogICAgL0ZvbnQgPDwKICAgICAgL0YxIDQgMCBSIAogICAgPj4KICA+PgogIC9Db250ZW50cyA1IDAgUgo+PgplbmRvYmoKCjQgMCBvYmoKPDwKICAvVHlwZSAvRm9udAogIC9TdWJ0eXBlIC9UeXBlMQogIC9CYXNlRm9udCAvVGltZXMtUm9tYW4KPj4KZW5kb2JqCgo1IDAgb2JqICAlIHBhZ2UgY29udGVudAo8PAogIC9MZW5ndGggNDQKPj4Kc3RyZWFtCkJUCjcwIDUwIFRECi9GMSAxMiBUZgooSGVsbG8sIHdvcmxkISkgVGoKRVQKZW5kc3RyZWFtCmVuZG9iagoKeHJlZgowIDYKMDAwMDAwMDAwMCA2NTUzNSBmIAowMDAwMDAwMDEwIDAwMDAwIG4gCjAwMDAwMDAwNzkgMDAwMDAgbiAKMDAwMDAwMDE3MyAwMDAwMCBuIAowMDAwMDAwMzAxIDAwMDAwIG4gCjAwMDAwMDAzODAgMDAwMDAgbiAKdHJhaWxlcgo8PAogIC9TaXplIDYKICAvUm9vdCAxIDAgUgo+PgpzdGFydHhyZWYKNDkyCiUlRU9G');

var obj = document.createElement('object');
obj.style.width = '100%';
obj.style.height = '842pt';
obj.type = 'image/png';
obj.data = 'data:image/png;base64,' + base64pdfData;
document.body.appendChild(obj); 

var link = document.createElement('a');
link.innerHTML = 'Download PNG file';
link.download = 'file.png';
link.href = 'data:application/octet-stream;base64,' + base64pdfData;
document.body.appendChild(link);

//var a = document.createElement("a"); //Create <a>
//a.href = "data:image/png;base64," + base64pdfData; //Image Base64 Goes   here
//a.download = "Image.png"; //File name Here
//a.click();

Here is a fiddle:

https://jsfiddle.net/duejg9n3/

Do I need to use this pdf.js library? https://jsfiddle.net/pdfjs/cq0asLqz/

Answer 1

You basically need to do two things before you can download a PNG image:

1. Decode the base64 string to obtain the PDF
2. Convert the PDF to PNG

One way to do this is through using something like the LEADTOOLS Document Library (which is what I am familiar with since I work for the vendor of this toolkit).

Using this library, you can be implement the DocumentConverter class in a server-side C# code that decodes the base64 string, converts PDF to PNG, then returns the PNG output in a base64 string:

MemoryStream ms = new MemoryStream(Convert.FromBase64String(pdfStr));
using (DocumentConverter documentConverter = new DocumentConverter())
using (LEADDocument document = DocumentFactory.LoadFromStream(ms, new LoadDocumentOptions()))
{
   MemoryStream outputStream = new MemoryStream();

   DocumentConverterJobData jobData = new DocumentConverterJobData();
   jobData.Document = document;
   jobData.RasterImageFormat = RasterImageFormat.Png;
   jobData.OutputDocumentStream = outputStream;
   jobData.JobName = "Convert to PNG Job";
   DocumentConverterJob job = documentConverter.Jobs.CreateJob(jobData);
   documentConverter.Jobs.RunJob(job);

   pngStr = Convert.ToBase64String(outputStream.ToArray());
}