@mescius/dspdfviewer
Advanced tools
A full-featured JavaScript PDF viewer and editor that comes with Document Solutions for PDF.
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.
Support API is a server-side NuGet package DS.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 DsPdfViewer. When connected to a Support API server, DsPdfViewer 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.
DsPdfViewer provides a rich client side 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.
// Example with relative URL:
var viewer = new DsPdfViewer("#root", { standardFontDataUrl: "resources/standard_fonts/" });
// Example with absolute URL:
var viewer = new DsPdfViewer("#root", { standardFontDataUrl: "http://localhost:8080/resources/standard_fonts/" });
// Example:
var viewer = new DsPdfViewer("#root", { language: "cn" });
// To revert to using sidebar search panel instead of the floating search bar:
var viewer = new DsPdfViewer("#root", { useFloatingSearchBar: false });
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:
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/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 a server-side library available as NuGet package DS.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 DsPdfViewer 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 DsPdf), 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 DsPdfViewer 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 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();
The End.
FAQs
Document Solutions PDF Viewer
The npm package @mescius/dspdfviewer receives a total of 238 weekly downloads. As such, @mescius/dspdfviewer popularity was classified as not popular.
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 researchers uncovered a malicious PyPI package exploiting Deezer’s API to enable coordinated music piracy through API abuse and C2 server control.
Research
The Socket Research Team discovered a malicious npm package, '@ton-wallet/create', stealing cryptocurrency wallet keys from developers and users in the TON ecosystem.
Security News
Newly introduced telemetry in devenv 1.4 sparked a backlash over privacy concerns, leading to the removal of its AI-powered feature after strong community pushback.