Foxit PDF SDK for Web
1
Foxit PDF SDK for Web
Foxit PDF SDK for Web PDF SDK Foxit
web SDK
PDF PDF Foxit PDF SDK
for Web Web PDF
Foxit PDF SDK for Web
Foxit PDF PDF Foxit
PDF SDK for Web PDF
Foxit PDF SDK for Web
Web
PDF web PDF
PDF
PDF
Foxit PDF SDK for Web Web
API
2
Web
Foxit PDF SDK for Web Web viewer PDF
Foxit PDF SDK for Web PDF
NginxApache Node.js HTTP
Foxit PDF SDK for Web 15
PDF
licenses Foxit PDF SDK for Web
License
licenses Foxit PDF SDK for WebLicenses
Foxit PDF SDK for Web
Foxit PDF SDK for Web
Foxit PDF SDK for Web
3
• Light package: FoxitPDFSDKForWeb_8_1.zip ()
• Full package: FoxitPDFSDKForWeb_8_1_Full.zip ()
Package
/
docs: API Foxit PDF SDK for Web
examples: demo Foxit PDF
SDK for Web
integrations Foxit PDF SDK for Web JavaScript
(angular/react.js/vue.js )
server Web viewer
http-server Node.js
Foxit PDF SDK for Web
Package.json
Foxit PDF SDK for Web package.json Web
PDF Web PDF package.json
{
"author": "Foxit Software Inc.",
"start-snapshot-server": "node ./server/snapshot/src/index -p
3002",
"start-http-server": "node ./server/index"
5
Foxit PDF SDK for Web
Foxit PDF SDK for Web JS JS
JS SDK
6
hammerjs
eventemitter3
UIExtension.vendor.js UIExtension ()
UIExtension.polyfills.js + UIExtension.vendor.js + UIExtension.js
=
Foxit PDF SDK for Web viewer
Foxit PDF SDK for Web examples web
localhost (https://localhost:port) IP URL
7
http-server
python -m http.server 8000
PDF
1) "D:/test_web"
2) Foxit PDF SDK for Web "lib", "server" "external" ()
"package.json" "D:/test_web"
3) PDF "D:/test_web" "docs" demo
4) "D:/test_web" html (index.html) test_web
test_web
+-- lib (copy from the Foxit PDF SDK for Web package)
+-- server (copy from the Foxit PDF SDK for Web package)
+-- package.json (copy from the Foxit PDF SDK for Web
package)
+-- index.html
8
<link rel="stylesheet" type="text/css"
href="./lib/PDFViewCtrl.css">
2) "lib" "PDFViewCtrl.full.js" :
<script src="./lib/PDFViewCtrl.full.js"></script>
3) HTML <body> <div> web viewer
<div id="pdf-viewer"></div>
4) PDFViewCtrl:
</script>
<script>
jr: {
<script>
Foxit PDF SDK for Web examples/license-key.js licenseSN
licenseKey
Foxit PDF SDK for Web
9
fetch('/FoxitPDFSDKforWeb_DemoGuide.pdf').then(function(response)
{
response.arrayBuffer().then(function(buffer) {
pdfViewer.openPDFByFile(buffer);
(<index.html>)
PDF /
<link rel="stylesheet" type="text/css"
href="./lib/PDFViewCtrl.css">
<!-- You can delete the following style because it doesn't work
in this project -->
<style>
</script>
<script>
jr: {
// modify the file path as your need.
Foxit PDF SDK for Web
10
UIExtension webViewer
1) /lib/UIExtension.css HTML <head>
<link rel="stylesheet" type="text/css"
href="./lib/UIExtension.css">
2) "lib" "UIExtension.full.js" :
<script src="./lib/UIExtension.full.js"></script>
3) HTML <body> <div> webViewer
<div id="pdf-ui"></div>
4) UIExtension:
</script>
<script>
jr: {
});
<script>
Foxit PDF SDK for Web examples/license-key.js licenseSN
licenseKey
<style>
</script>
<script>
jr: {
});
Foxit PDF SDK for Web
12
<script src="./lib/PDFViewCtrl.full.js"></script>
var PDFViewer = PDFViewCtrl.PDFViewer;
"examples/UIExtension/integrate-as-module/"
13
UIExtension
"UIExtension.full.js" PDF
: /examples/UIExtension/complete_webViewer
Foxit PDF SDK for Web es-moduleamd commonJS
"/examples/UIExtension/complete_webViewer/index.html"
false) PDF
14
WebViewer 'navigator.userAgent'
UI – PC
: /examples/UIExtension/migrateAnnotData
PWA
()
15
Scaffold
webViewer
webViewer Foxit PDF SDK for Web API PDF
/ "lib" "PDFViewCtrl.full.js"
: /examples/PDFViewCtrl/basic_webViewer
UI UI
: /examples/PDFViewCtrl/preload-worker
16
Foxit PDF SDK for Web UI div
: /examples/PDFViewCtrl/div.
FileOpen
17
Nginx Http
Windows Nginx Nginx conf
'nginx.conf' 'nginx.conf' webViewer
2) Nginx Nginx/conf nginx.conf
server {
webViewer
2) (FoxitPDFSDKForWeb)
3) "npm install"
4) "npm run start-snapshot-server" snapshot ( 3002)
snapshot Foxit PDF SDK for Web
"server/snapshot/package.json" 3002
18
server {
Nodejs Http
Node.js 9.0 webViewer
1) Foxit PDF SDK for Web
snapshot http-
server snapshot Foxit PDF SDK for Web package.json
22
PDFUI.registerSignHandler(signerInfo)
Foxit PDF SDK for Web signature filteradbe.pkcs7.detached
adbe.pkcs7.sha1
adbe.pkcs7.sha1 'sha1'
plain: new Blob([buffer]),
signer: "web sdk",
sign: (signInfo, buffer) => {
//sign handler which complete the signing action, return a Promise
with signed data;
//function getDigest() and sign() should be completed by
user.
let digest = getDigest(buffer);
let signData = sign(digest);
23
Signature_State
let digest = getDigest(plainBuffer);
let verifiedStatus = verify(
*/
return Promise.resolve(getSignData(signInfo,buffer))
//function verifySignData() should be completed by developer.
let signInfo = {
byteRange: signatureField.getByteRange(),
signer: signatureField.getSigner(),
filter: signatureField.getFilter(),
subfilter: signatureField.getSubfilter(),
24
./server/pkcs7
• https://webviewer-demo.foxitsoftware.com/
•
• viewer
//this code example assumes you are running the signature service
on a local host and using the default port
7777.
pageIndex: 0,
flag: 511,
signer: "signer",
reason: "reason",
email: "email",
distinguishName: "distinguishName",
location: "loc",
text: "text",
return requestData(
//the variable `origin` refers to the service http address where
your signature service is running.
//signature handlers
return new Promise((res, rej) => {
var xmlHttp = new XMLHttpRequest();
26
formData.append(key, body[key], key);
res(xmlHttp.response);
});
};
//set signature information and function. This function can be
called to register different algorithm and
information for signing
//the api `/digest_and_sign` is used to calculate the digest and
return the signed data
pdfui.registerSignHandler({
//set signature verification function
//the api /verify is used to verify the state of signature
pdfui.setVerifyHandler((signatureField, plainBuffer, signedData)
=> {
27
/
API
XFDF/FDF JSON JSON
PDFDoc.importAnnotsFromJSON(annotsJson)
28
Stamp FileAttachment PDFPage.addAnnot
json PDFDoc.exportAnnotsToJSON
PDFPage.addAnnot
var newAnnot = await newPage.addAnnot(annotJson[i]);
}
API
• PDFDoc.exportFormToFile(fileType)
• PDFDoc.importFormFromFile(file, isXML)
Stamp
Foxit PDF SDK for Web stamp API
stamp PDF stamp
stamp
{
29
30
"SignHere": {
PDF svg lib\stamps\en-
US\DynamicStamps
stamp
viewer stamp
var initIcons = {
31
stamp
//remove a stamp with the category and name as 'MyCategory1' and
'StampName1' from you stamp list
var pdfViewer = await pdfui.getPDFViewer();
var pdfViewer = await pdfui.getPDFViewer();
var pdfViewer = await pdfui.getPDFViewer();
pdfui.getAnnotationIcons() category name
Foxit PDF SDK for Web
32
//list all available stamps
var category = allIcons[categoryKey];
iconNames.push({
Viewer stamp
Viewer Comments stamp stamp stamp
stamp
1. Advanced Web Viewer Comment tab stamp tool Custom Stamps
2. Create Custom Stamp , File -> Browse...
File -> Enter File URL, PDF SVGA URL
3. categorynamewidthheight, type stamp
stamp Stamp
4. stamp
API stamp
33
stamp viewer stamp stamp
pdfpage.addAnnot({
iconInfo: {
pdfui = new UIExtension.PDFUI({
34
35
PDFTextToSpeechSynthesis Web Speech API
TTS Google cloud text-to-speech API
API
PDFTextToSpeechSynthesis
interface PDFTextToSpeechSynthesis {
status: PDFTextToSpeechSynthesisStatus;
supported(): boolean;
pause(): void;
resume(): void;
Promise<void>;
:
40
var ThirdpartyPDFTextToSpeechSynthesis =
AbstractPDFTextToSpeechSynthesis.extend({
window.HTMLAudioElement;
41
});
});
},
// If the server API request method or parameter form is not
consistent with the following implementation, it
will need to be adjusted accordingly.
speechSynthesis: function(text, options) {
return fetch(url).then(function(response) {
if(response.status >= 400) {
return response.json().then(function(json) {
return Promise.reject(JSON.parse(json).error);
7. CollabroationDataHandler
B B
A B
CollabroationDataHandler
CollaborationDataHandler
accept() true
handler
handler COLLABORATION_ACTION handler
PDF
CollaborationDataHandler
Foxit PDF SDK for Web collaboration Node.js
websocket
45
3. A PDF shareID
5. A
46
handler CollaborationDataHandler
A
47
button PDFPage.addAnnot API
PDFPage.addAnnot DataEvent.annotationAdded
A B A B
PDFPage.addAnnot PDFPage.addAnnot
DataEvents.annotationAdded
flags: 4,
type: 'square'
rect: {
48
flags: 4,
type: 'square'
rect: {
49
Foxit PDF SDK for Web Foxit PDF
SDK for Web Foxit PDF SDK for Web
Foxit PDF SDK for Web
Gzip Brotli
UIExtension.css 1.2M 213kb 156kb
UIExtension.full.js 2.6M 534kb 443kb
Google brotli gzip brotli
IE IE brotli JavaScript
brotli
Google Mozilla HTTP
Foxit PDF SDK for Web
51
viewerOptions:{
jr: {
brotli:{
core:false,// the default value is true which means to enable
brotlifalse means no brotli
compression
jr: {
brotli:{
}
}
...
})
webassembly
7.1.1 Foxit PDF SDK for Web "preload-jr-worker.js"
webWorker wasm/asm
92
<xbutton icon-class="custom-icon-css-class">button with
custom icon</xbutton>
</div>
93
<style>
.custom-icon-css-class {
</div>
94
<script>
</div>
95
</div>
96
config: {
</div>
97
setText(text: String): void button I18n 7.0
setIconCls(cssClass: String): void button css-class 7.0
disable(): void button button 7.0
enable(): void button button 7.0
Foxit PDF SDK for Web
98
destroy(): void button 7.0
change
<file-selector accept="*.*">Select all type of
file</file-selector>
<!-- accepts PDF files -->
<!-- accepts image files -->
<dropdown style="width: auto" text="dropdown with file selector"
separate="false">
Foxit PDF SDK for Web
100
API
<li class="fv__ui-dropdown-separator"></li>
101
separate false separate
true
Foxit PDF SDK for Web
102
dropdown button dropdown
Un-separated Dropdown dropdown
<html>
<!-- By default, the value of dropdown's 'separate' option is
true -->
<!-- Set selected="0" means when you click on the dropdown
button, it will trigger the event for the
first item in the dropdown list -->
<dropdown name="separate-dropdown"
icon-class="fv__icon-toolbar-square" text="Separated
Dropdown" selected="0">
square">Square</xbutton>
<li class="my-dropdown-list-item">
Dropdown" separate="false">
124
template.tpl'
tabBodies.append('<div name="new-tab-body"
style="line-height:1"><text>New tab
body</text></div>');
// insert a tab into 'toolbar-tabs' and specifies the tab body name
as 'new-tab-body'
tabs.append('<gtab name="new-tab" body="new-tab-body"
group="toolbar-tab">Tab inserted via
JS</gtab>');
125
API
active>Tab Text 1</gtab>
<gtab group="mytabs" body="tab2" class="stacked" closable
destroy-on-close>Tab Text 2<gtab>
</div>
</div>
string -- 7.4.0
closable tab boolean false 7.4.0
destroy-on-
close
129
<webpdf>
<p> Use a fixed pixel value as the initial width
<p>
<div>
</sidebar>
</div>
<p> Use the scale value of window.innerWidth as the initial
width </p>
<div>
</sidebar>
</div>
<!-- The width value smaller than 1 means that is a scale value
of window.innerWidth -->
<sidebar open width="500">
<sidebar-panel icon-class="fv__icon-sidebar-page-manager"
title="Layers"></sidebar-panel>
</sidebar>
135
width
title sidebar-panel string ' ' 7.0.0
active sidebar-panel boolean false 7.0.0
Sidebar
sidebar :
145
<html>
Specify
<hand-button></hand-button>
</group>
<!-- If the retain-count value is equal to the components count,
no shrinkag will occur -->
<group name="home-tab-group-io" retain-count="2">
<open-file-dropdown></open-file-dropdown>
<download-file-button></download-file-button>
152
<layer-header @draggable="{type:'parent'}" title="Click header
area to drag" icon-class="fv__icon-
toolbar-print"></layer-header>
</layer>
<layer-header title="Click anywhere on the box to drag"
icon-class="fv__icon-toolbar-print"></layer-
header>
</layer>
156
layer</xbutton>
layer</xbutton>
<text>Hello! I'm a layer component!</text>
</layer>
</template>
</webpdf>
</template>
</html>
<style>
.flex-container {
layer.show(document.body); // The layer will be appended to
`document.body` when it is
displayed.
break;
distance <viewer> <distance:ruler-
container><slot> tag <distance:measurement-popup>
<template> tag
<distance:ruler-container
name="pdf-viewer-container-with-ruler">
198
<xbutton name="mobile-tablet-button"
@device="mobile,tablet">Works on mobile and
tablet</xbutton>
// In addition to the desktop, other devices will return null
var desktopButton =
rootComponent.getComponentByName('desktop-button');
// in addition to mobile and tablet device, other devices will
return null;
var mobileTabletButton =
rootComponent.getComponentByName('mobile-tablet-button');
199
<xbutton name="mobile-tablet-button"
@device.invert="mobile,tablet">Doesn't work on mobile and
tablet</xbutton>
200
</html>
<script>
var desktopButton =
rootComponent.getComponentByName('desktop-button');
var mobileTabletButton =
rootComponent.getComponentByName('mobile-tablet-button');
201
<html>
<webpdf>
<group-list>
<!-- 'fpmodule' is a module defined in the 'file-property' addon
which is not declared in the
`addons:[]`, this group component will not be rendered -->
<group name="file-property"
@require-modules="fpmodule">
<fpmodule:file-property-button></fpmodule:file-property-button>
209
].join('');
/
• <viewer> PDF template <viewer>
web PDF viewer
jr: {
appearance: UIExtension.appearances.Appearance.extend({
getLayoutTemplate: function() {
var CustomAppearance =
UIExtension.appearances.Appearance.extend({
hand"
<a> "component-name" "target: 'home-
tab-group-hand'," “”<div>
"component-name"
const customModule = UIExtension.PDFUI.module('custom', []);
return [{
// Add a component to the end of the list of children of a
specified target component.
action: UIExtension.UIConsts.FRAGMENT_ACTION.APPEND,
// Specify the name of the target component that the new components
defined in the above template
will be appended to. All the target names of fragments are defined
in the layout template.
target: 'home-tab-group-hand',
// Define the properties of the added component, such as icon,
text, and css style.
template: [
hello</dropdown-button>',
toolbar-open">open</dropdown-button>',
config: [{
// specify the component in the above template that the
configuration will be applied to.
// For example, the configuration will be applied to the component
with the name of "show-hello-
button".
213
alert('hello');
}
},
{
// The configuration will be applied to the component with the name
of "select-pdf-file-button" which is
defined in the above template of fragments.
target: 'select-pdf-file-button',
callback: CustomController
jr: {
appearance: CustomAppearance
fragment
214
}
}
},
handleMethodArguments);
215
:
"my-widgets"
// Create a new module. Please note that the second parameter must
be an array if you create a new module.
var module = UIExtension.modular.module('my-widgets', []);
UserDefinedDropdownComponent.getName = function() {
return 'dropdown'; // Declare the tag name of the component. There
is already an existing component with
the same name of 'dropdown' in the built-in component.
}
<!-- built-in dropdown -->
<dropdown></dropdown>
<!-- user-defined dropdown -->
<my-widgets:dropdown></my-widgets:dropdown>
216
name and component name in the template.
}];
}
})
});
232
disable() {
super.disable();
$(anchor).contextMenu("destroy");
//The code example below requires referencing in order Jquery
libraries including
contextMenu.min.css, jquery.min.js and contextMenu.min.js.
callback: function() {
Foxit PDF SDK for Web viewer ()
UI UI
examples\UIExtension\custom_appearance
(adaptive-to-the-device.html)
viewer
236
Foxit PDF SDK for Web Angular/cli
https://github.com/foxitsoftware/FoxitPDFSDKForWeb-Angular-Example
Foxit PDF SDK for Web – React.js
Foxit PDF SDK for Web WebPack Babel React
https://github.com/foxitsoftware/FoxitPDFSDKForWeb-ReactJS-Example
Foxit PDF SDK for Web – "create-react-app" React.js
Foxit PDF SDK for Web "create-react-app" React
https://github.com/foxitsoftware/create-react-app-foxitpdfsdkweb
Foxit PDF SDK for Web – "create-react-app-hook" React.js
Foxit PDF SDK for Web "create-react-app-hook" React
https://github.com/foxitsoftware/create-react-app-hook
Foxit PDF SDK for Web Vue
https://github.com/foxitsoftware/FoxitPDFSDKForWeb-VueJS-Example
Foxit PDF SDK for Web
Web
License
Package.json
webViewer
webViewer
UIExtension
PDFViewCtrl
Foxit PDF SDK for Web – "create-react-app" React.js
Foxit PDF SDK for Web – "create-react-app-hook" React.js
Foxit PDF SDK for Web – Vue.js