New WebAssembly-based PDF Viewer to Edit PDFs in Web Apps

August 21 2024

In today's fast-paced digital world, the need for efficient and seamless document viewing and editing has never been more critical. PDFs, essential in business, education, and personal use, demand a viewer that is not only fast but also reliable and versatile. With the release of v7.2, Document Solutions PDF Viewer (DsPdfViewer) introduces another option for editing PDFs using a new WebAssembly (Wasm) module that allows you to modify and save PDF documents directly in your browser, eliminating the need for a server connection.

Ready to Get Started? Download Document Solutions for PDF Today!

Overview of DsPdfViewer/Wasm

DsPdfViewer is a versatile PDF viewer that becomes a powerful PDF editor when connected to SupportApi, our PDF modification engine. In previous releases, in order to enable the PDF editing functionality in DsPdfViewer, you had to set up a .NET server running the DS.Documents.Pdf.ViewerSupportApi and DS.Documents.Pdf combo, and establish a connection between the viewer and SupportApi on the server. To modify a PDF, any edits made by the user had to be sent to the server together with the original PDF on the server where the edits were applied, and the modified PDF had to be sent back to the client.

Starting with the v7.2 release, there is a great new option to edit PDF files. You can now connect DsPdfViewer to the WebAssembly (Wasm) implementation of SupportApi, which runs in the client browser itself so that all modifications are made locally without the need to exchange any data with a remote server. The Wasm SupportApi is included in the DsPdfViewer distribution (you don’t need any components from NuGet.org or other sources) and provides the following unique advantages:

Ease of Deployment: You do not need to set up a .NET server running SupportApi and DsPdf when deploying your Web applications.
Performance: DsPdfViewer/Wasm runs in your browser and is not affected by the internet connection speed or remote server performance.
Security: The PDF is modified within the client browser, eliminating the need to exchange sensitive data with the server.
Pure JS: DsPdfViewer/Wasm offers a purely JavaScript/HTML development solution. You do not need Visual Studio or .NET to implement it.
Compatibility: WebAssembly is supported by all major browsers, ensuring that our PDF viewer and editor work seamlessly across different platforms and devices without compatibility issues.

Key Features of DsPdfViewer/Wasm

In addition to advanced viewing, navigation, and other read-only features of the standard DsPdfViewer, DsPdfViewer/Wasm provides access to most of the PDF-editing features that, until now, were only available when using the server SupportApi, including:

Form filling and editing
Annotation editor
Quick edits using secondary toolbars
PDF organizer (create, merge, reorder, or remove PDF pages)
Editing of optional content (layers)
…and more

Note that collaboration features are not available in the Wasm configuration, as there is no server to sync the changes from different users. A few other editor features are currently under development and will be added in the coming releases.

Try It Now!

To see the new DsPdfViewer/Wasm in action and check out its features, run the following command in an empty directory on your system:

npm i @mescius/dspdfviewer

This will create a node_modules\@mescius\dspdfviewer\ sub-directory and download the latest version of DsPdfViewer into it. Open that directory in your desktop file manager and simply double-click the index-wasm.html file located in that directory. A page will open with DsPdfViewer connected to the Wasm SupportApi running in your browser. You can confirm this by clicking the ‘info’ icon in the viewer’s toolbar.

Wasm Based PDF Viewer - Allows PDF Editing without Server-Side Editing

This should show the About box with the viewer and Wasm SupportApi versions.

JavaScript PDF Wasm Based Viewer/Editor Control

Using Fonts Other than the Standard PDF Fonts

Note that while opening index-wasm.html directly from the file system allows you to quickly load an HTML page with fully functional DsPdfViewer/Wasm, this scenario has a limitation. Due to browser security restrictions regarding file:// requests, you won’t be able to use fonts other than the standard PDF fonts (those are built into the viewer and are always available) when adding annotations and fields to your documents.

To use arbitrary fonts in your PDFs, you will need to load the page with DsPdfViewer/Wasm from a web server, which would typically be the case when the viewer is used in a Web application. You will also need to explicitly make the required fonts available to the viewer.

Add the necessary font files to a subfolder of your web app, such as assets/fonts.
Register each font with the viewer in HTML, e.g., viewer.registerFont("CustomFont", "http://127.0.0.1:8080/assets/fonts/custom-font.ttf");

The viewer distribution includes (in the node_modules\@mescius\dspdfviewer\ subdirectory mentioned above) the index-wasm-server.html file, which (unlike index-wasm.html) needs to be opened from a web server. It loads the Wasm module from DsPdf.wasm, which is smaller than wasmSupportApi.js, so this is the preferred method to use in real apps. You can modify that file to register additional fonts as described above. You can then easily try this on your desktop by opening the command prompt (shell) window in the viewer directory and executing the following command:

npx http-server -o index-wasm-server.html

If you do not have http-server installed, this command will offer to install it. Then, it will start the server and open http://127.0.0.1:8080/index-wasm-server.html in your default browser. DsPdfViewer/Wasm will be ready to use with the additional fonts you specified available.

Deployment and Licensing

DsPdfViewer/Wasm requires the DsPdf Professional License to edit PDF files. The DsPdfViewer files can be downloaded from the MESCUIS website or NPM. All the needed files, including the Wasm binaries, will be available in the viewer directory. The trial version allows you to try the new editor without a license on your local system, as described above. The licensing restrictions for using DsPdfViewer/Wasm are the same as those for using server-based SupportApi.

To deploy DsPdfViewer/Wasm with your Web application:

Add the DsPdfViewer distribution files to your app by running npm i @mescius/dspdfviewer.

To reduce your deployment size, you may remove the file wasmSupportApi.js from your app, as it is not needed when using a web server.

When initializing DsPdfViewer, add a reference to wasmSupportApiServer.js and set the supportApi implementation to WasmSupportApi, as shown in the following example. This is a copy of index-wasm-server.html included in the DsPdfViewer distribution:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="theme-color" content="#000000" />
    <title>Document Solutions PDF Viewer Wasm Demo</title>
    <script src="dspdfviewer.js"></script>
    <script async type="text/javascript" src="DsPdf.js"></script>
    <script src="wasmSupportApiServer.js"></script>
    <script>
        function loadPdfViewer(selector) {
            //DsPdfViewer.LicenseKey = 'your_license_key';
            var viewer = new DsPdfViewer(selector, {
                supportApi: {
                    implementation: new WasmSupportApi()
                }
            });
            viewer.addDefaultPanels();
            viewer.addAnnotationEditorPanel();
            viewer.addFormEditorPanel();
            // Below is an example of registering a font with its name and URL.
            // This allows DsPdfViewer to use the registered font when viewing and editing PDFs.
            // Note that the page must be served from a web server to load the font,
            // because the file:// protocol does not allow font loading.
            // Font name: 'CustomFont'
            // URL: 'https://example.com/fonts/custom-font.ttf'
            // viewer.registerFont('CustomFont', 'https://example.com/fonts/custom-font.ttf');
        }
    </script>
</head>
<body onload="loadPdfViewer('#root')">
    <div id="root"></div>
</body>
</html>

That’s it! Now, your DsPdfViewer will use the Wasm implementation of SupportApi and will provide editing capabilities without the need to connect to a .NET server.

Introducing WebAssembly(Wasm)-based PDF Viewer

Of course, if you need the collaboration features of DsPdfViewer or other features not yet available in the Wasm version, you can still use the included server-based SupportApi instead. In the v7.2 release, the following features are not yet supported in DsPdfViewer/Wasm and will be disabled in the viewer UI: