Chelsea Devereaux for MESCIUS inc.

Posted on Oct 25 • Originally published at Medium

The Definitive Guide to JavaScript PDF Viewers

#webdev #devops #javascript #programming

In the modern business landscape, the efficient management and presentation of documents, such as PDFs, is crucial for businesses and individuals alike. Traditional methods of document distribution and viewing often involve cumbersome processes and can come with limited accessibility. JavaScript PDF Viewers offer a dynamic and interactive solution by enabling seamless integration of PDF content within web applications. These PDF Viewers empower users to view, search, and interact with PDFs directly from their browsers, streamlining their workflow and enhancing user experience.

Let’s take a look at the current JavaScript ecosystem; we’ll review the evolution of JavaScript and the various frameworks that have become mainstays, explore the shift from desktop-based applications to web apps, and explain how JavaScript PDF Viewers can help you manage, distribute, and work with your businesses’ documents more efficiently. Afterward, we’ll look at the core functionalities offered by JavaScript PDF Viewers, talk about the benefits of integrating PDF Viewers into your JavaScript applications, and then explain the process of integrating a PDF Viewer into your web application using the Document Solutions JavaScript PDF Viewer.

The Current JavaScript Ecosystem

The JavaScript ecosystem is constantly changing; new frameworks, libraries, and language extensions are released daily, reshaping the web development landscape. While this high-paced change can be overwhelming, a few dominant players have emerged. React, Angular, and Vue, along with their respective development environments, have solidified their positions as industry standards. We’ve also seen several new frameworks, such as Svelte, Next.js, and Nuxt.js (the latter of the two built on top of React and Vue), come onto the scene over the last few years and have left their mark. TypeScript, a superset of JavaScript, has gained significant traction not only in the front-end environment but also in the server-side environment via NodeJS, providing developers with enhanced tooling and scalability for complex applications.

Though there are a lot of different technologies out there for building web applications, we’re only going to talk about a few of the major options:

Angular: Starting as AngularJS, Angular is a TypeScript-based open-source framework managed by the Angular Team at Google. It was one of the earliest “modern” frameworks to be adopted into public use and has been the spark for several other libraries and frameworks.
React: Maintained by Meta, React is different than other web frameworks in that it is itself a JavaScript library and not a fully-fledged framework. It was created to improve the process of designing and building user interfaces, allowing developers to use a structured approach when building their UI components.
Vue.js: Like Angular, Vue.js is an open-source framework based on JavaScript that uses the model-view-viewmodel structure. Based on the original AngularJS, Vue is designed as a lightweight Angular-alternative framework.
Svelte: A framework that has grown in popularity in recent years, Svelte is also JavaScript-based. Unlike some of the other popular frameworks used, Svelte does away with much of the boiler plating required by other frameworks.
Next.js and Nuxt.js: Based on React and Vue.js, respectively, Next.js and Nuxt.js serve as extensions of their parent frameworks. Their goal is to allow developers to build full-stack applications more easily, including improvements to features such as server-side rendering.

Now that we know a bit more about some popular web technologies, let’s explore the rise of web-based applications and how they’re slowly replacing desktop applications in the current business environment.

The Rise of Web-Based Applications

The business environment has undergone a dramatic shift in recent years, with companies turning to web-based applications to handle more of their business needs. The decline of desktop applications and the rise of web-based solutions is driven by an array of benefits that have changed how work is conducted.

Ease of Access

Traditionally, software required installation on specific devices, limiting its accessibility to those machines. Web applications revolutionized this by enabling access from any internet-connected device. This shift simplified deployment, updates, and maintenance as developers could manage changes centrally, and users automatically received updates without manual intervention.

Collaboration

Real-time collaboration is important for modern business operations. While desktop applications historically fell short in this area, advancements in cloud-based storage and real-time data synchronization have propelled web applications to the forefront of collaborative tools.

Scalability

Businesses require IT infrastructure that can adapt to their evolving needs. Cloud computing offers unparalleled scalability, allowing organizations to effortlessly adjust resources in response to growth or fluctuations. This eliminates the costly and time-consuming process of upgrading on-premises hardware.

While desktop applications still hold value for businesses, such as high-performance computing or specialized software, the advantages of web applications have become clear. With the rise of web applications has come the rise of libraries that previously only existed for desktop applications, and there are few operations more important to an organization than proper document management. In the next section, we’ll discuss some of the benefits of a JavaScript PDF Viewer and how developers can leverage it to improve a business’s workflow.

What to Consider when Choosing a JavaScript PDF Viewer

Now that we’ve reviewed some of the benefits a JavaScript PDF Viewer can provide to your company, it’s time to look at what should be considered when choosing a library. There are a lot of choices out there, and reviewing various libraries to find one that fits your needs can be overwhelming. Below are some things to consider before adding a PDF Viewer to your application:

Choosing the Right Library

Evaluate Your Needs: Determine the specific features required for your application (e.g., manipulation, conversion, form filling).
Consider Performance: For high-volume or complex operations, opt for libraries optimized for performance.
Evaluate Licensing: Choose a library with a suitable licensing model (open-source, commercial, etc.).

Design Considerations

Cross-Platform Compatibility: Make sure PDFs can be viewed across browsers and devices.
Responsive Design: Choose a viewer that can adjust and fit to the size of the device.

Performance Optimization

Asynchronous Operations: Utilize asynchronous programming for non-blocking operations.
Caching: Cache frequently used data or generated PDF content to reduce processing time.
Optimize Image Quality: Compress images without compromising visual quality.

Security and Compliance

Protect Sensitive Data: Choose a Viewer that allows you to encrypt/decrypt PDF documents using strong encryption algorithms or password-protection features.
Validate Data: Verify data integrity before incorporating it into PDFs.
Comply with Regulations: Adhere to industry-specific regulations (e.g., HIPAA, GDPR).
Digital Signatures: Ensure the JavaScript PDF Viewer allows for the implementation of digital signatures for document authentication and integrity.

By following these best practices, you can narrow down the various JavaScript PDF Viewer libraries available and find the one that best suits your needs.

JavaScript PDF Viewer Features and Uses

The Document Solutions JavaScript PDF Viewer (formerly GrapeCity Documents JavaScript PDF Viewer) is a full-featured JavaScript PDF Viewer library that makes it easy for users to view, edit, submit, and save PDF documents. From adding annotations to filling out forms, this library provides the tools to allow your users to view and edit any of their PDF documents.

Below are just a few of the key features and capabilities provided by the Documents Solutions JavaScript PDF Viewer:

Client-Side Viewer: The PDF Viewer is integrated on the client side of your application without the need for third-party tools, allowing you to seamlessly add PDF viewing capabilities to your application.
Client/Server-Based Editing: The DsPdfViewer supports editing PDFs completely on the client (using a Wasm module included with the viewer, running in the client browser) or with the help of a .NET server.
Advanced Text Search: Search for text in documents using specific search terms or patterns, and customize the search by selecting match case, whole word, starts with, ends with, proximity search, or wildcard search options.
Forms Support: Fill, submit, and reset filled forms in the browser. To save them as PDFs on your server, you can also use the Document Solutions for PDF API on the server.
Form Filler: Easily fill out forms on mobile devices and other small screens with the form filler feature. This feature also allows you to customize the UI appearance and include input validation for users.
Page Display Layout: Enhance the viewing experience by setting the page layout of PDF documents. The Documents Solutions JavaScript PDF Viewer supports setting the layout to single-page view, two-page view, single-page scrolling, or two-page scrolling.
Annotations Support: Review and mark information with annotations. With the DsPdfViewer, add, modify, or remove annotations from new or existing PDF documents. The annotation editor allows you to apply annotation properties, comment, reply, hide annotations, and redact PDF documents.
Collaboration: Work with other users when designing and reviewing PDFs. This feature is unavailable when using the Wasm Viewer.
JavaScript Actions: Bind JavaScript actions to form fields, buttons, and documents.
Graphical and Digital Signature: Digitally sign PDF documents on the client side. To sign a document digitally, simply provide contact information, signer’s name, reason, and signature field.
Multi-Language Support: Localize the user interface to improve compatibility across markets.

Implementing a JavaScript PDF Viewer in a JavaScript Application

Now that we’ve reviewed the benefits of using a JavaScript PDF Viewer library and the features of Document Solutions JavaScript PDF Viewer, it’s time to implement the PDF Viewer in a web application.

Project Setup

For this example, we will set up an ASP.NET Core Web Application that uses Document Solutions JavaScript PDF Viewer. The steps are as follows:

Open Microsoft Visual Studio 2022 and select Create a new Project | ASP.NET Core Web Application:

2.In the Create a new ASP.NET Core web application dialog, select .NET Core 8.0 as the target framework:

3.Make sure the sample project builds and runs properly (it should show the “Welcome” screen in the browser). The following steps assume that the project is named ‘WebApplication1.’

4.Run the following command to install the Document Solutions JavaScript PDF Viewer; make sure that the directory location in the command prompt is set to the lib folder of the project:

npm install @mescius/dspdfviewer

5.In Visual Studio, add a new HTML page to the wwwroot folder and name it index.html:

6.Paste the following code in the index.html file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <title>PDF Viewer Demo | PDF Plugin</title>
    <link rel="stylesheet" href="https://cdn.materialdesignicons.com/2.8.94/css/materialdesignicons.min.css">
    <script>
        function loadPdfViewer(selector) {
            var viewer = new DsPdfViewer(selector, { /* Specify options here */ }
            );
            viewer.addDefaultPanels();
            viewer.open("Wetlands.pdf");
        }
    </script>
</head>
<body onload="loadPdfViewer('#root')">
    <div id="root"></div>
    <script type="text/javascript" src="lib/node_modules/@mescius/dspdfviewer/dspdfviewer.js "></script>
</body>
</html>

This code will load the dspdfviewer.js file, which is what allows us to bind the JavaScript PDF Viewer to the root div in the markup. In addition, we will also load the static Wetlands.pdf document into the viewer. To make sure the PDF can be loaded, place the PDF in the wwwroot directory.

7.Modify the Program.cs file by replacing the contents with the following code:

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorPages();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}
app.UseHttpsRedirection();
app.UseDefaultFiles();
app.UseStaticFiles();
app.UseRouting();
app.UseAuthorization();
app.MapRazorPages();
app.Run();

8.Build and run the application. A page with the Document Solutions JavaScript PDF Viewer (loaded with the Wetlands.pdf) will be displayed in your default browser:

In addition to viewing PDFs, the DsPdfViewer (with the use of the Wasm-based PDF editor) allows you to edit PDFs and is just as easy to add to your application as the standard PDF viewer.

To do so, repeat the same process as when creating a project, except this time, we will add the Wasm editor. This comes with the installation of the DsPdfViewer library.

Inside of the index.cshtml file, add the following code:

@page
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}
<style>
    .container {
        height: calc(100% - 128px);
        max-width: inherit;
    }

    #host, .pb-3 {
        height: 100%;
    }
</style>
<div id="host"></div>
<script src="~/lib/node_modules/@@mescius/dspdfviewer/dspdfviewer.js" asp-append-version="true"></script>
<script async type="text/javascript" src="~/lib/node_modules/@@mescius/dspdfviewer/DsPdf.js"></script>
<script src="~/lib/node_modules/@@mescius/dspdfviewer/wasmSupportApiServer.js"></script>
<script>
    //DsPdfViewer.LicenseKey = 'your_license_key';
    var viewer = new DsPdfViewer("#host", {
        supportApi: {
            implementation: new WasmSupportApi()
        }
    });
    viewer.addDefaultPanels();
    viewer.addAnnotationEditorPanel();
    viewer.addFormEditorPanel();
    viewer.beforeUnloadConfirmation = true;
    viewer.newDocument();
</script>

Now, when you build and run your application, it will display the DsPDfViewer in your browser, which will contain the annotation and form editor tools to edit PDF documents:

Conclusion

JavaScript PDF Viewers are cutting-edge tools that allow users to more efficiently manage their PDF documents. As organizations transition from desktop-based applications to web-based applications, these tools will only become more important to day-to-day business tasks. Document Solutions JavaScript PDF Viewer offers a powerful solution that enables easy access to users’ documents anytime, anywhere.

You can find more samples and features outlined in our demos and documentation pages, or try the Document Solutions JavaScript PDF Viewer for yourself.

DEV Community