# Document Solutions PDF Viewer

#### [日本語](#japanese)

__Document Solutions PDF Viewer__ (__DsPdfViewer__) is a fast, modern JavaScript based PDF viewer and editor that runs in all major browsers.
The viewer can be used as a cross platform solution to view (or modify - see _Support API_ below) PDF documents on Windows, MAC, Linux, iOS and Android devices.
DsPdfViewer is included in [Document Solutions for PDF (DsPdf)](https://developer.mescius.com/document-solutions/dot-net-pdf-api) - a feature-rich cross-platform PDF API library for .NET Core.

Client-side (Wasm) or server-side
([DS.Documents.Pdf.ViewerSupportApi](https://www.nuget.org/packages/DS.Documents.Pdf.ViewerSupportApi/))
[_Support API_](#support_api) option allows you to turn DsPdfViewer into a powerful PDF editor
that can be used to edit existing or create new PDFs, fill and save PDF forms,
remove (redact) sensitive content, add or edit annotations and AcroForm fields, and more.

DsPdfViewer provides a rich JavaScript object model, see __docs/index.html__ for the client API documentation.

Product highlights:

- Works in all modern browsers, including Edge, Chrome, FireFox, Opera, Safari
- Provides form filling and PDF editing tools (see [_Support API_](#support_api)):
  - Customizable and mobile-friendly form filler
  - Annotation and form editors
  - Quick edits using secondary toolbars
  - PDF redaction
  - Signature verification
  - Real-time collaboration mode
  - Other editing features
- Works with frameworks such as React, Preact, Angular
- Supports form filling; filled forms can be printed or form data can be submitted to the server
- Supports XFA (XML Forms Architecture) forms
- Provides caret for text selection/copy, including vertical and RTL texts
- Includes thumbnails, text search, outline, attachments, articles, layers and structure tags panels
- Allows opening PDF files from local disks
- Supports annotations including text, free text, rich text etc.
- Supports redact annotations (including appearance streams), allows user to hide or show redacts
- Supports sound annotations
- Allows rotating and printing the rotated document
- Supports article threads navigation
- Supports file attachments
- Comes with several themes, new custom themes can be added
- Supports external CMaps
- ...and more.

## See it in action

- Go to [Document Solutions for PDF Viewer demos](https://developer.mescius.com/document-solutions/javascript-pdf-viewer/demos/)
  to explore the various features of DsPdfViewer, including features that rely on [_Support API_](#support_api).
  The demo site allows you to modify the demo code and immediately see the effect of your changes.
- The [Document Solutions for PDF API demo site](https://developer.mescius.com/document-solutions/dot-net-pdf-api/demos/)
  uses DsPdfViewer to display sample PDFs.

## Latest changes

## [9.0.4] - 07-Apr-2026
### Fixed
- Fixed an issue where setting viewer.options.snapAlignment = true in the console had no effect. (DOC-5680)
- Fixed an issue where the selected value of a radio button did not persist after saving. (DOC-7351)

## [9.0.3] - 03-Mar-2026
### Fixed
- Fixed an issue where rotated annotations were rendered incorrectly. (DOC-5762)
- Fixed an issue where SVG/PNG export could produce ZIP files with duplicated `.zip` extensions. (DOC-7227)
- Fixed runtime errors that occurred when host DOM element was removed and re-created using Angular `@if / *ngIf` with `hideAnnotationPopups` enabled. (DOC-7277)
- Fixed an issue where mouse wheel scrolling in side panels also scrolled the document in the main window. (DOC-7349)
- Fixed an issue where DsPdfViewer rendered text highlights immediately instead of skipping paint when `skipPaint: true` was specified. (DOC-7160)
- [iOS] Fixed an issue that caused incorrect position of custom highlights in the `Custom Highlights` demo. (DOC-6629)
- Fixed an issue where multi-select list box fields ignored multiple default values after a reset. (DOC-7423)

## [9.0.2] - 04-Feb-2026
### Fixed
- Fixed cross-Origin frame access violation when the viewer is loaded from a jscodemine hosted sample. (DOC-7339)
- [Mobile] Fixed an issue where the value of a checkbox was not updated on a Mobile Phone. (DOC-6865)
- Fixed incorrect mouse wheel behavior where it scrolled unfocused main window before scrolling focused side panel. (DOC-6955)

## [9.0.1] - 23-Jan-2026
### Fixed
- Fixed an issue where signatures created with the Signature tool in Wasm mode on Windows Chromium-based browsers (such as Chrome, Edge, and Brave) were saved as a "DRAFT" stamp instead of the drawn signature. (DOC-7288)
- Fixed an issue where the base URL (webSocketUrl setting) for SignalR requests could not be changed in the ASP.NET SignalR version (ASP.NET Core was not affected). (DOC-6916)

## [9.0.0] - 05-Dec-2025
### Added
- Added HighlightManager API, providing programmatic control over text and custom highlights. (DOC-7151)
### Fixed
- Improved thumbnail image quality in the PDF Organizer dialog. (DOC-7019)
- Fixed a "Worker was terminated" console error when switching between PDF files. (DOC-7152)
- Fixed issues with stamp annotations when using certain transparent images. (DOC-7155)
- [Localization] [Regression] The "Show All" button in notifications was not localized when using the Japanese language. (DOC-7146)

## [8.2.2] - 17-Nov-2025
### Added
- Added findField() and findFields() methods to reliably access current field values.
  ```javascript
  // Example:
  viewer.validateForm(async (value, field) => {		
    const currentField = await viewer.findField(field.fieldName);
    if (field.fieldName === "fld1") {
      console.log(currentField.fieldValue === "Yes" ? "Validation passed." : "Checkbox fld1 must be checked");
    }
  });
  ```
### Fixed
- [Regression] [Localization] Fixed missing localization for the "Show All" button in notifications. (DOC-7146)
- Fixed incorrect page thumbnail display in the PDF Organizer dialog. (DOC-7019)
- Fixed a false "Worker was terminated" console error when quickly switching between PDF files. ((DOC-7152))
- [Server] [Editor] Fixed errors that occurred in Chrome when adding certain PNG images as stamps. (DOC-7155)
- Fixed an issue where checkbox state in validateForm reflected the initial value instead of the current value. (DOC-7192)

## [8.2.1] - 10-Oct-2025
### Added
- Added a font embedding mode option to the `registerFont` method.  
  The new `embedMode` parameter controls how fonts are embedded in PDF output.  
  Available values: `NotEmbed`, `EmbedSubset`, `EmbedFullFont`, `EmbedSubsetNoForms`. (DOC-7070)
  ```javascript
  // Example
  viewer.registerFont('Lato', '/fonts/Lato.ttf', { 
    embedMode: 'EmbedSubset' 
  });
  ```
- Added documentation for HighlightManager API methods and types.
### Fixed
- Fixed an issue where entering a zoom value in the zoom textbox did not work while the “Zoom Mode” dropdown was open. (DOC-7047)
- [Form Editor] Fixed an issue where the drag handle for changing tab order was not displayed. (DOC-7052)
### Changed
- Updated JPN localization for V8.2J. (DOC-7055)

## [8.2.0] - 08-Aug-2025
### Added
- [Annotation Editor] Enabled selection of overlapping annotations in edit mode via the context menu. (DOC-6957)
- [Wasm] [Editor] Enabled table data extractor tool in client-side (Wasm) SupportApi mode. (DOC-6918)
- [Wasm] [Editor] Enabled text replace functionality in client-side (Wasm) SupportApi mode. (DOC-6522, DOC-6786)
- Added new navigation configuration options. (DOC-6411)
  ```javascript
  navigation: {
    showFirstButton: false,    // Toggle first page button
    showLastButton: false,     // Toggle last page button
    showPageInput: true,       // Toggle page input field
    pageCounterFormat: "Page {{current}} of {{total}}",  // Custom counter format
    emptyPageCounterFormat: '-- No Document --',         // Empty state text
    pageInputWidth: 100        // Input field width in px
    buttonSizing: 'compact'    // Controls the sizing of navigation buttons:
                               //  - 'compact': 30px width (default)
                               //  - 'standard': 40px width
                               //  - number: Custom width in pixels
  }
  ```
### Changed
- Partial HTTP requests (Range requests) are now disabled by default via `openParameters.disableRange = true`. (DOC-6969)
  - To enable Range requests, configure the viewer as follows:
  ```javascript
  const viewer = new DsPdfViewer('#viewer', {
    openParameters: {
      disableRange: false
    }
  });
  ```
- Improved support for Japanese and other IME-based input in comb fields. (DOC-6533)
  - Fixed character input issues when using Japanese, Chinese, or emoji keyboards.
  - IME-composed text is now correctly distributed across comb cells.
  - Resolved issues with duplicated or missing characters when selecting from IME suggestions.
  - Existing characters are now preserved during IME-based editing.
- Improved toolbar and side panel layout and usability. (DOC-6411)
  - Toolbar layout:
    - New default items order: 
      - View mode: `Open`, `Save`, `Print`, `Search`.
      - Edit mode: added `Open` before `Save`.
    - `FullScreen` and `Themes` removed from default layout. 
    - `ExtractTable` moved to side panel.
  - Side panel:
    - New default items order: `DocumentList`, `SharedDocuments`, `Search`, `Thumbnails`, `Outline`, `StructureTree`, `Articles`, `Layers`, `Attachments`, `ExtractTable`.
    - `ExtractTable` icon updated.
  - Page Navigation control:
    - Visual changes:
      - Page navigation input is now more compact.
      - First/last page buttons are hidden by default.
      - Page counter display logic improved.
    - Added keyboard shortcuts when the page input box is in focus:
      - ←/→: page up/down when the caret is at first/last position in the control.
      - ↑/↓: page up/down.
      - Home/End: jump to first/last page.
      - Enter: submit manual page number entry.
      - Esc: cancel input.
    - New semantic CSS classes (previously non-customizable):
      - .gc-btn.go-to-first
      - .gc-btn.go-to-last
      - .current-page-input
      - .gcv-page-input__text
  - Reverting to old appearance and layout:
    - To revert to old page navigator appearance:
    ```javascript
    const viewer = new DsPdfViewer('#viewer', {  
      navigation: {  
        showFirstButton: true,
        showLastButton: true,
        pageInputWidth: 100,
        buttonSizing: 'standard'
      }  
    }); 
    ```
    - To revert to old side panel layout:
    ```javascript
    viewer.layoutPanels([
      'DocumentList', 'SharedDocuments', 'Thumbnails', 'Search', 'Outline',
      'ExtractTable', 'Layers', 'StructureTree', 'Attachments', 'Articles', 'sep', 
      'AnnotationEditor', 'FormEditor'
    ]);
    ```
    - To revert to old toolbar layouts:
    ```javascript
    // Main viewer toolbar:
    const viewerButtons = {
      default: ['open', '$navigation', '$split', 'text-selection', 'pan', 'zoom', '$fullscreen', '$split', 'text-tools', 'draw-tools', 'attachment-tools',
        'form-tools', 'page-tools', '$split', 'rotate', 'page-display', 'theme-change', 'print', 'save-as', 'hide-annotations', 'form-filler', 'extract-table', 'search',
        'doc-title', 'doc-properties', 'about'],
      fullscreen: ['$fullscreen', '$navigation', '$split', 'open', 'text-selection', 'pan', 'zoom', '$split', 'text-tools', 'draw-tools', 'attachment-tools',
        'form-tools', 'page-tools', '$split', 'rotate', 'page-display', 'theme-change', 'print', 'save-as', 'hide-annotations', 'form-filler', 'extract-table', 'search',
        'doc-title', 'doc-properties', 'about'],
      mobile: ['open', '$navigation', '$split', 'text-selection', 'pan', 'zoom', '$fullscreen', '$split', 'text-tools', 'draw-tools', 'attachment-tools', 'form-tools',
        'page-tools', '$split', 'rotate', 'page-display', 'theme-change', 'print', 'save-as', 'hide-annotations', 'form-filler', 'extract-table', 'search', 'doc-title',
        'doc-properties', 'about']
    };
    // Annotation editor toolbar:
    const annotationEditorButtons = {
      default: ['edit-select', 'save-as', 'share', 'edit-sign-tool', '$split', 'edit-text', 'edit-free-text', 'edit-ink', 'edit-square',
        'edit-circle', 'edit-line', 'edit-polyline', 'edit-polygon', 'edit-stamp', 'image-list', 'edit-file-attachment', 'edit-richmedia', 'edit-sound', 'edit-link',
        'edit-highlight', 'edit-underline', 'edit-squiggly', 'edit-strike-out',
        '$split', 'edit-redact', 'edit-redact-apply', 'edit-erase', '$split', 'edit-undo', 'edit-redo', '$split', 'new-document', '$split', 'new-page', 'delete-page',
        '$split', 'pdf-organizer'],
      fullscreen: ['$fullscreen', 'edit-select', 'save-as', 'share', 'edit-sign-tool', '$split', 'edit-text', 'edit-free-text', 'edit-ink', 'edit-square',
        'edit-circle', 'edit-line', 'edit-polyline', 'edit-polygon', 'edit-stamp', 'image-list', 'edit-file-attachment', 'edit-richmedia', 'edit-sound', 'edit-link',
        'edit-highlight', 'edit-underline', 'edit-squiggly', 'edit-strike-out',
        '$split', 'edit-redact', 'edit-redact-apply', 'edit-erase', '$split', 'edit-undo', 'edit-redo', '$split', 'new-document', '$split', 'new-page', 'delete-page',
        '$split', 'pdf-organizer'],
      mobile: ['edit-select', 'save-as', 'share', 'edit-sign-tool', '$split', 'edit-text', 'edit-free-text', 'edit-ink', 'edit-square', 'edit-link',
        'edit-highlight', 'edit-underline', 'edit-squiggly', 'edit-strike-out',
        'edit-circle', 'edit-line', 'edit-polyline', 'edit-polygon', 'edit-stamp', 'image-list', 'edit-file-attachment', 'edit-richmedia', 'edit-sound',
        '$split', 'edit-redact', 'edit-redact-apply', 'edit-erase', '$split', 'edit-undo', 'edit-redo', '$split', 'new-document', '$split', 'new-page', 'delete-page',
        '$split', 'pdf-organizer']
    };
    // Forms editor toolbar:
    const formEditorButtons = {
      default: [
        'edit-select-field', 'save-as', 'share', '$split',
        'edit-widget-tx-field', 'edit-widget-tx-password', 'edit-widget-tx-text-area', 'edit-widget-btn-checkbox', 'edit-widget-btn-radio',
        'edit-widget-btn-push', 'edit-widget-ch-combo', 'edit-widget-ch-list-box', 'edit-widget-tx-comb', 'edit-widget-btn-submit', 'edit-widget-btn-reset',
        '$split', 'edit-erase-field', '$split', 'edit-undo', 'edit-redo', '$split', 'new-document', '$split', 'new-page', 'delete-page', '$split', 'pdf-organizer'],
      fullscreen: ['$fullscreen', 'edit-select-field', 'save-as', 'share', '$split',
        'edit-widget-tx-field', 'edit-widget-tx-password', 'edit-widget-tx-text-area', 'edit-widget-btn-checkbox', 'edit-widget-btn-radio',
        'edit-widget-btn-push', 'edit-widget-ch-combo', 'edit-widget-ch-list-box', 'edit-widget-tx-comb', 'edit-widget-btn-submit', 'edit-widget-btn-reset',
        '$split', 'edit-erase-field', '$split', 'edit-undo', 'edit-redo', '$split', 'new-document', '$split', 'new-page', 'delete-page', '$split', 'pdf-organizer'],
      mobile: ['edit-select-field', 'save-as', 'share', '$split',
        'edit-widget-tx-field', 'edit-widget-tx-password', 'edit-widget-tx-text-area', 'edit-widget-btn-checkbox', 'edit-widget-btn-radio',
        'edit-widget-btn-push', 'edit-widget-ch-combo', 'edit-widget-ch-list-box', 'edit-widget-tx-comb', 'edit-widget-btn-submit', 'edit-widget-btn-reset',
        '$split', 'edit-erase-field', '$split', 'edit-undo', 'edit-redo', '$split', 'new-document', '$split', 'new-page', 'delete-page', '$split', 'pdf-organizer'],
    };
    viewer.toolbarLayout = {
      viewer: viewerButtons, 
      annotationEditor: annotationEditorButtons, 
      formEditor: formEditorButtons, 
      stickyBehavior: []
    };
    ```
- Enabled tooltip display for disabled buttons in the toolbar and sidebar.
- Various minor UI improvements.
### Fixed
- Addressed several minor issues and inconsistencies.

## [8.1.5] - 04-Aug-2025
### Changed
- Enabled use of a custom jsxFactory by removing the dependency on react.d.ts. (DOC-6946)
### Fixed
- Fixed an issue where Ctrl+Home and Ctrl+End keyboard shortcuts did not work in single page view. (DOC-6956)
- Fixed an issue where pressing Ctrl+Enter during the initial creation of a FreeText annotation was ignored. (DOC-6958)
- [Wasm] Fixed incorrect processing of PDFs where the same content stream was reused multiple times on the same page. (DOC-7001)

## [8.1.4] - 25-Jun-2025
### Fixed
– [Regression since v8.1.2] [Chromium v131+ Desktop] Incorrect text kerning for certain fonts when rendering PDFs. (DOC-6936, DOC-6944)

## [8.1.3] - 06-Jun-2025
### Fixed
- Grouped Highlights not rendered in DsPdfViewer. (DOC-6921)
### Changed
- JPN localization updated. (DOC-6914)

## [8.1.2] - 23-May-2025
### Fixed
- [Chromium v131+ Android] Resolved PDF rendering issues on Android Chrome versions 131.0.6778.104 and later. (DOC-6901)
- [Wasm] Minor bug fixes.

## [8.1.1] - 09-May-2025
### Fixed
- [Regression since v8.1.0] Sound annotations do not play when double-clicked. (DOC-6897)

## [8.1.0] - 10-Apr-2025
### Added
- [Editor] Table data extractor tool (requires server-side SupportApi): finds and extracts tabular data from a region selected by the user.
The data can be copied to clipboard or saved to a file in different formats including CSV, TSV, JSON, XLSX, XML or HTML. (DOC-5185)
- [Wasm] Added support for redact, export to PNG, converting annotations to content and PDF linearize (fast Web view) to client-side (Wasm) SupportApi. (DOC-6388)
- Added support for the PDF sound action. (DOC-6738)
### Changed
- [Editor] Improved the 'Text' property editor (always show the value, allows for easier editing). (DOC-6740)
### Fixed
- Text selection is not visible in Safari Browser on IOS 18. (DOC-6822)

## [8.0.6] - 2-Apr-2025
### Added
- Option to send PDFs containing pages with different orientations to the browser print preview as a single job. (DOC-6854)
  ```javascript
  // Enable single print job mode to force all pages to be printed together:
  var viewer = new DsPdfViewer("#root", {
    printSingleJobMode: true
  });
  ```
### Fixed
- [Wasm] Position of annotations changes when saving the document using Wasm support API. (DOC-6848)

## [8.0.5] - 20-Mar-2025
### Added
- Added support for cancelling the onBeforeOpen event. (DOC-6755)
### Fixed
- [Regression since v8.0.4] Loading PDFs is very slow in FireFox browser. (DOC-6814)
- Typings of modules i18next and moment are missing in DsPdfViewer installation. (DOC-6778)
- The viewer zoom factor changes when the layout mode is changed. (DOC-6554)
- 'TypeError: Cannot read properties of null' can occur in specific scenarios. (DOC-6846)

## [8.0.4] - 26-Feb-2025
### Changed
- [Reply Tool] Enabled adding replies and statuses to locked annotations. (DOC-6773)
### Fixed
- [Reply Tool] Fixed a permission check issue when deleting a reply using the Delete key. (DOC-6773)
- TypeError when clicking on the page with ReplyTool enabled. (DOC-6753)
- DsPdfViewer container element does not scroll if there is no PDF in the viewer. (DOC-6766)
- [API Docs] Some code examples formatting is incorrect. (DOC-6768, DOC-6769, DOC-6772)
- [iOS 17] Specific PDF fails to load on iOS 17.5 (loads fine on iOS 18.0 and above). (DOC-6724)

## [8.0.3] - 09-Feb-2025
### Added
- [Reply Tool] Automatic focusing on the clicked annotation in the replies list. Now, when you click on an annotation, the corresponding entry in the replies list will be focused and brought into view.
- [Reply Tool] Added new Reply Tool event bus events. (DOC-6732)
    - replytool-before-delete: triggered before an annotation is deleted using the Reply Tool. This event is cancelable, allowing prevention of deletion.
    - replytool-before-scrollintoview: triggered before the Reply Tool scrolls to a reply item’s HTML element. This event is cancelable, enabling control over the scrolling behavior.
    - replytool-text-label-click: triggered when the user clicks a text label, before executing the associated Reply Tool actions (e.g., displaying the inline text editor for editable annotations). This event is cancelable, allowing customization or prevention of the default behavior.
    - replytool-item-click: triggered when the user clicks a list item in the Reply Tool, either a parent note item or a reply item. The event can be canceled by setting the cancel property of the event arguments object to true.
    - replytool-item-keydown: triggered when the user presses a key while a list item in the Reply Tool is focused (either a parent note item or a reply item). The event can be canceled by setting the cancel property of the event arguments object to true, preventing the default Reply Tool behavior.
    - replytool-placeholder-activate: triggered when the user activates the reply placeholder by clicking on it or pressing any key while it is focused. The event can be canceled by setting the cancel property of the event arguments object to true, preventing the default Reply Tool behavior (e.g., opening the reply editor).
    - replytool-author-label-click: triggered when the user clicks the author label, before executing the associated Reply Tool actions (e.g., opening the inline text editor for editable annotations). The event can be canceled to prevent the default behavior.
    - replytool-item-status-change: triggered when the user changes the status of a reply annotation. It can be canceled by setting args.cancel to true. The event also allows overriding the target annotation using args.annotation or modifying the status via args.status. Possible statuses: 'None', 'Accepted', 'Cancelled', 'Completed', 'Rejected'.
    - replytool-post-reply: triggered when the user adds a reply annotation via the "Post Reply" button or by pressing Ctrl+Enter after editing the reply text. The event can be canceled by setting args.cancel to true and allows modifying the reply annotation using args.annotation.
  ```javascript
  // Example:
  viewer.eventBus.on("replytool-before-delete", function(args) {
      // Check if the entire annotation is being deleted (not just a comment)
      if (!args.removeCommentOnly) {
          // Confirm deletion with the user
          if (!confirm("Are you sure you want to delete the annotation with ID " + args.annotation.id + "?")) {
              // Cancel the deletion if the user declines
              args.cancel = true;
          }
      }
  });
  ```
- Added annotationFilter option for Reply Tool.
  Allows customizing which annotations are displayed in the Reply Tool by providing a filter function.
  ```javascript
  // Example: show only text annotations in the Reply Tool
  var viewer = new DsPdfViewer("#root", {
      replyTool: {
          annotationFilter: (annotation) => annotation.annotationType === 1 // AnnotationType.TEXT
      }
  });
  ```
### Changed
- JPN localization updated. (DOC-6727)
- [Reply Tool] Improved behavior for annotations without comments. (DOC-6718)
- The "Add a comment..." placeholder is now hidden unless the annotation is selected or focused.
### Fixed
- Incorrect document display at high zoom values. (DOC-6728)
- [Reply Tool] Incorrect position of timestamp for the reply in the Reply Tool panel. (DOC-6716)
- [Reply Tool] The comment popup behaves incorrectly if the Reply Tool and other toolbars are used together. (DOC-6729)
- [Reply Tool] Issues with styling in Dark and Dark-Yellow Themes. (DOC-6737)
- [Reply Tool] Inconsistent behavior when deleting comments for annotations other than sticky notes. (DOC-6735)
- [Layers] Incorrect display of PDF layers in some cases. (DOC-6733)

## [8.0.1] - 25-Dec-2024
### Added
- Added text selection capability to FreeText annotations. (DOC-6659)
### Fixed
- Proximity search like ["My favorite" ONear(1) "is" ONear(5)"."] does not work as expected. (DOC-6579)
- Open search panel stops working when another document is picked from the document list. (DOC-6666)
- The same text can be replaced several times. (DOC-6674)

## [8.0.0] - 03-Dec-2024
### Added
- Added text replace feature: use Ctrl+H to open the search bar in replace mode, or click the expand button in the search bar to toggle between search and replace modes. (DOC-5200)
- Added display of timestamps in user comments. (DOC-6233)
- [Reply Tool] Added useRelativeDates and dateFormat options. (DOC-6586)
```javascript
// Example 1: Disable relative dates and use absolute dates instead.
var viewer = new DsPdfViewer("#root", { replyTool: { useRelativeDates: false } });
// Example 2: Use a custom format for absolute dates.
var viewer = new DsPdfViewer("#root", { replyTool: { useRelativeDates: false, dateFormat: "yyyy.mm.dd HH:MM" } });
```
- Added hidePopupTimestamp option. (DOC-6587)
### Changed
- Enhanced proximity search with support for NEAR and ONEAR operators, added the ability to quote phrases for "full phrase" proximity search. (DOC-6390)
### Fixed
- [CommentTimeStamp] Incorrect handling of future dates in relative date formatting. (DOC-6588)

### See `CHANGELOG.md` for previous release notes.

## Installation

### To install the latest release version:

```sh
npm install @mescius/dspdfviewer
```

### To install from the zip archive:

Go to https://developer.mescius.com/document-solutions/dot-net-pdf-api/download and follow the directions on that page to get your 30-day evaluation and deployment license key.
The license key will allow you to develop and deploy your application to a test server.
Unzip the viewer distribution files (list below) to an appropriate location accessible from the web page where the viewer will live.

Viewer zip includes the following files:
- `README.md`: this file
- `CHANGELOG.md`
- `docs.html`: documentation
- `dspdfviewer.js`
- `dspdfviewer.worker.js`
- `wasmSupportApi.js`
- `wasmSupportApiServer.js`
- `DsPdf.js`
- `DsPdf.wasm`
- `package.json`
- `index.html`: example page, no SupportApi
- `index-wasm.html`: example page with Wasm SupportApi, can be opened from a desktop file manager
- `index-wasm-server.html`: example page with Wasm SupportApi, requires a web server, see run_wasm.cmd
- `run_wasm.cmd`: example script to open index-wasm-server.html
- `docs/`: documentation files
- `localization/`: localization example
- `resources/`: various resources
- `themes/`: theme files
- `typings/`: TypeScript declarations

## Documentation

Online documentation is available [here](https://developer.mescius.com/document-solutions/dot-net-pdf-api/docs/online/pdfviewer.html).

## Licensing

Document Solutions PDF Viewer is a commercially licensed product. Please [visit this page](https://developer.mescius.com/document-solutions/licensing) for details.

## Getting more help

Document Solutions PDF Viewer is distributed as part of Document Solutions for PDF.
You can ask any questions about the viewer, or report bugs using the
[Document Solutions for PDF public forum](https://developer.mescius.com/forums/documents-pdf).

## More details on using the viewer

### Adding the viewer to an HTML page:

```HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <!-- Limit content scaling to ensure that the viewer zooms correctly on mobile devices: -->
    <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</title>
    <script type="text/javascript" src="lib/dspdfviewer.js"></script>
    <script>
        function loadPdfViewer(selector) {
            var viewer = new DsPdfViewer(selector,
              {
                /* Specify options here */
                renderInteractiveForms: true
              });
            // Skip the 'report list' panel:
            // viewer.addReportListPanel();
            viewer.addDefaultPanels();
            // Optionally, open a PDF (will only work if this runs from a server):
            viewer.open('HelloWorld.pdf');
            // Change default viewer toolbar:
            viewer.toolbarLayout.viewer.default = ['$navigation', '$split', 'text-selection', 'pan', '$zoom', '$fullscreen',
              'save', 'print', 'rotate', 'view-mode', 'doc-title'];
            viewer.applyToolbarLayout();
        }
    </script>
  </head>
  <body onload="loadPdfViewer('#root')">
    <div id="root"></div>
  </body>
</html>
```

### How to license the viewer:

Set the DsPdfViewer Deployment key to the DsPdfViewer.License property before you create and initialize DsPdfViewer.
This must precede the code that references the js files.

```javascript
  // Add your license
  DsPdfViewer.LicenseKey = 'xxx';
  // Add your code
  const viewer = new DsPdfViewer("#viewer1", { file: 'helloworld.pdf' });
  viewer.addDefaultPanels();
```

### <a id="support_api"></a>Support API

_Support API_ is our PDF processing engine that enables the PDF editing features of DsPdfViewer.
Two options are available when configuring the viewer with _Support API_:

- **Server-based Support API**: requires [DS.Documents.Pdf.ViewerSupportApi](https://www.nuget.org/packages/DS.Documents.Pdf.ViewerSupportApi/)
  NuGet package which needs to run on a .NET server. The viewer connects to it via the
  [supportApi](https://developer.mescius.com/document-solutions/javascript-pdf-viewer/api/classes/DsPdfViewer.html#supportApi) property
  and uses that connection to perform any edits.

  To set up a Support API server on your system and see it in action,
  download any of the samples from the [DsPdfViewer demo site](https://developer.mescius.com/document-solutions/javascript-pdf-viewer/demos/)
  (e.g. [Edit PDF](https://developer.mescius.com/document-solutions/javascript-pdf-viewer/demos/edit-pdf/purejs)),
  and follow the instructions in the `readme.md` included in the downloaded zip.

  The full C# source code of [ViewerSupportApi](https://www.nuget.org/packages/DS.Documents.Pdf.ViewerSupportApi/)
  together with demo projects for .NET 8 and Web Forms is included in the `src/` folder
  inside the NuGet package (the **WEB_FORMS** constant is defined for the Web Forms target).
  In your server solution you can either reference the package, or include the source project and reference it instead.

- **Client-based Support API**: uses the `DsPdf.wasm` WebAssembly binary that runs in the client browser. 
  This configuration does not require a server connection, all editing is done on the client.
  You also do not need to download any additional components as the Wasm binaries are included in this package.

  To try the Wasm option, you can simply double click the `index-wasm.html` file (included in this package) in your file manager.
  Also included is `run_wasm.cmd` that uses [http-server](https://www.npmjs.com/package/http-server)
  to load `index-wasm-server.html`, showing a more flexible approach
  to using the Wasm option, see comments in `index-wasm-server.html` for details.

  Due to its client-based nature, collaboration features are not available in the Wasm configuration.
  Also, in this release (v7.2) the following features are not yet supported, and will be disabled
  in the viewer UI if the Wasm configuration is used:
  - Adding/applying redacts
  - Electronic signatures
  - Export to raster or SVG images
  - Converting annotations to content

  If you are using IIS, you will need to explicitly allow IIS to load .wasm files in your `web.config` in order to use `DsPdf.wasm`:
  ```XML
  <?xml version="1.0" encoding="UTF-8"?>
  <configuration>
  <system.webServer>
    <staticContent>
      <remove fileExtension=".wasm" />
      <mimeMap fileExtension=".wasm" mimeType="application/wasm" />
    </staticContent>
    <httpCompression>
      <dynamicTypes>
        <add mimeType="application/wasm" enabled="true" />
      </dynamicTypes>
    </httpCompression>
  </system.webServer>
  </configuration>
  ```

#### Note that you need a Document Solutions for PDF Professional license in order to use _Support API_ in your apps.

### Keyboard shortcuts

#### Viewer mode

- ```Ctrl +``` - zoom in
- ```Ctrl -``` - zoom out
- ```Ctrl 0``` - zoom to 100%
- ```Ctrl 9``` - zoom to window
- ```Ctrl A``` - select all
- ```R``` - rotate clockwise
- ```Shift R``` - rotate counterclockwise
- ```H``` - enable pan tool
- ```S``` - enable selection tool
- ```V``` - enable selection tool
- ```Ctrl O``` - open local PDF
- ```Ctrl F``` - text search
- ```Ctrl P``` - print
- ```Home``` - go to start of line
- ```Ctrl Home``` - go to start of document
- ```Shift Home``` - select  to start of line
- ```Shift Ctrl Home``` - select  to start of document
- ```End``` - go to end of line
- ```Ctrl End``` - go to end of document
- ```Shift End``` - select  to end of line
- ```Shift Ctrl End``` - select to end of document
- ```Left``` - go left
- ```Shift Left``` - select left
- ```Alt Left``` - go back in history
- ```Right``` - go right
- ```Shift Right``` - select right
- ```Alt Right``` - go forward in history
- ```Up``` - go up
- ```Shift Up``` - select up
- ```Down``` - go down
- ```Shift Down``` - select down
- ```PgUp``` - page up
- ```PgDown``` - page down
- ```Shift PgUp``` - select page up
- ```Shift PgDown``` - select page down

#### Editing modes

- ```Delete``` - delete selected annotation/field
- ```Esc``` - unselect annotation/field
- ```Ctrl Z``` - undo
- ```Ctrl Y``` - redo
- ```Ctrl Shift Z``` - redo

### Toolbar items

The default viewer toolbar items layout (items starting with '$' are inherited from the base viewer, other items are PDF viewer specific.):

```
['open', '$navigation', '$split', 'text-selection', 'pan', '$zoom', '$fullscreen', 'rotate', 'view-mode', 'theme-change', 'download', 'print', 'save', 'hide-annotations', 'doc-title', 'doc-properties', 'about']
```

The full list of the PDF-viewer specific toolbar items:

```
'text-selection', 'pan', 'open', 'save', 'download', 'print', 'rotate', 'theme-change', 'doc-title', 'view-mode', 'single-page', 'continuous-view'
```

The full list of base viewer toolbar items:

```
'$navigation' '$refresh', '$history', '$mousemode', '$zoom', '$fullscreen', '$split'
```

You can get default base viewer items by using the getDefaultToolbarItems() method, e.g.:

```javascript
const toolbar: Toolbar = viewer.toolbar;
let buttons = toolbar.getDefaultToolbarItems();
buttons = buttons.filter(b => b !== '$refresh');
```

To specify a custom set of toolbar items, use the toolbarLayout property and applyToolbarLayout() method, e.g.:

```javascript
viewer.toolbarLayout.viewer = {
  default: ["$navigation", 'open', '$split', 'doc-title'],
  fullscreen: ['$fullscreen', '$navigation'],
  mobile: ["$navigation", 'doc-title']
};
viewer.toolbarLayout.annotationEditor = {
  default: ['edit-select', 'save', '$split', 'edit-text'],
  fullscreen: ['$fullscreen', 'edit-select', 'save', '$split', 'edit-text'],
  mobile: ['$navigation']
};
viewer.toolbarLayout.formEditor = {
  default: ['edit-select-field', 'save', '$split', 'edit-widget-tx-field', 'edit-widget-tx-password'],
  fullscreen: ['$fullscreen', 'edit-select-field', 'save', '$split', 'edit-widget-tx-field', 'edit-widget-tx-password'],
  mobile: ['$navigation']
};
viewer.applyToolbarLayout();
```

Here is an example of how to create your own custom toolbar button:

```javascript
const toolbar: Toolbar = viewer.toolbar;
toolbar.addItem({
  key: 'my-custom-button',
  iconCssClass: 'mdi mdi-bike',
  title: 'Custom button',
  enabled: false,
  action: () => {
    alert("Custom toolbar button clicked");
  },
  onUpdate: (args) => ({ enabled: viewer.hasDocument }),
});
viewer.toolbarLayout.viewer.default =  ['$navigation', 'my-custom-button'];
viewer.applyToolbarLayout();
```

### Using the viewer in frameworks such as React, Preact, Angular etc.

Add a reference to the viewer script:
```HTML
<body>
  <script type="text/javascript" src="/lib/dspdfviewer/dspdfviewer.js"></script>
  ...
```

Add the placeholder to your App template, e.g.:
```HTML
<section id="pdf"></section>
```

Render the viewer:
```javascript
let viewer = new DsPdfViewer('section#pdf');
viewer.addDefaultPanels();
```

---
# <a id="japanese"></a>DioDocs PDFビューワ
[DioDocs PDFビューワ](https://developer.mescius.jp/diodocs-pdf/javascript-pdf-viewer)は、WebアプリケーションのクライアントサイドでPDFファイルを読み込んで表示する、JavaScriptベースのPDFビューワです。また、バックエンドのAPIを使って、PDFファイルを編集することもできます。

## サンプル
使い方については、下記をご参照ください。
- [デモ](https://demo.mescius.jp/diodocs/pdfviewer/demos/)

## インストール方法
```sh
npm install @mescius/dspdfviewer
```
日本語版での動作保証は、[日本語版サイト](https://docs.mescius.jp/help/diodocs/pdf/#ReleaseNotes_GcPDFVIewer.html)で公開しているバージョンのみとなります。

## ドキュメント
ドキュメントについては、下記をご参照ください。
- [ヘルプ](https://docs.mescius.jp/help/diodocs/pdf/#grapecitydocumentspdfviewer.html)
- [APIリファレンス](https://docs.mescius.jp/help/diodocs/pdfviewer/)

## 製品情報
価格、ライセンスについては、下記をご参照ください。
- [製品情報](https://developer.mescius.jp/diodocs-pdf/javascript-pdf-viewer)

## サポート
ナレッジベース、テクニカルサポートについては、下記をご参照ください。
- [サポート＆サービス](https://developer.mescius.jp/support)
- [サブスクリプションサービス利用規約](https://docs.mescius.jp/license/diodocs/diodocs-subscriptionservice.pdf)

---

_The End._