@mescius/dspdfviewer
Version:
Document Solutions PDF Viewer
666 lines (583 loc) • 34.4 kB
Markdown
__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.
## Important note
The @mescius/dspdfviewer package replaces @grapecity/gcpdfviewer, and provides the same functionality, ensures future enhancements, and is backwards compatible with @grapecity/gcpdfviewer. Existing licenses will continue to work with DsPdfViewer.
## Latest changes
## [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
}
```
- 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.
- Addressed several minor issues and inconsistencies.
- Enabled use of a custom jsxFactory by removing the dependency on react.d.ts. (DOC-6946)
- 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)
– [Regression since v8.1.2] [Chromium v131+ Desktop] Incorrect text kerning for certain fonts when rendering PDFs. (DOC-6936, DOC-6944)
- Grouped Highlights not rendered in DsPdfViewer. (DOC-6921)
- JPN localization updated. (DOC-6914)
- [Chromium v131+ Android] Resolved PDF rendering issues on Android Chrome versions 131.0.6778.104 and later. (DOC-6901)
- [Wasm] Minor bug fixes.
- [Regression since v8.1.0] Sound annotations do not play when double-clicked. (DOC-6897)
- [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
});
```
- [Wasm] Position of annotations changes when saving the document using Wasm support API. (DOC-6848)
- Added support for cancelling the onBeforeOpen event. (DOC-6755)
- [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)
- [Reply Tool] Enabled adding replies and statuses to locked annotations. (DOC-6773)
- [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)
- [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
}
});
```
- 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.
- 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)
- Added text selection capability to FreeText annotations. (DOC-6659)
- 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)
- 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)
- Enhanced proximity search with support for NEAR and ONEAR operators, added the ability to quote phrases for "full phrase" proximity search. (DOC-6390)
- [CommentTimeStamp] Incorrect handling of future dates in relative date formatting. (DOC-6588)
```sh
npm install @mescius/dspdfviewer
```
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>
```
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();
```
_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
[](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
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>
```
- ```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
- ```Delete``` - delete selected annotation/field
- ```Esc``` - unselect annotation/field
- ```Ctrl Z``` - undo
- ```Ctrl Y``` - redo
- ```Ctrl Shift Z``` - redo
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();
```
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();
```
---
[](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._