Syncfusion is happy to let you know that the production version of the JavaScript PDF Viewer component for web frameworks is available from 2019 Volume 1 release (version 17.1.0.38).
In this current release, we have made various improvements in terms of viewing experience and new features such as right-to-left support, accessibility, and text mark-up annotations. The PDF Viewer component is interoperable with other third-party frameworks such as Angular, React, and Vue.js.
The PDF Viewer is designed to provide high performance in every aspect, but it is especially powerful in the following ways:
In this blog, you will learn how to get started with the PDF Viewer and its feature set, uses, and different modules, as well as learn the details of the roadmap.
Here are some common uses for the JavaScript PDF Viewer component:
For configuring PDF Viewer, we have to perform changes on both the server-side and client-side.
The JavaScript PDF Viewer has server-side dependency to get details from PDF documents. First of all, let’s see the steps to create an ASP.NET Core Web API service for server-side processing.
Create New VS Project
Select ASP.NET Core Web Application
Select Web API Template
Install Syncfusion.EJ2.PdfViewer.AspNet.Core.Windows
Note: For Linux and macOS operating systems, use the following respective NuGet package:
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Mvc;
using Newtonsoft.Json;
using Syncfusion.EJ2.PdfViewer;
using System;
using System.Collections.Generic;
using System.IO;
namespace ej2_pdfviewer_service.Controllers
{
public class PdfViewerController : Controller
{
private IHostingEnvironment _hostingEnvironment;
public PdfViewerController(IHostingEnvironment hostingEnvironment)
{
_hostingEnvironment = hostingEnvironment;
}
[AcceptVerbs("Post")]
[HttpPost]
[Microsoft.AspNetCore.Cors.EnableCors("MyPolicy")]
//Post action for Loading the PDF documents
public IActionResult Load([FromBody] Dictionary jsonObject)
{
PdfRenderer pdfviewer = new PdfRenderer();
MemoryStream stream = new MemoryStream();
object jsonResult = new object();
if (jsonObject != null && jsonObject.ContainsKey("document"))
{
if (bool.Parse(jsonObject["isFileName"]))
{
string documentPath = GetDocumentPath(jsonObject["document"]);
if (!string.IsNullOrEmpty(documentPath))
{
byte[] bytes = System.IO.File.ReadAllBytes(documentPath);
stream = new MemoryStream(bytes);
}
else
{
return this.Content(jsonObject["document"] + " is not found");
}
}
else
{
byte[] bytes = Convert.FromBase64String(jsonObject["document"]);
stream = new MemoryStream(bytes);
}
}
jsonResult = pdfviewer.Load(stream, jsonObject);
return Content(JsonConvert.SerializeObject(jsonResult));
}
[AcceptVerbs("Post")]
[HttpPost]
[Microsoft.AspNetCore.Cors.EnableCors("MyPolicy")]
//Post action for processing the bookmarks from the PDF documents
public IActionResult Bookmarks([FromBody] Dictionary jsonObject)
{
PdfRenderer pdfviewer = new PdfRenderer();
var jsonResult = pdfviewer.GetBookmarks(jsonObject);
return Content(JsonConvert.SerializeObject(jsonResult));
}
[AcceptVerbs("Post")]
[HttpPost]
[Microsoft.AspNetCore.Cors.EnableCors("MyPolicy")]
//Post action for processing the PDF documents.
public IActionResult RenderPdfPages([FromBody] Dictionary jsonObject)
{
PdfRenderer pdfviewer = new PdfRenderer();
object jsonResult = pdfviewer.GetPage(jsonObject);
return Content(JsonConvert.SerializeObject(jsonResult));
}
[AcceptVerbs("Post")]
[HttpPost]
[Microsoft.AspNetCore.Cors.EnableCors("MyPolicy")]
//Post action for rendering the ThumbnailImages
public IActionResult RenderThumbnailImages([FromBody] Dictionary jsonObject)
{
PdfRenderer pdfviewer = new PdfRenderer();
object result = pdfviewer.GetThumbnailImages(jsonObject);
return Content(JsonConvert.SerializeObject(result));
}
[AcceptVerbs("Post")]
[HttpPost]
[Microsoft.AspNetCore.Cors.EnableCors("MyPolicy")]
//Post action for unloading and disposing the PDF document resources
public IActionResult Unload([FromBody] Dictionary jsonObject)
{
PdfRenderer pdfviewer = new PdfRenderer();
pdfviewer.ClearCache(jsonObject);
return this.Content("Document cache is cleared");
}
[HttpPost]
[Microsoft.AspNetCore.Cors.EnableCors("MyPolicy")]
//Post action for downloading the PDF documents
public IActionResult Download([FromBody] Dictionary jsonObject)
{
PdfRenderer pdfviewer = new PdfRenderer();
string documentBase = pdfviewer.GetDocumentAsBase64(jsonObject);
return Content(documentBase);
}
[HttpPost]
[Microsoft.AspNetCore.Cors.EnableCors("MyPolicy")]
//Post action for printing the PDF documents
public IActionResult PrintImages([FromBody] Dictionary jsonObject)
{
PdfRenderer pdfviewer = new PdfRenderer();
object pageImage = pdfviewer.GetPrintImage(jsonObject);
return Content(JsonConvert.SerializeObject(pageImage));
}
//Gets the path of the PDF document
private string GetDocumentPath(string document)
{
string documentPath = string.Empty;
if (!System.IO.File.Exists(document))
{
var path = _hostingEnvironment.ContentRootPath;
if (System.IO.File.Exists(path + "\\Data\\" + document))
documentPath = path + "\\Data\\" + document;
}
else
{
documentPath = document;
}
return documentPath;
}
}
} {
"iisSettings": {
"windowsAuthentication": false,
"anonymousAuthentication": true,
"iisExpress": {
"applicationUrl": "http://localhost:58767/",
"sslPort": 0
}
},
"profiles": {
"IIS Express": {
"commandName": "IISExpress",
"launchBrowser": true,
"launchUrl": "pdfviewer",
"environmentVariables": {
"ASPNETCORE_ENVIRONMENT": "Development"
}
},
"ej2_pdfviewer_service": {
"commandName": "Project",
"launchBrowser": true,
"launchUrl": "pdfviewer",
"environmentVariables": {
"ASPNETCORE_ENVIRONMENT": "Development"
},
"applicationUrl": "http://localhost:62978/"
}
}
}
public void ConfigureServices(IServiceCollection services)
{
services.AddMemoryCache();
services.AddMvc();
services.AddCors(o => o.AddPolicy("MyPolicy", builder =>
{
builder.AllowAnyOrigin()
.AllowAnyMethod()
.AllowAnyHeader();
}));
services.Configure(options => options.Level = System.IO.Compression.CompressionLevel.Optimal);
services.AddResponseCompression();
}
[Microsoft.AspNetCore.Cors.EnableCors("MyPolicy")]
You can download the same ASP.NET Core Web API service application from the following location.
ASP.NET Core Web API service application
Note: Similarly, you can create the ASP.NET MVC Web API service for PDF Viewer by using the steps provided in the following link,
https://ej2.syncfusion.com/documentation/pdfviewer/how-to/create-pdfviewer-service
And also you can download the ASP.NET MVC Web API service application from the following location.
ASP.NET MVC Web API service application
Now let’s look at the steps for configuring PDF Viewer on client-side.
git clone https://github.com/syncfusion/ej2-quickstart.git quickstart |
System.config({
paths: {
'npm:': '../node_modules/',
'syncfusion:': 'npm:@syncfusion/'
},
map: {
app: 'app',
//Syncfusion packages mapping
"@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
"@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
"@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
"@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
"@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
"@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
"@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
"@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
"@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
"@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
"@syncfusion/ej2-pdfviewer": "syncfusion:ej2-pdfviewer/dist/ej2-pdfviewer.umd.min.js"
},
packages: {
'app': { main: 'app', defaultExtension: 'js' }
}
});
System.import('app');
<!--Element which will be rendered as PDF Viewer --></pre> <div id="PdfViewer" style="height: 600px;"></div>
@import '../../node_modules/@syncfusion/ej2/material.css';
// Import the required modules
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
ThumbnailView, Print, TextSelection, TextSearch, Annotation} from '@syncfusion/ej2-pdfviewer';
// Inject the required modules
PdfViewer.Inject(Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation);
// Create the PDF Viewer instance
let pdfviewer: PdfViewer = new PdfViewer();
// Map the service URL
// Please use your own service URL of ASP.NET (Core or MVC) Web API
pdfviewer.serviceUrl = "http://localhost:62978/api/pdfviewer";
pdfviewer.appendTo("#PdfViewer");
pdfviewer.load('inputfile.pdf', null);
Note: Here you have to use the service URL from ASP.NET Core or ASP.NET MVC Web API service application URL as provided in earlier steps.
npm start |
PDF Viewer default view
All the features we’ve explored are broken into individual modules, so as to enable selective referencing; only the features you need have to be included in your application. Here are the available modules:
This PDF Viewer supports the following Web Frameworks:
In the future release of Syncfusion’s JavaScript PDF Viewer, the following features can be expected:
We hope that you now understand the features of the JavaScript PDF Viewer, real use cases for it, and how to integrate it into a web application. If you would like to try the PDF Viewer component, you can download our free trial. You can visit the PDF Viewer source in GitHub and can check our sample browser and documentation for detailed explanations if you want to explore further applications.
If you have any questions or need any information, please let us know in the comments section below. You can also contact us through our support forum or Direct-Trac or feedback portal. We are always happy to assist you.