Foxit PDF SDK for Web

Foxit PDF SDK for Web
1
Foxit PDF SDK for Web PDF SDK Foxit
web SDK
PDF PDF Foxit PDF SDK
for Web Web PDF

Foxit PDF PDF Foxit
PDF SDK for Web PDF

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

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

4
PDFViewCtrl.polyfills.js PDFViewCtrl polyfill

worker
UIExtension.vw.css vmin unit CSS
UIExtension.full.js UIExtension viewer
UIExtension.polyfills.js UIExtension polyfill

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 JS JS
JS SDK

PDFViewCtrl.vendor.js PDFViewCtrl ()
PDFViewCtrl.polyfills.js + PDFViewCtrl.vendor.js + PDFViewCtrl.js =
<script src="../FoxitPDFSDKForWeb/lib/PDFViewCtrl.vendor.js"></script>
<script src="../FoxitPDFSDKForWeb/lib/PDFViewCtrl.js"></script>

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

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

<style>
</script>
<script>
jr: {
// modify the file path as your need.

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

11
fetch('/FoxitPDFSDKforWeb_DemoGuide.pdf').then(function(response) {
response.arrayBuffer().then(function(buffer) {
pdfui.openPDFByFile(buffer);
(<index.html>)

<style>
</script>
<script>
jr: {
});

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

password"
: /examples/PDFViewCtrl/encrypt-password.
: /examples/PDFViewCtrl/create-annot
License

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

19
"serve": {
)
"serve": {
(Scaffold Demo)
Scaffold demo UI addon UI demo
./examples/UIExtension/scaffoldDemo
:
•
Demo

20
index.css ---
addTextField.js

21

PDF Reference 1.7
2.
•

PDFUI.setVerifyHandler(verifyFunction)

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(

25
return requestData("post", "http://127.0.0.1:7777/verify", "text", {
viewer https://webviewer-demo.foxitsoftware.com/
2.
•

//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();
pdfui.getAnnotationIcons() category name

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>;
:

36
4. updateOptions(options: Partial<ReadAloudOptions>)
ReadAloudOptions): Promise<void>
for...of
external
demo ChromeFirefox Chromium Edge
<html>
</html>
<script>

37
* @param {ReadAloudOptions} options
const nativeSpeechUtterance = new window.SpeechSynthesisUtterance(utterance.text);
{}, this.playingOptions, options || {}

38
</script>
<html>
</html>
<script>
{}, this.playingOptions, options || {}

39
for await...of utterances utterance PDFPage

2 AbstractPDFTextToSpeechSynthesis
utterances
speech/docs/quickstarts

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

42

43
http://127.0.0.1:8080/examples/UIExtension/collaboration/index.html

44
/examples/UIExtension/collaboration communicator sockjs

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

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

50
•
•
:
}
}
...
})
}
}
...
})
Brotli
Foxit PDF SDK for Web emscripten wasm/asm
8M/13Mwasm/asm brotli
brotli IE
https://caniuse.com/#search=brotli brotli IE brotli
JavaScript brotli
brotli

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

<body>
</script>

52
jr: {
appearance: UIExtension.appearances.adaptive,
tileSize tileSize 500-
3000px tileSize 1200px
tileSize 2003600

53
Tiling size zoom
Foxit PDF SDK for Web (fitWidth) PDF
CAD
viewport
tileSize

800 * 600 3000 * 4000 tileSize 200

54

native () canvas ().
• native: WebAssembly canvas
• canvas: HTML canvas
canvas

55

( 500MB)
PDFUI
getLoadingMode() 1 arrayBuffer

56
var pdfui = new UIExtension.PDFUI({...})

57

• Addon: uix-addons
• : SDK

lib/locales
en-US
ja-JP
zh-CN
'viewer_.json'

58

/custom/locales
en-US
ui_.json
viewer_.json
ja-JP
ui_.json
viewer_.json
zh-CN
ui_.json
viewer_.json
PDFViewCtrl:
new PDFViewer({
1. i18n
2. DevTools Network ui_.json viewer_.json url

59
addResources addResourceBundle

60
});
}
}
Addon
Addon i18n namespace

61
pdfui.waitForInitialization().then(() => {
US.json

62

7.3.0 addon

demo Run demo
<html>
<open-file-dropdown></open-file-dropdown>
<download-file-button></download-file-button>

63
</div>

64

<html>
</div>

65

66
<html>
</div>

67

68
fragments
// DOM
// PDF
protected disableAll: () => void;
// PDF
protected enableAll: () => void;
<div name="toolbar" style="display: flex; flex-direction: row; padding: 6px;">
<open-localfile-button></open-localfile-button>

69
}];
},

70

UI
PDFUI appearance
Chrome Chrome DevTool device mode simulate

<html>
</html>
<script>

71
addons: []

• :

72

73
name:custom-component>

Foxit PDF SDK For Web UIExtension HTML
UIExtension UI
UIExtension

74
<print:print-button></print:print-button>

75
</html>
<script>

<print:print-button></print:print-button>
<viewer @touch-to-scroll></viewer>

76
</div>
-->

77
component.after(`
<group>
</group>
API Reference: Component ContainerComponent.

Fragment UI UI template
UI

78

fragment mobile desktop/tablet comment-tab
"run" Chrome DevTool device mode mobile/tablet
<script>
return [{
return [{

79

80

• config: action REMOVE
o config.target: action BEFORE/AFTER/APPEND/FILL/REPLACE

o config.callback:

81
before, after, thrown around
{
},

},
// controller handle around handle
handle
fragment UI Appearance layout
template

82

target
selector1
attribute

83

index-related
0
index-related
return [{
},{

84

85

HTMLElement DOM
CSS
<text>inline text</text>
<text>toolbar.tabs.home.title</text>

86

<html>

<span class="span-with-text-component" data-i18n="toolbar.tabs.home.title"> </span>
</div>

87

88
</style>
<script>
UIExtension.PDFUI.module('custom', [])
.controller('SwitchLanguageController', {

89

90

button
</div>

91
</toolbar>

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

98
destroy(): void button 7.0

change
<file-selector accept="*.*">Select all type of file</file-selector>


<dropdown style="width: auto" text="dropdown with file selector" separate="false">

99
comment"></file-selector>
</dropdown>
</div>
}
})

100
API
<li class="fv__ui-dropdown-separator"></li>

101
separate false separate
true

102
dropdown button dropdown
Un-separated Dropdown dropdown
<html>


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

103
</dropdown>
</div>

104
<dropdown name="separate-dropdown" icon-class="fv__icon-toolbar-square" text="Separated
Dropdown" selected="0">
square">Square</xbutton>
</dropdown>
Dropdown" separate="false" selected="0">
<xbutton icon-class="fv__icon-toolbar-square">Square</xbutton>
<xbutton icon-class="fv__icon-toolbar-circle">Circle</xbutton>
</dropdown>
</div>

105
.fv__ui-dropdown {

106
<html>
<xbutton @controller="custom:ScaleRatioController" scale="0.5">50%</xbutton>
<xbutton @controller="custom:ScaleRatioController" scale="0.75">75%</xbutton>
<xbutton @controller="custom:ScaleRatioController" scale="1">100%</xbutton>
</dropdown>
</div>

107
})
}
});

108
<li>left bottom</li>
<li>right bottom</li>
<li>center bottom</li>
<li>out-right bottom</li>
<li>client-center bottom</li>
<li>out-left bottom</li>

109
</dropdown>
</div>
<li>left client-center</li>
<li>client-center</li>
<li>left top</li>

110
addons: []
dropdown list">
<li style="padding-left: 1em;">Click button to create more</li>
<li @foreach="item in ctrl.items track by id">
<text @sync.text="item.text"></text>

111
<script>
.controller('DropdownItemListController', {

112
selected="0"></dropdown>

align 'left'|'right'|'out-right'|'out-
left'|'center'|'client-center' 'left' 7.0
separate dropdown button
editOptions
number string 'text' 7.0

113
Dropdown

disable(): void dropdown 7.0
enable(): void dropdown 7.0
show(): void dropdown 7.0
hide(): void dropdown 7.0
active(): void dropdown 7.0
deactive(): void dropdown 7.0

114
change
<gtab group="top-toolbar-tab" body="comment-tab">comment</gtab>
<gtab group="top-toolbar-tab" body="edit-tab">edit</gtab>
</div>

115

116
<gtab group="top-toolbar-tab" body="tab2">Tab Two</gtab>
<gtab group="top-toolbar-tab" body="tab3">Tab Three</gtab>
</div>
<gtab group="nested-tab1" body="nested-tab1-1" active>Nested Tab One</gtab>
<gtab group="nested-tab1" body="nested-tab1-2">Nested Tab Two</gtab>
</div>
</div>
<gtab group="nested-tab3" body="nested-tab3-2" active>Nested Tab3 Two</gtab>
<gtab group="nested-tab3" body="nested-tab3-3">Nested Tab3 Two</gtab>
</div>
</div>
</div>
</div>
</div>

117
list">Comment</gtab>
question">Help</gtab>
settings">Settings</gtab>

118
sidebar-comment-list">Comment</gtab>
level-question">Help</gtab>
item-menu-settings">Settings</gtab>

119
</div>

120
<gtab class="stacked" group="top-toolbar-tab" body="comment-tab" icon-class="fv__icon-sidebar-
comment-list" closable destroy-on-close>Comment</gtab>
<gtab class="stacked" group="top-toolbar-tab" body="help-tab" active icon-class="fv__icon-dialog-
level-question">Help</gtab>
group="top-toolbar-tab" body="settings-tab" icon-class="fv__icon-comment-item-menu-settings"
closable>Settings</gtab>
@controller="custom:ReopenTabController" icon-class="fv__icon-toolbar-add-sign" @tooltip tooltip-
</div>

121
list">Comment</gtab>

122
question">Help</gtab>
class="fv__icon-comment-item-menu-settings">Settings</gtab>
</div>

123
fragment-configuration</gtab>'
}];
}
});

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

-- -- 7.4.0
Tab

126
deactive(): void tab 7.0.0
destroy(): void tab 7.0.0
close(): void tab tab tab
7.4.0


127
<xbutton @controller="custom:SidebarActionController" action="collpase.totally">collapse
<xbutton @controller="custom:SidebarActionController" action="active.layers">active layers
panel</xbutton>
panel</xbutton>
title="Layers"></sidebar-panel>
title="Bookmark"></sidebar-panel>

128
</template>
</html>
<style>
.btn-container {

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>

130
</template>
</html>
<script>
<div>

131
</sidebar>
</div>
<div>
<sidebar>
</sidebar>
</div>

132
<html>
class="fv__icon-sidebar-page-manager" title="Layers"></sidebar-panel>
icon-class="fv__icon-sidebar-bookmark" title="Bookmark"></sidebar-panel>

133
<html>
</div>
<div>
class="fv__icon-sidebar-page-manager" title="Layers"></sidebar-panel>
icon-class="fv__icon-sidebar-bookmark" title="Bookmark"></sidebar-panel>

134
panel>'


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

136
true 7.0.0
expand(width: number):
sidebar-panel
enable(): void sidebar-panel 7.0
show(): void sidebar-panel 7.0
hide(): void sidebar-panel 7.0
destroy(): void sidebar-panel 7.0

137
deactive sidebar-panel sidebarPanel.on('deactive', () =>
{}) 7.0.0
Paddle

138

139
</script>

<html>

140
<style>
.flex-div {
.fv__ui-tablet .fv__ui-toolbar {
overflow-y: auto;
</script>

mac, ios, iphone, ipad, ipod, android, webos, kindle, tablet, mobile, desktop, xiaomi, huawei, touch.
paddle button
paddle

<html>

141

142

143
group-list shrink-size 762 <webpdf>
762 shrink-size child group 600
shrink-size="600" child group
<html>

144

145
<html>
Specify
<hand-button></hand-button>
</group>

<group name="home-tab-group-io" retain-count="2">

146
<hand-button></hand-button>

147
<script>
</group-list>
retain-

148
shrink-
group-list

<group-list> :

149
<html>
layer</xbutton>
layer</xbutton>
<text>Hello! I'm a layer component!</text>
</layer>
</template>
</webpdf>
</template>
</html>
<style>
.flex-container {

150
layer</xbutton>
with custom header</xbutton>

151
<template>
<layer-header title="Layer Title" icon-class="fv__icon-toolbar-print"></layer-header>
</layer>
<div class="my-custom-layer-header">
<i class="fv__icon-toolbar-print"></i>
</div>
</layer>
</template>
</webpdf>
</template>
</html>
<style>
.my-layer {
}

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>

153
</template>
</webpdf>
</template>
</html>
<style>
.my-layer {

154
<html>
</div>
<layer-header title="Modal layer with backdrop" icon-class="fv__icon-toolbar-print"></layer-header>
</layer>
header>
</layer>
</template>
</webpdf>
</template>
</html>
<style>
.my-layer {

155
.controller('ShowLayer1Controller', {
:
<html>

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;

157
<layer-header title="" icon-class="fv__icon-toolbar-print"></layer-header>
modal boolean false 7.0.0
backdrop
<layer-header> :

158
title string '' 7.0.0
icon-class string '' 7.0.0
open(appendTo:
hide(): void layer 7.0.0
close(): void layer 7.0.0

Number

159
<html>
min="0"></number>
<number @tooltip tooltip-title="min=0,max=100,step=0.1" min="0" max="100" step="0.1"></number>
<number @tooltip tooltip-title="use prefix and suffix" min="0" max="100" step="0.1" prefix="about "
suffix="%"></number>
Number
<number min="0" max="100" step="0.1" prefix="about " suffix="%"></number>

160
getValue(): number 7.1.0
</sidebar-panel>
</sidebar>

161
alert</contextmenu-item>
<contextmenu-separator></contextmenu-separator>
element.addEventListener('contextmenu', function(e) {
contextmenu.showAt(e.clientX, e.clientY);

162
<contextmenu-item>Click to do nothing</contextmenu-item>
<contextmenu-separator></contextmenu-separator>
layer
viewer

<webpdf>

163
<html>

164
PDFUI

165

166
:
:

167
<html>
config: [{

168

<hand-button>
@controller="states:HandController"></xbutton>
:
dropdown" class="fv__ui-dropdown-hide-text">

169
name="snapshot-button" icon-class="fv__icon-toolbar-snapshot">toolbar.buttons.snapshot</xbutton>
:
@sync.attr.class="'fv__ui-change-color-dropdown-color-round ' + color.type"
hide-text" @cannotBeDisabled>

170
</dropdown>
<download-file-button>
toolbar-download" @controller="file:DownloadFileController">toolbar.buttons.download</xbutton>
<print:print-button> <print:print-dialog>
<print:print-button> <print:print-dialog>
print addon print addon addons:[] addon
addon
print" @controller="print:ShowPrintDialogController">print:button-tooltip.title</xbutton>
<print:print-dialog></print:print-dialog>
name="goto-prev-page" @controller="gotoview:GotoPrevPageController"></xbutton>

171
name="goto-next-page" @controller="gotoview:GotoNextPageController"></xbutton>

:
@on.keydown="onkeydown"></number>
total">0</text>
action="zoomout" name="zoom-out" icon-class="fv__icon-toolbar-zoom-
out">toolbar.buttons.zoomout</xbutton>
action="zoomin" name="zoom-in" icon-class="fv__icon-toolbar-zoom-in">toolbar.buttons.zoomin</xbutton>
<editable-zoom-dropdown>

172
@controller="zoom:EditableZoomActionController" name="editable-zoom-dropdown-
@controller="zoom:EditableZoomActionController" name="editable-zoom-dropdown-
@controller="zoom:EditableZoomToScaleValueController"></dropdown-button>
selected="0">
@controller="zoom:DropdownZoomInAndOutController" icon-class="fv__icon-toolbar-zoom-
in">toolbar.buttons.zoomin</dropdown-button>
@controller="zoom:DropdownZoomInAndOutController" icon-class="fv__icon-toolbar-zoom-
out">toolbar.buttons.zoomout</dropdown-button>
@controller="zoom:ZoomActionController" icon-class="fv__icon-toolbar-fit-
@controller="zoom:ZoomActionController" icon-class="fv__icon-toolbar-fit-

173
@controller="zoom:ZoomToScaleValueController"></dropdown-button>
name="single-page" icon-class="fv__icon-toolbar-single-page">toolbar.tools.single-page</xbutton>
<xbutton @tooltip tooltip-title="toolbar.tools.continuous-page"
@controller="pagemode:ContinuousPageModeController" name="continuous-page" icon-class="fv__icon-
name="facing-page" icon-class="fv__icon-toolbar-double-page">toolbar.tools.facing</xbutton>
<xbutton @tooltip tooltip="toolbar.tools.continuous-facing"
continuous:HContinuousViewModeController" name="h-continuous-button" icon-class="fv__icon-toolbar-h-
<h-continuous:h-continuous-button> h-continuous addon
'h-continuous' addon addons addon addon
<loupe-tool-button> <loupe-tool-dialog>
state-handler
@tooltip tooltip-title="toolbar.tooltip.loupe.title"

174
header>
<dropdown name="loupe-tool-zoom-dropdown" @controller="loupe:LoupeToolScaleListController"
@controller="loupe:LoupeToolScaleController" @bind.text="scaleItem.text"></dropdown-button>
<checkbox name="loupe-tool-lock">loupe.lockButton</checkbox>
</layer-toolbar>
</layer>
</template>
<marquee-tool-button>
button" @tooltip tooltip-title="toolbar.tooltip.marquee.title"
@controller="marquee:MarqueeToolController">toolbar.buttons.marquee</xbutton>
<fpmodule:file-property-dialog> file-property addon
file-property addon addons:[] addon addon
<fpmodule:file-property-dialog>
<fpmodule:file-property-button></fpmodule:file-property-button>

175
handlers
<create-drawings-dropdown>
@controller="states:CreateTextController" icon-class="fv__icon-toolbar-note">toolbar.create.note</xbutton>
@controller="states:CreateHighlightController" icon-class="fv__icon-toolbar-text-
highlight">toolbar.create.highlight</xbutton>
@controller="states:CreateStrikeoutController" icon-class="fv__icon-toolbar-
@controller="states:CreateUnderlineController" icon-class="fv__icon-toolbar-
@controller="states:CreateSquigglyController" icon-class="fv__icon-toolbar-
@controller="states:CreateReplaceController" icon-class="fv__icon-toolbar-

176
@controller="states:CreateCaretController" icon-class="fv__icon-toolbar-insert">toolbar.create.caret</xbutton>
@controller="states:CreateTypewriterController" icon-class="fv__icon-toolbar-
@controller="states:CreateCalloutController" icon-class="fv__icon-toolbar-
@controller="states:CreateTextboxController" icon-class="fv__icon-toolbar-
@controller="states:CreateAreaHighlightController" icon-class="fv__icon-toolbar-area-
highlight">toolbar.create.areahighlight</xbutton>
@controller="states:CreatePencilController" icon-class="fv__icon-toolbar-
@controller="states:EraserController" icon-class="fv__icon-toolbar-eraser">toolbar.buttons.eraser</xbutton>

class="fv__icon-toolbar-distance"
icon-class="fv__icon-toolbar-perimeter"

177
class="fv__icon-toolbar-area" @controller="distance:CreateAreaController">toolbar.buttons.area</xbutton>
icon-class="fv__icon-toolbar-areacircle"
@controller="states:CreateFileAttachmentController" icon-class="fv__icon-toolbar-
attachment">toolbar.create.fileattachment</xbutton>
@controller="states:CreateImageController" icon-class="fv__icon-toolbar-
@controller="states:CreateLinkController" icon-class="fv__icon-toolbar-link" >toolbar.create.link</xbutton>
multi-media addon multi-media addon addons:[]
addon addon
Graphics
path-object addon

178
graphic
3. <edit-pageobjects:path-objects-dropdown>:
1. <import-form-module:import-form-button>

179
4. <create-signature-field-button>
<ink-sign-dropdown> <create-ink-sign-dialog>
<create-ink-sign-dialog>
<ink-sign-dropdown></ink-sign-dropdown>

180

distance <viewer> <distance:ruler-
container><slot> tag <distance:measurement-popup> <template> tag
<distance:ruler-container name="pdf-viewer-container-with-ruler">

181
</contextmenu>
<default-annot-contextmenu>
contextmenu>
contextmenu>
:

182

183

184
:
opr:SignController">certifySign.sign</contextmenu-item>

185

186

@controller
</div>

187
<xbutton @tooltip tooltip-title="Tooltip title">show tooltip on mouse enter</xbutton>
</div>

188
<div class="left-right">
</div>
</div>

189
</template>
</html>
<style>
.vertical {

190
<html>
<div class="left-right">
placement="left">Left</xbutton>
placement="right">Right</xbutton>
placement="bottom">Bottom</xbutton>

191

192
<html>
<sidebar-panel
@tooltip

193
<layer-header title="Click anywhere on the box to drag" icon-class="fv__icon-toolbar-print"></layer-
header>
</layer>
</template>
</webpdf>
</template>
</html>
<style>
.my-layer {

194

195
<template>
<layer-header @draggable="{type:'parent'}" title="Click header area to drag" icon-class="fv__icon-
toolbar-print"></layer-header>
</layer>
</template>
</webpdf>
</template>
</html>
<style>
.my-layer {
@stop-drag

196
<html>
<layer-header title="Drag everywhere" icon-class="fv__icon-toolbar-print"></layer-header>
<div>
<label>
</label>
<label>
<input @stop-drag type="range" min="0" max="100" step="0.1">
</label>
</div>
</layer>
</template>
</webpdf>
</template>
</html>
<style>
.my-layer {

197
<script>

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>

<group name="file-property" @require-modules="fpmodule">

202
});
<html>

203
<template>
});

204
Addons
Addons
/lib/uix-addons Foxit PDF SDK for Web addons
addons addon
uix-addons
'edit-graphics'
'exportForm'
'file-property'
'full-screen'
'h-continuous'
'h-facing'
'h-single'
'importForm'
'multi-media'
'password-protect'
'edit-pageobjects'
'print'
'redaction'
'editTextObject'
'undo-redo'
https://webviewer-demo.foxitsoftware.com/lib/uix-addons

205
addons HTTP HTTP
Foxit PDF SDK for Web addons
allInOne.js addons addons
addon
-- addon.info.json
addon.info.json addon addon i18n css
:

206
i18n "example""i18n-key" "toolbar.title", "dialog.title"
"buttons.addText" ( zh-CN.json).
"css"
allInOne.js
addonsallInOne.js PC
text-object form-designer
addons:
• UIXAddons.filter allInOne.js addons
addInOne.js.
...
})

207
addon web viewer
<script src="path/to/UIExtension.full.js"></script>
<script src="path/to/allInOne.js"></script>
addon addon loader gulp plugin
• addon-loader for webpack
/examples/UIExtension/use-merged-addon
/examples/UIExtension/scaffoldDemo/readme.md addons

208

7.0 Foxit PDF SDK for Web UI UI
Foxit PDF SDK for Web UIExtension.js UI
Foxit PDF SDK for Web API web viewer

) Fragments UI snippet
snippet "aciton" snippet (append, prepend, before,
after, ext, replace, insert, remove ext) template

Template UI template
webViewer
jr: {
appearance: UIExtension.appearances.Appearance.extend({
getLayoutTemplate: function() {

209
].join('');
/
• <viewer> PDF template <viewer>

web PDF viewer
jr: {
appearance: UIExtension.appearances.Appearance.extend({
getLayoutTemplate: function() {
var CustomAppearance = UIExtension.appearances.Appearance.extend({

210
'<webpdf>',
' <toolbar>',
' </gtab>',
' </gtab>',
' </toolbar>',
' <create-strikeout-button></create-strikeout-button>',
' <create-underline-button></create-underline-button>',
' <create-squiggly-button></create-squiggly-button>',
' <create-replace-button></create-replace-button>',
' <create-caret-button></create-caret-button>',
' <create-note-button></create-note-button>',
jr: {
appearance: CustomAppearance
' </gtab>',

211
' </gtab>',
' </toolbar>',
' <create-strikeout-button></create-strikeout-button>',
' <create-underline-button></create-underline-button>',
' <create-squiggly-button></create-squiggly-button>',
' <create-replace-button></create-replace-button>',
' <create-caret-button></create-caret-button>',
' <create-note-button></create-note-button>',
jr: {
layout-template.tpl built-in-mobile-layout-template.tpl
UI
"examples\UIExtension\custom_appearance" Foxit PDF SDK for Web
"adaptive-to-the-device.html" () "not-adaptive-
to-the-device.html"

212

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: {

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.
}

<dropdown></dropdown>

<my-widgets:dropdown></my-widgets:dropdown>

216
name and component name in the template.
}];
}
})
});

tabs tab
Tab tabs
tab
sidebar
sidebar-search, sidebar-bookmark
layer-view fv_ui-layer-panel div
dropdown
dropdown-item

217
separator showAt
dropdown-
change
Controller handle

accordion
/

text DOM Text Text i18next

handle

number
+
xbutton
exist" slot
Component#appendSlot

218

219

220
default-markup-
fileattachment-
media-
redact-
contextmenu-
contextmenu-
contextmenu-

221

comment-
list:toggle-
commentlist-
group-button
( PDF comment group)
Add-on

import-form-
module:import-form-
button

export-form-
module:export-form-
dropdown
fpmodule:file-

222

multi-media:multi-
edit-pageobjects:edit-
edit-text-object:add-

223
•
•
Foxit PDF SDK for Web XML
{

224

225

PDF references Foxit PDF SDK
for Web XViewUI getAnnotsContextMenuName
template
"fv--default-annot-contextmenu"
PDF 'trapnet' Foxit PDF SDK for Web

createContextMenu(owner, anchor, config) {
if(owner instanceof PDFViewCtrl.AnnotComponent) {

226
</contextmenu>

if(owner instanceof PDFViewCtrl.AnnotComponent) {
const contextMenuName = super.getAnnotsContextMenuName(owner)

227
const pdfui = new UIExtension.PDFUI({
// You can add more annotation types
if(type === 'underline') {
return AnnotComponentClass;
return annotMap[type][intent];
showContextMenu() {
constructor() {
super();
this.initContextmenu();

228
contextMenu.min.js and min.js.
fragments viewerUI

229

item</contextmenu-item>`,

230
new UIExtension.PDFUI({
appearance: UIExtension.appearances.AdaptiveAppearance.extend({
getDefaultFragments: function() {
item</contextmenu-item>`,

231
constructor() {
super();
this.initContextmenu();

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

233
getClosestComponentByType() getCurrentSelectionTool()

234

websiteRoot/assets/

2) i18n
4) websiteRoot/assets/locales/en-US "ui_.json"
() "ui_.json"
1. i18n
2. DevTools Network ui_.json url

235

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

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

Foxit PDF SDK for Web

Documents

Transcript of Foxit PDF SDK for Web