A full-featured JavaScript PDF viewer and editor that comes with Document Solutions for PDF.
Document Solutions PDF Viewer (GcPdfViewer) 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. GcPdfViewer is included in Document Solutions for PDF (DsPdf) - a feature-rich cross-platform PDF API library for .NET Core.
Support API is a server-side NuGet package GrapeCity.Documents.Pdf.ViewerSupportApi that allows you to easily set up an ASP.NET Core or a Web Forms server that employs DsPdf to add PDF editing abilities to GcPdfViewer. When connected to a Support API server, GcPdfViewer becomes a powerful PDF editor that can be used to edit existing or create new PDF documents, fill and save PDF forms, remove (redact) sensitive content, add or edit annotations and AcroForm fields, and more.
GcPdfViewer provides a rich client side 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
- When connected to DsPdf on the server via Support API, provides:
- Customizable and mobile-friendly form filler
- Real-time collaboration mode
- Annotation and form editors
- Quick edits using secondary toolbars
- PDF redaction
- Signature verification
- 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
- Fully supports file attachments (both attachment annotations and document level attachments)
- Comes with several themes, new custom themes can be added
- Supports external CMaps
- ...and more.
- Go to Document Solutions for PDF Viewer demos to explore the various features of GcPdfViewer, including features that rely on 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 uses GcPdfViewer to display sample PDFs.
- The @grapecity/gcpdfviewer package is being renamed and will be continued to be maintained under the new name @mescius/dspdfviewer. The new package provides the same functionality, ensures future enhancements, and is backwards compatible with @grapecity/gcpdfviewer. Please update your references to avoid any possible future interruptions. Your existing licenses will continue to work with the new package.
- Cannot edit password-protected PDF when copying content is disabled. (DOC-6116)
- Comment added in the comment panel is not wrapped. (DOC-6134)
- Incorrect resize bar position. (DOC-6188)
- Auto-sized font appears larger than the required font size in some PDFs (additional fixes). (DOC-6029)
- [Collaboration] Only one page of a newly created PDF is shared. (DOC-4143)
- Cannot submit comment by pressing the Enter kay on the 'Done' button. (DOC-6109)
- Issues with loading large files. (DOC-6080, DOC-6082)
- Edit mode is not deactivated when switching the viewer layout from annotation editor while the second toolbar is open. (DOC-6074)
- Searching for a text also highlights the space before the found text. (DOC-6142)
- Enhanced the behavior and appearance of the context menu, added the ability to add a note to selected text. (DOC-6100)
- Removed text markup menu that automatically popped up on text selection. The main context menu includes that menu as a submenu.
- Added the
showContextMenuOnSelectionoption controlling the context menu behavior when text is selected.
The option has the following values:- "Auto": Automatically determines whether to show the context menu based on the device type.
- "On": Always shows the context menu when text is selected.
- "Off": Never shows the context menu when text is selected.
The default value is "Auto". On systems with mice, "Auto" behaves like "Off". On small devices (phones, tablets) without mice, "Auto" behaves like "On".
- [Reply Tool] Updated context menu texts. (DOC-6014)
- Added support for rich media annotations (play embedded audio/video, modify rich media annotations). (DOC-5979)
- Reply Tool Improvements:
- Added the ability to delete a comment item using the Delete key. Enabled navigation through comment items using the TAB and Arrow keys.
- Added the ability to resize the right sidebar element.
- The Reply Tool now activates automatically when a markup annotation or text comment is added via the context menu, focusing on the new comment in the list.
// Use autoExpandOnCommentAdd option to revert to previous behavior: var viewer = new GcPdfViewer("#root", { replyTool: { autoExpandOnCommentAdd: false } });
- The color for ReplyTool icons has been removed.
// Use useColoredIcons option to revert to previous behavior: var viewer = new GcPdfViewer("#root", { replyTool: { useColoredIcons: true } });
- Split ISupportApi into base and multi-user parts, added the ability to specify a custom implementation for SupportApi that conforms to the ISupportApiBase interface. (DOC-5440)
// Example var viewer = new GcPdfViewer("#root", { supportApi: { implementation: new CustomSupportApi() } });
npm install @grapecity/gcpdfviewerGo 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
- gcpdfviewer.js
- gcpdfviewer.worker.js
- package.json
- index.html (sample page)
- Theme files:
- themes/dark-yellow.css
- themes/dark-yellow.jscss
- themes/light-blue.css
- themes/light-blue.jscss
- themes/viewer.css
- themes/viewer.jscss
- Predefined CMap files for Chinese, Japanese, or Korean text output:
- resource/bcmaps/*.bin
- TypeScript declaration files:
- typings/.
Online documentation is available here.
Document Solutions PDF Viewer is a commercially licensed product. Please visit this page for details.
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.
<!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/gcpdfviewer.js"></script>
<script>
function loadPdfViewer(selector) {
var viewer = new GcPdfViewer(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 GcPdfViewer Deployment key to the GcPdfViewer.License property before you create and initialize GcPdfViewer. This must precede the code that references the js files.
// Add your license
GcPdfViewer.LicenseKey = 'xxx';
// Add your code
const viewer = new GcPdfViewer("#viewer1", { file: 'helloworld.pdf' });
viewer.addDefaultPanels();Support API is a server-side library available as NuGet package GrapeCity.Documents.Pdf.ViewerSupportApi. The full source code of this library together with C# demo projects for ASP.NET Core and Web Forms is included in the src/ folder inside the 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.
When GcPdfViewer is connected to a Support API server, its editing features are enabled. The edits done on the client are accumulated, and when the user clicks 'save', the original PDF and the edits are sent to the server, the edits are applied (using GcPdf), and the modified PDF is sent back to the client.
To set up a Support API server on your own system and see it in action, download any of the samples from the GcPdfViewer demo site (e.g. Edit PDF), and follow the instructions in the readme.md included in the downloaded zip.
NOTE that you will need a Document Solutions for PDF Professional license to use Support API in your apps.
-
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.:
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.:
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:
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:
<body>
<script type="text/javascript" src="/lib/gcpdfviewer/gcpdfviewer.js"></script>
...Add the placeholder to your App template, e.g.:
<section id="pdf"></section>Render the viewer:
let viewer = new GcPdfViewer('section#pdf');
viewer.addDefaultPanels();DioDocs PDFビューワは、WebアプリケーションのクライアントサイドでPDFファイルを読み込んで表示する、JavaScriptベースのPDFビューワです。また、バックエンドのAPIを使って、PDFファイルを編集することもできます。
使い方については、下記をご参照ください。
__重要：このパッケージは、将来、廃止される予定です。__新しいパッケージ（@mescius/dspdfviewer）への移行をご検討ください。
npm install @grapecity/gcpdfviewer日本語版での動作保証は、日本語版サイトで公開しているバージョンのみとなります。
ドキュメントについては、下記をご参照ください。
価格、ライセンスについては、下記をご参照ください。
ナレッジベース、テクニカルサポートについては、下記をご参照ください。
The End.