Displaying a Blob

[Matt Shanahan]

Hello,

I was looking into some PDF viewer controls when I happily saw that you have one available. Does it support displaying a Blob, rather than just a link to a PDF file/URL?

Also, the link to the PDF Viewer documentation appears to be broken.

https://ej2.syncfusion.com/angular/demos/#/material/pdfviewer/default -> links to -> https://ej2.syncfusion.com/documentation/pdfviewer/getting-started.html#create-a-simple-pdfviewer

Thank you!

[Akshaya Arivoli]

Hi Matt, 

  

Thank you for using Syncfusion products. 

  

PDF Viewer do not have support to load the PDF document from the Blob object directly. However, you can load the Blob object of PDF document by converting the Blob to base64 string using the client-side load() API in the sample level. 

  

Please find the code snippet for the same from the below, 

  

  var staticUrl = 'http://www.syncfusion.com/downloads/support/directtrac/general/pd/HTTP_Succinctly-1719682472'; 

        var xhr = new XMLHttpRequest(); 

        xhr.open('GET', staticUrl, true); 

        xhr.responseType = 'blob'; 

        xhr.onload = function (e) { 

            if (this.status == 200) { 

                var myBlob = this.response; 

                var reader = new window.FileReader(); 

                //read the blob data 

                reader.readAsDataURL(myBlob); 

                reader.onloadend = function () { 

                    base64data = reader.result; 

                    var pdfviewer = document.getElementById('pdfviewer').ej2_instances[0]; 

                    //load the base64 string 

                    pdfviewer.load(base64data, null); 

                } 

            } 

        }; 

        xhr.send(); 

  

Regarding “Also, the link to the PDF Viewer documentation appears to be broken.” 

We are currently working on creating the documentation with high priority and we will update it as soon as possible. 

  

Please let us know if you have any concerns on this. 

  

Regards, 

Akshaya 

[Matt Shanahan]

This is great, thank you so much!

[Paul Kocher]

Hi Matt, 

  

Thank you for using Syncfusion products. 

  

PDF Viewer do not have support to load the PDF document from the Blob object directly. However, you can load the Blob object of PDF document by converting the Blob to base64 string using the client-side load() API in the sample level. 

  

Please find the code snippet for the same from the below, 

  

  var staticUrl = 'http://www.syncfusion.com/downloads/support/directtrac/general/pd/HTTP_Succinctly-1719682472'; 

        var xhr = new XMLHttpRequest(); 

        xhr.open('GET', staticUrl, true); 

        xhr.responseType = 'blob'; 

        xhr.onload = function (e) { 

            if (this.status == 200) { 

                var myBlob = this.response; 

                var reader = new window.FileReader(); 

                //read the blob data 

                reader.readAsDataURL(myBlob); 

                reader.onloadend = function () { 

                    base64data = reader.result; 

                    var pdfviewer = document.getElementById('pdfviewer').ej2_instances[0]; 

                    //load the base64 string 

                    pdfviewer.load(base64data, null); 

                } 

            } 

        }; 

        xhr.send(); 

  

Regarding “Also, the link to the PDF Viewer documentation appears to be broken.” 

We are currently working on creating the documentation with high priority and we will update it as soon as possible. 

  

Please let us know if you have any concerns on this. 

  

Regards, 

Akshaya 

Hi Akshaya,

I just tried using the code snippet you provided to render a blob in the PDFViewer. Unfortunately I can't get it to work. 

This is the code I have:

var staticUrl = 'api/abrechnung/downloadabrechnungen';

var xhr = new XMLHttpRequest();

xhr.open('POST', staticUrl, true);

console.log(localStorage.getItem('auth_token'));

xhr.setRequestHeader('Content-Type', 'application/json');

xhr.setRequestHeader('Accept', 'application/pdf');

xhr.setRequestHeader('Authorization', `Bearer ${localStorage.getItem('auth_token')}`);

xhr.responseType = 'blob';

xhr.onload = function(e) {

if (this.status == 200) {

var myBlob = this.response;

var reader = new FileReader();

//read the blob data

reader.readAsDataURL(myBlob);

reader.onloadend = function() {

var base64data = reader.result;

var pdfviewer = (document.getElementById('pdfviewer') as any).ej2_instances[0];

//load the base64 string

pdfviewer.load(base64data, null);

};

}

};

xhr.send(JSON.stringify({ filename: this.selectedFileName }));

Now comes the weird part.

I can see in the dev tools that the correct file is being downloaded but the pdfviewer.load(base64data, null) part tries to connect to the api again.

In this case 'api/abrechnung/downloadabrechnungen/Load'

Shouldn't the load method just load the already downloaded blob/base64 string and not send another request to the api?

I'm a bit confused....

[Akshaya Arivoli]

Hi Paul, 

Greetings from Syncfusion, 

We have analyzed the provided code snippet and the details provided in the forum and suspect that you have missed to include the Load() action method in your WebAPI controller. Our PDF Viewer control includes both the server side and the client side code. Web service will load and process the PDF document stream and sent the same to the client for rendering and for further operation in PDF Viewer.  

Please find the below UG documentation for getting started with the PDF Viewer, 

https://ej2.syncfusion.com/angular/documentation/pdfviewer/getting-started/  

We have created the Web API service project in ASP.NET Core for the PDF Viewer control and shared the same in the following link, 

http://www.syncfusion.com/downloads/support/directtrac/general/ze/ej2-pdfviewer-web-service1342082952  

Kindly run the Web service project first and then provide that URL to the serviceUrl property Refer to the following code for the same, 

export class AppComponent implements OnInit { 

    public service = http://localhost:58767/pdfviewer'; 

    public document = 'PDF_Succinctly.pdf'; 

    ngOnInit(): void { 

    } 

} 

 

Note: The client side load() API will also call the Load() in WebAPI controller to render the PDF document in PDF Viewer 

You can also refer the below KB to load the PDF document as base64 string in the PDF Viewer 

https://www.syncfusion.de/kb/10186/how-to-load-the-pdf-document-as-base64-string-in-pdf-viewer  

Please try this and let us know if you have any concern on this. 

Regards, 

Akshaya 

[Paul Kocher]

Hi Akshaya,

thanks for your quick reply. 

I infact did notice the load method sends a request to my api hitting "Load".

Also I don't see a problem implementing this function in my api BUT my interceptor doesn't get hit so my Bearer token is missing.

If there is a way to add the Auth header my problem would be solved 😊

Hope you can give me some information how to append the header. Haven't found anything in the docs.

Best regards

Paul

[Akshaya Arivoli]

Hi Paul, 

 

Thank you for your update. 

 

We can add header to the PDF Viewer control’s Ajax request in the sample level.  Kindly include the below code in ngOnInit() of TS file, 

ngOnInit(): void {             

              XMLHttpRequest.prototype.realSend = XMLHttpRequest.prototype.send; 

        var newSend = function (vData)  {       

                this.setRequestHeader('Authorization', 'Bearer 64565dfgfdsjweiuvbiuyhiueygf');           

            this.realSend(vData); 

        }; 

        XMLHttpRequest.prototype.send = newSend; 

    } 

 

The XMLHttpRequest’s method setRequestHeader(), adds custom HTTP headers to the request.  

Note:  You can also add condition to check whether the URL is PDF Viewer service URL and then you can append the header. 

We have created the sample for the same and shared in the following location, 

http://www.syncfusion.com/downloads/support/directtrac/general/ze/my-app_Authentication-1520881144  

However, we have plans to implement this support in the source level and it will be available form Volume 1 SP1 release which is estimated to be available in April, 2019 

Please try this and let us know if you have any concerns on this. 

 

 

Regards, 

Akshaya 

[Paul Kocher]

Hi Akshaya, 

just wanted to let you know that the issue has been resolved. Thanks :)

Here is the code I used if anyone needs this:

ngOnInit(): void {

let token = this.authService.getToken();

var send = XMLHttpRequest.prototype.send;

XMLHttpRequest.prototype.send = function(data) {

if (

this.__zone_symbol__xhrURL.includes(

'http://localhost:4200/api/pdfViewer'

)

) {

this.setRequestHeader('Authorization', `Bearer ${token}`);

send.call(this, data, true);

} else {

send.call(this, data);

}

};

}

[Ramya Thirugnanam]

Hi Paul,   

Thanks for your update.  

 

Regards, 

Ramya T