How to load PDF document from online URL in PDF Viewer?
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 = 'https://localhost:55767/pdfviewer';
load() {
var pdfdata;
var staticUrl = 'https://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: https://www.syncfusion.com/downloads/support/directtrac/general/ze/my-app302916509
- 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 'http://files2.syncfusion.com/dtsupport/directtrac/general/pd/HTTP_Succinctly-1719682472.pdf'
Conclusion
I hope you enjoyed learning how to load PDF document from online URL in PDF Viewer.
You can refer to our Angular PDF Viewer feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Angular PDF Viewer example to understand how to create and manipulate data.
