How to view PDF document using web PDF Viewer in HTML5?
Essential JS 2 PDF Viewer
The Syncfusion PDF Viewer for JavaScript is a modern enterprise UI toolkit that has been built from the ground up to be lightweight, responsive, modular, touch-friendly, and can be directly used in the latest web browsers. It is also available in other frameworks such as React, Angular, ASP.NET MVC, and ASP.NET Core.
PDF Viewer Component Initialization
The Essential JS 2 JavaScript components can be initialized by using either of the following ways:
- Using local script and style references in an HTML page.
- Using a CDN link for script and style reference.
Using local script and style references in an HTML page
Step 1: Create an app folder ‘myapp’ for Essential JS 2 JavaScript components.
Step 2: You can get the global scripts and styles from the Essential Studio JavaScript (Essential JS 2) build installed location.
Syntax:
Script: **(installed location)**/Syncfusion/Essential Studio/{RELEASE_VERSION}/Essential JS 2/{PACKAGE_NAME}/dist/global/{PACKAGE_NAME}.min.js
Styles: **(installed location)**/Syncfusion/Essential Studio/{RELEASE_VERSION}/Essential JS 2/{PACKAGE_NAME}/styles/material.cssExample:
Script: C:/Program Files (x86)/Syncfusion/Essential Studio/16.4.40/Essential JS 2/ej2-pdfviewer/dist/global/ej2-pdfviewer.min.js
Styles: C:/Program Files (x86)/Syncfusion/Essential Studio/15.4.40/Essential JS 2/ej2-pdfviewer/styles/material.cssStep 4: Create an HTML page (index.html) in the ‘myapp’ location and add the Essential JS 2 script and style references.
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Essential JS 2</title> <!-- Essential JS 2 material theme --> <link href="resources/fabric.css" rel="stylesheet" type="text/css" /> <!-- Essential JS 2 PDF Viewer's global script --> <script src="resources/ej2-pdfviewer.min.js" type="text/javascript"></script> <script src="resources/ej2.min.js" type="text/javascript"></script> </head> <body> </body> </html>
Step 5: Now, add the Div element and initiate the Essential JS 2 PDF Viewer component in the index.html by using the following code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Essential JS 2</title>
<!-- Essential JS 2 fabric theme -->
<link href="resources/fabric.css" rel="stylesheet" type="text/css" />
<!-- Essential JS 2 DocumentEditor's global script -->
<script src="resources/ej2-pdfviewer.min.js" type="text/javascript"></script>
<script src="resources/ej2.min.js" type="text/javascript"></script>
</head>
<body>
<!--element which is going to render-->
<div id='PdfViewer'>
</div>
<script>
// Initialize PDF Viewer component.
var pdfviewer = new ej.pdfviewer.PdfViewer({
documentPath: "PDF_Succinctly.pdf",
serviceUrl: 'http://localhost:62869/api/pdfviewer'
});
// PDF Viewer control rendering starts
pdfviewer.appendTo('#PdfViewer');
</script>
</body>
</html>
For PDF Viewer serviceUrl creation, follow the steps provided in the following link:
https://www.syncfusion.com/kb/10346/how-to-create-pdf-viewer-web-service-application-in-asp-net-core
Step 6: Now, run the index.html in a web browser, and it will render the Essential JS 2 PDF Viewer component.
Using CDN link for script and style reference
Step 1: Create an app folder myapp for the Essential JS 2 JavaScript components.
Step 2: The Essential JS 2 component’s global scripts and styles are already hosted in the below CDN link formats.
Syntax:
Script: http://cdn.syncfusion.com/ej2/{PACKAGE_NAME}/dist/global/{PACKAGE_NAME}.min.js
Styles: http://cdn.syncfusion.com/ej2/{PACKAGE_NAME}/styles/material.css
Example:
Script: https://cdn.syncfusion.com/ej2/17.3.27/dist/ej2.min.js Styles: https://cdn.syncfusion.com/ej2/17.3.27/material.css
Refer the CDN link with the required version to avoid the conflicts. Please find the below UG to use CDN links with version.https://ej2.syncfusion.com/documentation/deployment/#cdn
Step 3: Create an HTML page (index.html) in the myapp location and add the CDN link references. Now, add the Div element and initiate the Essential JS 2 PDF Viewer component in the index.html by using the following code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Essential JS 2</title>
<link href="https://cdn.syncfusion.com/ej2/17.3.27/material.css" rel="stylesheet">
<!-- Essential JS 2 PDF Viewer's global script -->
<script src="https://cdn.syncfusion.com/ej2/17.3.27/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
<!--element which is going to render-->
<div id="container">
<div id="PdfViewer" style="height:500px;width:100%;">
</div>
</div>
<script>
// Initialize PDF Viewer component.
var pdfviewer = new ej.pdfviewer.PdfViewer({
documentPath: "PDF_Succinctly.pdf",
serviceUrl: 'https://ej2services.syncfusion.com/production/web-services/api/pdfviewer'
});
ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Navigation, ej.pdfviewer.Print);
//PDF Viewer control rendering starts
pdfviewer.appendTo('#PdfViewer');
</script>
<script>
var ele = document.getElementById('container');
if (ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body>
</html>
Step 4: Now, Now, run the index.html in a web browser, and it will render the Essential JS 2 PDF Viewer component.
Conclusion:
I hope you enjoyed learning about how to view PDF document using web PDF Viewer in HTML5.
