Configure Wasm-Based PDF Editor

DsPdfViewer provides a WebAssembly (Wasm)-based PDF viewer and editor, DsPdfViewer/Wasm, that allows you to edit and save modified PDF documents locally on the client side without requiring the viewer to connect to a remote Support API service or exchange data with a remote server.

DsPdfViewer distribution zip includes the following files for configuring DsPdfViewer/Wasm:

wasmSupportApi.js: JavaScript communication layer with the embedded Wasm binary.
wasmSupportApiServer.js: JavaScript communication layer for loading the external Wasm binary.
DsPdf.wasm: External Wasm binary used with wasmSupportApiServer.js.
examples/support-api-wasm-embedded.html: Example showing embedded Wasm deployment.
examples/support-api-wasm-external.html: Example showing external Wasm deployment.

The embedded deployment approach uses wasmSupportApi.js and does not require deploying a separate .wasm file.

The external deployment approach uses wasmSupportApiServer.js together with DsPdf.wasm. This approach provides a smaller initial payload because the .wasm file is loaded only when editing starts.

DsPdfViewer/Wasm supports 14 standard PDF fonts by default. You can also add custom fonts from a web server using the registerFont method. For more information, refer to Custom Fonts.

Note: Support API is required for PDF editing features and is available only with the Professional Deployment License.

Configure DsPdfViewer/Wasm for Editing

The following steps describe how to configure DsPdfViewer/Wasm in a web application.

1. Install the Package

Install DsPdfViewer using npm:

npm install @mescius/dspdfviewer

The package includes the following files:

node_modules/@mescius/dspdfviewer/
├── dspdfviewer.js
├── dspdfviewer.worker.js
├── DsPdf.wasm
├── wasmSupportApi.js
└── wasmSupportApiServer.js

2. Copy the Required Files

Copy the required files to a location served by your web server, such as wwwroot/lib, public, or www.

Required viewer files:

dspdfviewer.js
dspdfviewer.worker.js

For embedded Wasm deployment:

wasmSupportApi.js

For external Wasm deployment:

wasmSupportApiServer.js
DsPdf.wasm

3. Reference the Scripts and Initialize the Viewer

Embedded Wasm deployment:

<script src="lib/dspdfviewer.js"></script>
<script src="lib/wasmSupportApi.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();
    }
</script>

<body onload="loadPdfViewer('#root')">
    <div id="root"></div>
</body>

External Wasm deployment:

<script src="lib/dspdfviewer.js"></script>
<script src="lib/wasmSupportApiServer.js"></script>

<script>
    function loadPdfViewer(selector) {
        DsPdfViewer.LicenseKey = 'your_license_key';

        var viewer = new DsPdfViewer(selector, {
            supportApi: {
                implementation: new WasmSupportApi({
                    wasmUrl: 'lib/DsPdf.wasm'
                })
            }
        });

        viewer.addDefaultPanels();
        viewer.addAnnotationEditorPanel();
        viewer.addFormEditorPanel();
    }
</script>

4. Configure the Web Server for .wasm Files

When using the external Wasm deployment approach, configure the web server to serve .wasm files with the correct MIME type.

Most static web servers already support this configuration. IIS requires an explicit MIME type mapping in web.config:

<configuration>
  <system.webServer>
    <staticContent>
      <remove fileExtension=".wasm" />
      <mimeMap fileExtension=".wasm" mimeType="application/wasm" />
    </staticContent>
  </system.webServer>
</configuration>

5. Run Local Examples

To run the local documentation and examples included in the DsPdfViewer package, run the following command from node_modules/@mescius/dspdfviewer:

npx serve

Open /index.html in the browser after the local server starts. After the page loads, the viewer opens with annotation and form editor tools enabled. To view additional examples, open /examples/index.html.

The following examples are included:

support-api-wasm-embedded.html
support-api-wasm-external.html

Note: For more information about how the viewer connects to different Support API implementations, see ISupportApiBase.

Limitations

DsPdfViewer/Wasm Support API does not support the following features in the client-side Wasm configuration:

Redaction
Electronic signatures
Collaboration
Replace text options