We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Displaying a Blob

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!

8 Replies

AA Akshaya Arivoli Syncfusion Team January 16, 2019 05:21 AM

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 



MS Matt Shanahan January 16, 2019 05:59 PM

This is great, thank you so much!


PK Paul Kocher replied to Akshaya Arivoli February 20, 2019 08:05 AM

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....





AA Akshaya Arivoli Syncfusion Team February 21, 2019 05:34 AM

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, 
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, 
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 

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

Regards, 
Akshaya 



PK Paul Kocher February 21, 2019 11:51 AM

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


AA Akshaya Arivoli Syncfusion Team February 22, 2019 05:06 AM

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, 
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 



PK Paul Kocher March 9, 2019 06:52 AM

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);
}
};
}


RT Ramya Thirugnanam Syncfusion Team March 11, 2019 12:31 AM

Hi Paul,   
Thanks for your update.  
 
Regards, 
Ramya T 


Loader.
Live Chat Icon For mobile
Up arrow icon