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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Displaying a Blob

Thread ID:

Created:

Updated:

Platform:

Replies:

142008 Jan 14,2019 05:49 PM UTC Mar 11,2019 04:31 AM UTC Angular - EJ 2 8
loading
Tags: PDF Viewer
Matt Shanahan
Asked On January 14, 2019 05:49 PM UTC

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 [Syncfusion]
Replied On January 16, 2019 10:21 AM UTC

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
Replied On January 16, 2019 10:59 PM UTC

This is great, thank you so much!

Paul Kocher
Replied On February 20, 2019 01:05 PM UTC

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 [Syncfusion]
Replied On February 21, 2019 10:34 AM UTC

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 


Paul Kocher
Replied On February 21, 2019 04:51 PM UTC

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 [Syncfusion]
Replied On February 22, 2019 10:06 AM UTC

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 


Paul Kocher
Replied On March 9, 2019 11:52 AM UTC

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 [Syncfusion]
Replied On March 11, 2019 04:31 AM UTC

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


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon