Document Solutions PDF Viewer

Important note: A Shift from ‘GrapeCity Documents' to ‘Document Solutions' for US Edition重要信息：对于 ’GrapeCity Documents’ 中国版本，组件名已经更改为 ‘GcDocs’。

GrapeCity Documents has undergone a marketing rebranding and as a result, this 7.2.3 version of @grapecity/gcpdfviewer is the last release under the old GrapeCity Documents product naming. Starting with version 7.2.4, the package will only be released using the new package name:

• US Edition: @mescius/dspdfviewer
• 中国版本: @grapecity-software/gcdocs.pdfviewer

The new package provides the same functionality, ensures future enhancements, and is backwards compatible with @grapecity/gcpdfviewer. It is highly recommended to update to the new package as soon as you can. Your existing licenses will continue to work with the new package.

日本語

Document Solutions PDF Viewer

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.

Client-side (Wasm) or server-side (GrapeCity.Documents.Pdf.ViewerSupportApi) Support API option allows you to turn GcPdfViewer 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.

GcPdfViewer 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):
  • 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 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.

Latest changes

[7.2.3] - 02-Oct-2024

Changed

• JPN localization updated. (DOC-6514)

[7.2.2] - 19-Sep-2024

Changed

• The updateAnnotation and addAnnotation methods will now throw an error if the provided annotation object is improperly formed and cannot be used. (DOC-6506)
• [Documentation] The gcProps property has been moved from the base AnnotationBase class to the more specific WidgetAnnotation class. (DOC-6506)

Fixed

• The behavior is inconsistent when double-clicking a redact annotation. (DOC-6503)
• [iOS] Cannot scroll by swiping while entering ink annotations. (DOC-6501)

[7.2.1] - 28-Aug-2024

Added

• Added the ability to create field widgets with the same name, enabling such widgets to update their values simultaneously. (DOC-6461)
• Added new API method repaintTextLayer for efficiently repainting text selection and highlighting elements on visible pages.
• Added highlightTextSegment method to enable highlighting specific text segments on a page with customizable options for color and style.
• Added clearHighlightedSegments method to remove all custom text highlights from a specified page.
• Added newDocumentFileName option to specify the default file name when creating new documents in the viewer. This is distinct from friendlyFileName, which names existing documents.

Fixed

• [Wasm] Save API method did not recognize spaces as separators (commas worked fine). (DOC-6425)
• Unexpected content appears in a form field. (DOC-6420)
• Input widgets associated with the same field behave incorrectly. (DOC-6412, DOC-6415)
• Part of a combo text box's content is lost. (DOC-6356)
• [Form Editor] Cannot create multiple input fields with same name. (DOC-6416)
• In two pages side by side view, PageWidth zoom mode scales to single page width. (DOC-6476)
• Data using time format is not rendered correctly. (DOC-6482)
• Markup shows at incorrect locations in some browsers. (DOC-6474)

[7.2.0] - 07-Aug-2024

Added

• Added Wasm SupportApi option, it enables PDF editing features on the client without connecting to SupportApi/DsPdf on a server.

// Example: use client-side Wasm SupportApi:
function loadPdfViewer(selector) {
  var viewer = new GcPdfViewer(selector, {
    supportApi: {
        implementation: new WasmSupportApi()
    }
  });
  viewer.addDefaultPanels();
  viewer.addAnnotationEditorPanel();
  viewer.addFormEditorPanel();
}

• Added registerFont method: registers a new @font-face style with the given font name and URL. Supported font formats include "ttf", "otf", "woff" and "woff2" ("woff2" is not supported by the Wasm SupportApi).

// Example 1: Registering a font with name and URL
viewer.registerFont('CustomFont', 'https://example.com/fonts/customfont.woff');
// Example 2: Registering a font with name, URL, and format
viewer.registerFont('AnotherFont', 'https://example.com/fonts/anotherfont.ttf', 'ttf');

• Added registerFallbackFont method: registers a fallback font that SupportApi will use when searching for fallback fonts. Supported font formats include "ttf", "otf", "woff", and "ttc". Font collections in "ttc" format are also supported.

// Example 1: Registering a fallback font with URL:
viewer.registerFallbackFont('https://example.com/fonts/fallbackfont.ttf');
// Example 2: Registering a fallback font with name and URL:
viewer.registerFallbackFont('SampleFont', 'https://example.com/fonts/SampleFont.woff');

• Added support for the standard "Zapf Dingbats" font, which can now be selected for text fields and free text annotations.
• Added a "Save As" button with the toolbar button key "save-as". Use the "Save As" button to export the PDF document to various formats (PDF, PNG, SVG). The old "Save" and "Save as images" buttons have been removed from the default toolbar layout.
• Added the ability to export a PDF document to SVG images.
• Added extended support for pageLayout mode based on initial viewer preferences specified in a PDF document. The following pageLayout values specified in the PDF correspond to pageDisplay values in the viewer:
  • TwoColumnLeft: sets pageDisplay to TwoPageScrolling.
  • TwoColumnRight: sets pageDisplay to TwoPageScrolling.
  • TwoPageLeft: sets pageDisplay to TwoPage.
  • TwoPageRight: sets pageDisplay to TwoPage.
  • OneColumn: sets pageDisplay to SinglePageScrolling.
  • SinglePage: sets pageDisplay to SinglePage.
• Added support for an ECMAScript action that can be performed before the field is formatted to display its value. (DOC-5643)
• Added support for two pages side by side view. (DOC-6063)

Changed

• The standard "Symbol" font now saves correctly and displays properly in most PDF viewers.
• [Toolbar] The "View Mode" button has been replaced with the "Page Display" dropdown menu. (DOC-6063)
• [Text Tools] Added the ability to create text markup annotations directly from selected text when text is selected.

Fixed

• [PDF Organizer] Page ranges were not created in some scenarios. (DOC-6345)

See CHANGELOG.​md for previous release notes.

Installation

To install the latest release version:

npm install @grapecity/gcpdfviewer

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
• gcpdfviewer.js
• gcpdfviewer.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

Adding the viewer to an HTML page:

<!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>

How to license the viewer:

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

Support API is our PDF processing engine that enables the PDF editing features of GcPdfViewer. 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

Note that you will need a Document Solutions for PDF Professional license 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.:

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();

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

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ビューワ

DioDocs PDFビューワは、WebアプリケーションのクライアントサイドでPDFファイルを読み込んで表示する、JavaScriptベースのPDFビューワです。また、バックエンドのAPIを使って、PDFファイルを編集することもできます。

サンプル

使い方については、下記をご参照ください。

• デモ

インストール方法

**重要：このパッケージは、将来、廃止される予定です。**新しいパッケージ（@mescius/dspdfviewer）への移行をご検討ください。

npm install @grapecity/gcpdfviewer

日本語版での動作保証は、日本語版サイトで公開しているバージョンのみとなります。

ドキュメント

ドキュメントについては、下記をご参照ください。

• ヘルプ
• APIリファレンス

製品情報

価格、ライセンスについては、下記をご参照ください。

• 製品情報

サポート

ナレッジベース、テクニカルサポートについては、下記をご参照ください。

• サポート＆サービス
• サブスクリプションサービス利用規約

The End.