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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to load PDF document from online url in PDF Viewer

Platform: JavaScript - EJ 2 |
Control: PDF Viewer |
Published Date: June 25, 2019 |
Last Revised Date: November 12, 2019

Essential JS 2 PDF Viewer

Syncfusion Angular UI (Essential JS 2) is a collection of modern TypeScript based true Angular components. The PDF Viewer component is developed from the ground up to be lightweight, responsive, modular and touch-friendly.

Refer to the following link for getting started with PDF Viewer.

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

Loading URL from client in PDF Viewer

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

App.Component.html

<button (click)="load()">LoadDocument</button> 
<div class="content-wrapper"> 
   <ejs-pdfviewer id="pdfViewer" [serviceUrl]='service' style="height:850px;display:block"></ejs-pdfviewer> 
</div> 
 

App.Component.ts

export class AppComponent implements OnInit { 
  public service = 'http://localhost:55767/pdfviewer';  
                 load() { 
        var pdfdata; 
        var staticUrl = 'https://s3.amazonaws.com/files2.syncfusion.com/dtsupport/directtrac/general/pd/HTTP_Succinctly-1719682472.pdf'; 
        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 () { 
                var base64data = reader.result;                 
               // Typecast the HTMLElement to avoid Typescript lint issue   
                var pdfviewer = (<any>document.getElementById('pdfViewer')).ej2_instances[0];       
                //  load the base64 string 
                    pdfviewer.load(base64data, null); 
                } 
            } 
        }; 
        xhr.send(); 
    } 
    ngOnInit(): void {                                       
    }  
} 
 

Angular sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/my-app302916509  

Web API: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ej2-pdfviewer-web-service798878714

Note:
  • Run the WebAPI first, then provide that Url in the serviceUrl property of the PDF Viewer.
  • Blob storage Url should contain the name of the PDF document as follows 'https://s3.amazonaws.com/files2.syncfusion.com/dtsupport/directtrac/general/pd/HTTP_Succinctly-1719682472.pdf'

 

ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

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

Up arrow icon

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