Document Solutions PDF Viewer
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");
}
});
`
$3
- [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
$3
- 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.
$3
- 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)
$3
- Updated JPN localization for V8.2J. (DOC-7055)
[8.2.0] - 08-Aug-2025
$3
- [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
}
`
$3
- 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.
$3
- Addressed several minor issues and inconsistencies.
[8.1.5] - 04-Aug-2025
$3
- Enabled use of a custom jsxFactory by removing the dependency on react.d.ts. (DOC-6946)
$3
- 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
$3
– [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
$3
- Grouped Highlights not rendered in DsPdfViewer. (DOC-6921)
$3
- JPN localization updated. (DOC-6914)
[8.1.2] - 23-May-2025
$3
- [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
$3
- [Regression since v8.1.0] Sound annotations do not play when double-clicked. (DOC-6897)
[8.1.0] - 10-Apr-2025
$3
- [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)
$3
- [Editor] Improved the 'Text' property editor (always show the value, allows for easier editing). (DOC-6740)
$3
- Text selection is not visible in Safari Browser on IOS 18. (DOC-6822)
[8.0.6] - 2-Apr-2025
$3
- 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
});
`
$3
- [Wasm] Position of annotations changes when saving the document using Wasm support API. (DOC-6848)
[8.0.5] - 20-Mar-2025
$3
- Added support for cancelling the onBeforeOpen event. (DOC-6755)
$3
- [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
$3
- [Reply Tool] Enabled adding replies and statuses to locked annotations. (DOC-6773)
$3
- [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
$3
- [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
}
});
`
$3
- 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.
$3
- 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
$3
- Added text selection capability to FreeText annotations. (DOC-6659)
$3
- 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
$3
- 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)
$3
- Enhanced proximity search with support for NEAR and ONEAR operators, added the ability to quote phrases for "full phrase" proximity search. (DOC-6390)
$3
- [CommentTimeStamp] Incorrect handling of future dates in relative date formatting. (DOC-6588)
$3
Installation
$3
`sh
npm install @mescius/dspdfviewer
`
$3
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.
Licensing
Document Solutions PDF Viewer is a commercially licensed product. Please visit this page 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.
More details on using the viewer
$3
`HTML
Document Solutions PDF Viewer
`
$3
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();
`
$3
_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
NuGet package which needs to run on a .NET server. The viewer connects to it via the
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
(e.g. Edit PDF),
and follow the instructions in the readme.md included in the downloaded zip.
The full C# source code of 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
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
`
#### Note that you need a Document Solutions for PDF Professional license in order to use _Support API_ in your apps.
$3
#### 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
$3
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();
`
$3
Add a reference to the viewer script:
`HTML
...
`
Add the placeholder to your App template, e.g.:
`HTML
`
Render the viewer:
`javascript
let viewer = new DsPdfViewer('section#pdf');
viewer.addDefaultPanels();
`
---
DioDocs PDFビューワ
DioDocs PDFビューワは、WebアプリケーションのクライアントサイドでPDFファイルを読み込んで表示する、JavaScriptベースのPDFビューワです。また、バックエンドのAPIを使って、PDFファイルを編集することもできます。
サンプル
使い方については、下記をご参照ください。
- デモ
インストール方法
`sh
npm install @mescius/dspdfviewer
``