@mescius/dspdfviewer
Advanced tools
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) - a feature-rich cross-platform PDF API library for .NET Core.
Client-side (Wasm) or server-side (DS.Documents.Pdf.ViewerSupportApi) 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:
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.
newDocumentFileName option to specify the default file name when creating new documents in the viewer. This is distinct from friendlyFileName, which names existing documents.// Example: use client-side Wasm SupportApi:
function loadPdfViewer(selector) {
var viewer = new DsPdfViewer(selector, {
supportApi: {
implementation: new WasmSupportApi()
}
});
viewer.addDefaultPanels();
viewer.addAnnotationEditorPanel();
viewer.addFormEditorPanel();
}
// 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');
// 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');
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 fileCHANGELOG.mddocs.html: documentationdspdfviewer.jsdspdfviewer.worker.jswasmSupportApi.jswasmSupportApiServer.jsDsPdf.jsDsPdf.wasmpackage.jsonindex.html: example page, no SupportApiindex-wasm.html: example page with Wasm SupportApi, can be opened from a desktop file managerindex-wasm-server.html: example page with Wasm SupportApi, requires a web server, see run_wasm.cmdrun_wasm.cmd: example script to open index-wasm-server.htmldocs/: documentation fileslocalization/: localization exampleresources/: various resourcesthemes/: theme filestypings/: TypeScript declarationsOnline 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/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.
// 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 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:
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 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 inCtrl - - zoom outCtrl 0 - zoom to 100%Ctrl 9 - zoom to windowCtrl A - select allR - rotate clockwiseShift R - rotate counterclockwiseH - enable pan toolS - enable selection toolV - enable selection toolCtrl O - open local PDFCtrl F - text searchCtrl P - printHome - go to start of lineCtrl Home - go to start of documentShift Home - select to start of lineShift Ctrl Home - select to start of documentEnd - go to end of lineCtrl End - go to end of documentShift End - select to end of lineShift Ctrl End - select to end of documentLeft - go leftShift Left - select leftAlt Left - go back in historyRight - go rightShift Right - select rightAlt Right - go forward in historyUp - go upShift Up - select upDown - go downShift Down - select downPgUp - page upPgDown - page downShift PgUp - select page upShift PgDown - select page downDelete - delete selected annotation/fieldEsc - unselect annotation/fieldCtrl Z - undoCtrl Y - redoCtrl Shift Z - redoThe 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/dspdfviewer/dspdfviewer.js"></script>
...
Add the placeholder to your App template, e.g.:
<section id="pdf"></section>
Render the viewer:
let viewer = new DsPdfViewer('section#pdf');
viewer.addDefaultPanels();
DioDocs PDFビューワは、WebアプリケーションのクライアントサイドでPDFファイルを読み込んで表示する、JavaScriptベースのPDFビューワです。また、バックエンドのAPIを使って、PDFファイルを編集することもできます。
使い方については、下記をご参照ください。
npm install @mescius/dspdfviewer
日本語版での動作保証は、日本語版サイトで公開しているバージョンのみとなります。
ドキュメントについては、下記をご参照ください。
価格、ライセンスについては、下記をご参照ください。
ナレッジベース、テクニカルサポートについては、下記をご参照ください。
The End.
FAQs
Document Solutions PDF Viewer
We found that @mescius/dspdfviewer demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.
Security News
MITRE's 2024 CWE Top 25 highlights critical software vulnerabilities like XSS, SQL Injection, and CSRF, reflecting shifts due to a refined ranking methodology.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.