Skip to Content
Author's profile photo Vicky Chen

How to view a base64 encoded pdf using PDFViewer

I have a base64 encoded pdf content and want to view it using sap.m.PDFViwer. Since PDFViewer only accepts URI as source to display pdf:

So I should first create a blob url or a data url for my pdf content.

var base64EncodedPDF = "JVBERi0xLjcNCiW..."; // the encoded string
var decodedPdfContent = atob(base64EncodedPDF);
var byteArray = new Uint8Array(decodedPdfContent.length)
for(var i=0; i<decodedPdfContent.length; i++){
    byteArray[i] = decodedPdfContent.charCodeAt(i);
}
var blob = new Blob([byteArray.buffer], { type: 'application/pdf' });
var _pdfurl = URL.createObjectURL(blob);

However when I use this blob url as source of my PDFViewer, my pdf can’t be loaded at all however my blob url is accessible.

At last I find out that UI5 would validate the pdf url after rendering the PDFViewer dialog, only if my blob url is in the whitelist of UI5, my url can be considered as validated.

what I do is as below:

if(!this._PDFViewer){
     this._PDFViewer = new sap.m.PDFViewer({
         width:"auto",
         source:_pdfurl // my blob url
     });
     jQuery.sap.addUrlWhitelist("blob"); // register blob url as whitelist
}
this._PDFViewer.downloadPDF = function(){
File.save(
    byteArray.buffer,
    "Hello_UI5",
    "pdf",
    "application/pdf"
    );
};
this._PDFViewer.open();

The method addUrlWhitelist has four parameters.

jQuery.sap.addUrlWhitelist(protocol, host, port, path);

After I added my blob url as whitelist then the pdf can be loaded successfully!

 

What happens in UI5?

line 269: PDFViewer try validate the source url

In jQuery.sap.encoder.js, the method validateUrl would be executed:

And I can see from line 504(still in method validateUrl) why my blob url is now validated after doing addUrlWhiteList, the protocal,host,port and path would be checked:

 

The PDFViewer loads my pdf as below:

Assigned tags

      15 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Giovanni Visonà
      Giovanni Visonà

      Thank you very much, I was having troubles specifically with this problem, and your piece of code solved it!

       

      Author's profile photo Vicky Chen
      Vicky Chen
      Blog Post Author

      Glad it helps 🙂

      Author's profile photo Alfredo Semeco Blanco
      Alfredo Semeco Blanco

      Hi, @Vicky Chen

      I have a issue  when I try to load a pdf in my pdfviewer fiori app in fiori client Android. The  android system show a message refering a visor problem ( having install yet pdf visor  like adobe reader and others) and never load the pdf file so if you know how to handle this issue or what can i do?. I have tried with window.open(url), <iframe src= url>, <object data= url>, <embed src= url> and your solution but nothing happen just in Android. In iOS and Web your solution works fine when i test the app. thanks you!

      Author's profile photo Louay Hashim
      Louay Hashim

      Hallo

      could you tell me how can i declare the object Unit8Array. I have in the WebIDE the syntax error "Unit8Array is not defined"

       

       

      Author's profile photo Vicky Chen
      Vicky Chen
      Blog Post Author

      Hi Hashim,

       

      The Unit8Array is a common used JS type, you can see the browser support here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array

       

      Thanks,

      Vicky

      Author's profile photo Devesh Pandey
      Devesh Pandey
      Vicky Chen you are genius.
      i solved my issue by refering your code.
      Regards,
      Devesh
      Author's profile photo Pankaj valecha
      Pankaj valecha

      Hi Vicky,

      I used above solution for one of application and it is working perfectly fine but only in chrome whereas it is not display anything on IE browser.

       

      Can you please give us advice to run the same code for IE also?

       

      Regards,
      Pankaj Valecha

      Author's profile photo shay Levy
      shay Levy

      hello Pankaj

      did you found solution to display on IE browser with blob url?

       

      Author's profile photo kamalpreet kaur
      kamalpreet kaur

      Hi Pankaj,

       

      Any pointers for IE

       

      Thanks !

      Author's profile photo Carsten Kasper
      Carsten Kasper

      Hello all,

      the solution I implemented:

      if(window.navigator.msSaveOrOpenBlob){
       window.navigator.msSaveOrOpenBlob(blob,"filename.pdf");
      }else{
       sap.m.URLHelper.redirect(_pdfurl);
      }

      I reused the variable names Vicky used in her above code.

      PDFJs is not supporting IE11 as far as I know. Thus you have to download the file. The ELSE part is just a sample. You can of course use above code to open the PDF Viewer.

       

      cheers Carsten

      Author's profile photo Peter Simm
      Peter Simm

      Hi Vicky,

      cool solution. Works perfectly.

      Best regards

      Peter

      Author's profile photo Pallavkumar Jadav
      Pallavkumar Jadav

      Hi Vicky,

       

      Thanks for elaborating the method to view PDF using PDF viewer in SAPUI5 with all explanation.

      I was stuck with the same issue since last few days.

       

      Best Regards

      Pallav Jadav

      Author's profile photo Gayathri Lakshmi Dhandapani
      Gayathri Lakshmi Dhandapani

      Hi,

       

      Vicky Chen  By using your above code I am able to view pdf file. But I am not able to download pdf file.Can you pls help me how you are saving file to download. How you have declared File.

       

      Thanks in advance.

      Gayathri Lakshmi

      Author's profile photo Carsten Kasper
      Carsten Kasper

      Hello Vicky Chen ,

      thank you for researching on the addUrlWhitelist function. It saved me a lot of trouble 🙂

      cheers Carsten

      Author's profile photo Irvin Kelvin Zare Gonzales
      Irvin Kelvin Zare Gonzales

      Muchas Gracias

      Al inicio no tenia claridad de como obtener este cambio. Me sirvió de mucho.