Startseite Erkunden Hilfe
Registrieren Anmelden
liuxiaolong
/
react_native_plugin_test_1
1
0
Fork 0
Dateien Issues 0 Pull-Requests 0 Wiki
Struktur: 5f0cdc28dd
Branches Tags
react_native...
/
CONFIGURATION.md

CONFIGURATION.md 38 KB
Verlauf Originalformat

CPDFConfiguration Descriptions

This document outlines the UI configurations and PDF properties that can be defined when using the ComPDFKit PDF mobile SDK, including cross-platform support for React Native and Flutter, for opening PDF views. While the method for modifying configurations may vary across platforms due to different programming languages, the parameters remain consistent.

This configuration is only effective when you are using the default PDF view interfaces provided by the ComPDFKit_Tools module on Android and iOS platforms. React Native and Flutter already include the ComPDFKit_Tools module by default.

  • Android: CPDFDocumentActivity、CPDFDocumentFragment
  • iOS: CPDFCPDFViewController

Usage Examples

Below are simple usage examples for each platform:

Android

For JSON-formatted configuration data, please refer to the default configuration.

// Retrieve default configuration data from the assets folder.
CPDFConfiguration configuration = CPDFConfigurationUtils.normalConfig(getContext(), "tools_default_configuration.json");

// Open the PDF using CPDFDocumentActivity.
CPDFDocumentActivity.startActivity(getContext(), documentPath, "", configuration);

// Open the PDF using CPDFDocumentFragment.
CPDFDocumentFragment.newInstance(documentPath, "", configuration);

iOS

For JSON-formatted configuration data, please refer to the default configuration.

let jsonDataParse = CPDFJSONDataParse(String: jsonString as! String)
guard let configuration = jsonDataParse.configuration else { return }

CPDFViewController(filePath: path, password: nil, configuration: configuration)

React Native

var configuration = ComPDFKit.getDefaultConfig({
  modeConfig: {
    initialViewMode: CPDFViewMode.VIEWER,
    availableViewModes: [
      CPDFViewMode.VIEWER,
      CPDFViewMode.ANNOTATIONS
    ]
  }
})
ComPDFKit.openDocument(document, '', configuration)

Flutter

var configuration = CPDFConfiguration(
  modeConfig: ModeConfig(
    initialViewMode: CPreviewMode.viewer,
    availableViewModes: [
      CPreviewMode.viewer,
      CPreviewMode.annotations
    ]
  )
);
ComPDFKit.openDocument(document, password: '', configuration: configuration);

Option Explanations

In the following section, explanations will be provided in JSON format. Each platform has defined relevant constant classes to assist you in conveniently setting the related parameters. Please refer to the respective CPDFConfiguration class content for each platform.

modeConfig

Used to configure the initial display mode and supported modes when displaying a PDF file.

Parameters
Name Type Description
initialViewMode string Default mode to display when opening the PDF View, default is viewer
availableViewModes string Configure supported modes
Constants
Name Description
viewer View PDF documents only.
annotations Enables annotation editing mode, allowing addition, deletion, and modification of annotations.
contentEditor content editing mode, enabling editing of text and image content within the PDF.
forms form filling mode, allowing addition and editing of form fields.
signautres signature mode, allowing electronic and digital signatures, as well as verification of digital signatures. 
{
  "modeConfig": {
    "initialViewMode": "viewer",
    "availableViewModes": [
      "viewer",
      "annotations",
      "contentEditor",
      "forms",
      "signatures"
    ]
  }
}

toolbarConfig

Configure functions for the top toolbar in the PDF view.

Parameters
Name Type Description
androidAvailableActions Array Functions available in the top toolbar for Android platform.
Defaults: thumbnail, search, bota, menu
iosLeftBarAvailableActions Array Functions available in the left side of the top toolbar for iOS platform.
Defaults: back, thumbnail
iosRightBarAvailableActions Array Functions available in the right side of the top toolbar for iOS platform.
Defaults: search, bota, menu
availableMenus Array A list of more functions popped up by the menu option on the top toolbar.
Constants
Name Description
back Exit the PDF view.
On Android platform, this is always displayed at the far left, regardless of the order of configuration.
thumbnail Displays a list of PDF thumbnails and allows page manipulation such as addition and deletion.
bota Displays PDF outline, bookmarks, and annotations list.
menu More options menu.
availableMenus Constants
Name Description
viewSetting Settings related to PDF viewing, such as scroll direction and theme.
documentEditor Displays a list of PDF document thumbnails and allows page manipulation such as addition and deletion.
documentInfo Displays information related to the PDF document.
watermark Adds text or image watermark to the document, saving it as a new document.
security Sets viewing and permission passwords for the document.
flattened Flattens annotations and other content within the document, making annotations uneditable.
save Saves the document.
share Shares the PDF document.
openDocument Opens the system file selector to choose and open a PDF document. 
{
   "toolbarConfig": {
    "androidAvailableActions": [
      "thumbnail",
      "search",
      "bota",
      "menu"
    ],
    "iosLeftBarAvailableActions": [
      "back",
      "thumbnail"
    ],
    "iosRightBarAvailableActions": [
      "search",
      "bota",
      "menu"
    ],
    "availableMenus": [
      "viewSettings",
      "documentEditor",
      "documentInfo",
      "watermark",
      "security",
      "flattened",
      "save",
      "share",
      "openDocument"
    ]
  }
}

annotationsConfig

Configure annotation-related settings, such as enabling types displayed in the annotation toolbar and setting default attributes when adding annotations, including color and text styles.

Parameters
Name Type Description
availableTypes Array The types of annotations enabled in the toolbar at the bottom.
availableTools Array Annotation tools, including Setting, Undo, and Redo.
initAttribute Array Set default attributes for annotations.
availableTypes Constants
Name
note
highlight
underline
squiggly
strikeout
ink
circle
square
arrow
line
freetext
signature
stamp
pictures
link
sound
availableTools Constants
Name Description
setting When a specific annotation type is selected from the list, the setting button becomes clickable, allowing for setting default attributes for the corresponding annotation.
undo Undo the annotation operation.
redo Redo the annotation operation.
initAttribute
  • note
Name Type Example Description
color string "#1460F3" Color of note annotations
alpha int 255 Opacity of the color
Range: 0~255
  • highlight
Name Type Example Description
color string "#1460F3" Color of highlight annotations
alpha int 77 Opacity of the color
Range: 0~255
  • underline
Name Type Example Description
color string "#1460F3" Color of underline annotations
alpha int 77 Opacity of the color
Range: 0~255
  • squiggly
Name Type Example Description
color string "#1460F3" Color of squiggly annotations
alpha int 77 Opacity of the color
Range: 0~255
  • strikeout
Name Type Example Description
color string "#1460F3" Color of strikeout annotations
alpha int 77 Opacity of the color
Range: 0~255
  • ink
Name Type Example Description
color string "#1460F3" Color of ink annotations
alpha int 77 Opacity of the color
Range: 0~255
borderStyle int 10 Brush thickness
value range: 1~10
  • square
Name Type Example Description
fillColor string "#1460F3" Fill color of the square
borderColor string "#000000" Border color of the square
colorAlpha int 128 Opacity of the fill color and border color
Range: 0~255
borderWidth int 2 Width of the border
Value range: 1~10
borderStyle obj {
"style": "solid",
"dashGap": 8.0
}		 Border style: dashed or solid
style string solid dashed，solid
dashGap double 8.0 Dashed gap, only style=dashed is valid.
value range:0.0~8.0
  • circle
Name Type Example Description
fillColor string "#1460F3" Fill color of the circle
borderColor string "#000000" Border color of the circle
colorAlpha int 128 Opacity of the fill color and border color
Range: 0~255
borderWidth int 2 Width of the border
Value range: 1~10
borderStyle obj {
"style": "solid",
"dashGap": 8.0
}		 Border style: dashed or solid
style string solid dashed,solid
dashGap double 8.0 Dashed gap, only style=dashed is valid.
value range:0.0~8.0
  • line
Name Type Example Description
borderColor string "#000000" line color
borderAlpha int 128 line color opacity
Range: 0~255
borderWidth int 2 Width of the border
Value range: 1~10
borderStyle obj {
"style": "solid",
"dashGap": 8.0
}		 Border style: dashed or solid
style string solid dashed,solid
dashGap double 8.0 Dashed gap, only style=dashed is valid.
value range:0.0~8.0
  • arrow
Name Type Example Description
borderColor string "#000000" arrow color
borderAlpha int 128 line color opacity
Range: 0~255
borderWidth int 2 Width of the border
Value range: 1~10
borderStyle obj {
"style": "solid",
"dashGap": 8.0
}		 Border style: dashed or solid
style string solid dashed,solid
dashGap double 8.0 Dashed gap, only style=dashed is valid.
value range:0.0~8.0
startLineType string openArrow Arrow starting position shape.
tailLineType string none Arrow tail position shape.

LineType Constants

Name
none
openArrow
closedArrow
square
circle
diamond
  • freeText
Name Type Example Description
fontColor string "#1460F3" text color
fontColorAlpha int 255 text color opacity.
value range：0~255
fontSize int 30 font size
value range:1~100
isBold boolean false Whether the font is bold.
isItalic boolean false Is the font italicized.
alignment string left Text alignment.
left,center,right
typeface string Helvetica The font used by default for text.
Courier
Helvetica
Times-Roman		 
{ 
"annotationsConfig": {
    "availableTypes": [
      "note",
      "highlight",
      "underline",
      "squiggly",
      "strikeout",
      "ink",
      "circle",
      "square",
      "arrow",
      "line",
      "freetext",
      "signature",
      "stamp",
      "pictures",
      "link",
      "sound"
    ],
    "availableTools": [
      "setting",
      "undo",
      "redo"
    ],
    "initAttribute": {
      "note": {
        "color": "#1460F3",
        "alpha": 255
      },
      "highlight": {
        "color": "#1460F3",
        "alpha": 77
      },
      "underline": {
        "color": "#1460F3",
        "alpha": 77
      },
      "squiggly": {
        "color": "#1460F3",
        "alpha": 77
      },
      "strikeout": {
        "color": "#1460F3",
        "alpha": 77
      },
      "ink": {
        "color": "#1460F3",
        "alpha": 100,
        "borderWidth": 10
      },
      "square": {
        "fillColor": "#1460F3",
        "borderColor": "#000000",
        "colorAlpha" : 128,
        "borderWidth": 2,
        "borderStyle": {
          "style": "solid",
          "dashGap": 0.0
        }
      },
      "circle": {
        "fillColor": "#1460F3",
        "borderColor": "#000000",
        "colorAlpha" : 128,
        "borderWidth": 2,
        "borderStyle": {
          "style": "solid",
          "dashGap": 0.0
        }
      },
      "line": {
        "borderColor": "#1460F3",
        "borderAlpha": 100,
        "borderWidth": 5,
        "borderStyle": {
          "style": "solid",
          "dashGap": 0.0
        }
      },
      "arrow": {
        "borderColor": "#1460F3",
        "borderAlpha": 100,
        "borderWidth": 5,
        "borderStyle": {
          "style": "solid",
          "dashGap": 0.0
        },
        "startLineType": "none",
        "tailLineType": "openArrow"
      },
      "freeText": {
        "fontColor": "#000000",
        "fontColorAlpha": 255,
        "fontSize": 30,
        "isBold": false,
        "isItalic": false,
        "alignment": "left",
        "typeface": "Helvetica"
      }
    }
  }
}

contentEditorConfig

Switch to content editing mode to edit text and images. This configuration option allows you to specify the enabled editing types, such as enabling text editing only. You can also set the default attributes for adding text.

Parameters
Name Type Description
availableTypes Array Content editing mode, the editing mode displayed at the bottom of the view.
Default order: editorText, editorImage
availableTools Array Available tools.
including: setting, undo,redo
initAttribute obj 添加文本时的默认属性
  • text
Name Type Example Description
fontColor string "#1460F3" text color
fontColorAlpha int 255 text color opacity.
value range：0~255
fontSize int 30 font size
value range:1~100
isBold boolean false Whether the font is bold.
isItalic boolean false Is the font italicized.
alignment string left Text alignment.
left,center,right
typeface string Helvetica The font used by default for text.
Courier
Helvetica
Times-Roman		 
{
  "contentEditorConfig": {
    "availableTypes": [
      "editorText",
      "editorImage"
    ],
    "availableTools": [
      "setting",
      "undo",
      "redo"
    ],
    "initAttribute": {
      "text": {
        "fontColor": "#000000",
        "fontColorAlpha" : 100,
        "fontSize": 30,
        "isBold": false,
        "isItalic": false,
        "typeface": "Times-Roman",
        "alignment": "left"
      }
    }
  }
}

formsConfig

This section is used to configure the types of forms enabled in the view's bottom toolbar, the form tools available, and the default attributes when adding forms.

Parameters
Name Type Description
availableTypes Array Types of forms enabled.
availableTools Array Form tools enabled.
initAttribute obj Default attributes for various form types.
availableTypes Constants
Name
textField
checkBox
radioButton
listBox
comboBox
signaturesFields
pushButton
availableTools Constants
Name
undo
redo
initAttribute
  • textField
Name Type Example Description
fillColor string "#DDE9FF" Text field fill color.
borderColor string "#DDE9FF" Text field border color
borderWidth int 2 Text field border width
value range: 1~10
fontColor string "#000000" font color
fontSize int 20 font size
value range:1~100
isBold boolean false Whether the font is bold.
isItalic boolean false Is the font italicized.
alignment string left Text alignment.
left,center,right
multiline boolean true 是否多行显示
typeface string Helvetica The font used by default for text.
Courier
Helvetica
Times-Roman
  • checkBox
Name Type Example Description
fillColor string "#DDE9FF" checkBox fill color.
borderColor string "#1460F3" checkBox border Color.
borderWidth int 2 checkBox border width.
value range: 1~10
checkedColor string "#1460F3" checkBox color.
isChecked boolean false 创建checkBox时，是否默认直接为勾选状态.
checkedStyle string "check" checkBox style.

checkedStyle Constants

Name
check
circle
cross
diamond
square
star
  • radioButton
Name Type Example Description
fillColor string "#DDE9FF" radio Button fill color.
borderColor string "#1460F3" radio Button border Color.
borderWidth int 2 radio Button border width.
value range: 1~10
checkedColor string "#1460F3" radioButton color.
isChecked boolean false When creating radio button, whether to check the status directly by default.
checkedStyle string "check" radio button style.

checkedStyle Constants

Name
check
circle
cross
diamond
square
star
  • listBox
Name Type Example Description
fillColor string "#DDE9FF" list box fill color.
borderColor string "#1460F3" list box border Color.
borderWidth int 2 list box border width.
value range: 1~10
fontColor string "#000000" text color.
fontSize int 20 font size
value range:1~100
typeface string Helvetica The font used by default for text.
Courier
Helvetica
Times-Roman
isBold boolean false Whether the font is bold.
isItalic boolean false Is the font italicized.
  • comboBox
Name Type Example Description
fillColor string "#DDE9FF" combo box fill color.
borderColor string "#1460F3" combo box border Color.
borderWidth int 2 combo box border width.
value range: 1~10
fontColor string "#000000" text color.
fontSize int 20 font size
value range:1~100
typeface string "Helvetica" The font used by default for text.
Courier
Helvetica
Times-Roman
isBold boolean false Whether the font is bold.
isItalic boolean false Is the font italicized.
  • pushButton
Name Type Example Description
fillColor string "#DDE9FF" combo box fill color.
borderColor string "#1460F3" combo box border Color.
borderWidth int 2 combo box border width.
value range: 1~10
fontColor string "#000000" text color.
fontSize int 20 font size
value range:1~100
typeface string "Helvetica" The font used by default for text.
Courier
Helvetica
Times-Roman
isBold boolean false Whether the font is bold.
isItalic boolean false Is the font italicized.
title string "Button" push button 创建时默认的按钮标题
  • signaturesFields
Name Type Example Description
fillColor string "#DDE9FF" combo box fill color.
borderColor string "#1460F3" combo box border Color.
borderWidth int 2 combo box border width.
value range: 1~10		 
{
  "formsConfig": {
    "availableTypes": [
      "textField",
      "checkBox",
      "radioButton",
      "listBox",
      "comboBox",
      "signaturesFields",
      "pushButton"
    ],
    "availableTools": [
      "undo",
      "redo"
    ],
    "initAttribute": {
      "textField": {
        "fillColor": "#DDE9FF",
        "borderColor": "#1460F3",
        "borderWidth": 2,
        "fontColor": "#000000",
        "fontSize": 20,
        "isBold": false,
        "isItalic": false,
        "alignment": "left",
        "multiline": true,
        "typeface": "Helvetica"
      },
      "checkBox": {
        "fillColor": "#DDE9FF",
        "borderColor": "#1460F3",
        "borderWidth": 2,
        "checkedColor": "#43474D",
        "isChecked": false,
        "checkedStyle": "check"
      },
      "radioButton": {
        "fillColor": "#DDE9FF",
        "borderColor": "#1460F3",
        "borderWidth": 2,
        "checkedColor": "#43474D",
        "isChecked": false,
        "checkedStyle": "circle"
      },
      "listBox": {
        "fillColor": "#DDE9FF",
        "borderColor": "#1460F3",
        "borderWidth": 2,
        "fontColor": "#000000",
        "fontSize": 20,
        "typeface": "Helvetica",
        "isBold": false,
        "isItalic": false
      },
      "comboBox": {
        "fillColor": "#DDE9FF",
        "borderColor": "#1460F3",
        "borderWidth": 2,
        "fontColor": "#000000",
        "fontSize": 20,
        "typeface": "Helvetica",
        "isBold": false,
        "isItalic": false
      },
      "pushButton": {
        "fillColor": "#DDE9FF",
        "borderColor": "#1460F3",
        "borderWidth": 2,
        "fontColor": "#000000",
        "fontSize": 20,
        "title": "Button",
        "typeface": "Helvetica",
        "isBold": false,
        "isItalic": false
      },
      "signaturesFields": {
        "fillColor": "#DDE9FF",
        "borderColor": "#000000",
        "borderWidth": 2
      }
    }
  }
}

readerViewConfig

Parameters
Name Type Example Description
linkHighlight boolean true Sets whether hyperlinks in the PDF document annotations are highlighted.
formFieldHighlight boolean true Sets whether form fields in the PDF document are highlighted.
displayMode string "singlePage" Display mode of the PDF document, single page, double page, or book mode.
continueMode boolean false Whether PDF page flipping is continuous scrolling.
verticalMode boolean true Whether scrolling is in vertical direction.
true: Vertical scrolling, false: Horizontal scrolling.
Default: true
cropMode boolean false Cropping mode. Whether to crop blank areas of PDF pages
themes string light Theme color.
Default: light
enableSliderBar boolean true Whether to display the sidebar quick scroll bar.
enablePageIndicator boolean true Whether to display the bottom page indicator.
pageSpacing int 10 Spacing between each page of the PDF.
default 10px.
pageScale double 1.0 Page scale value, default 1.0.
value range:1.0~5.0
pageSameWidth boolean true only android platform.
displayMode Constants
Name
singlePage
doublePage
coverPage
themes Constants
Name Description
light Bright mode, readerview background is white.
dark dark mode, readerview background is black.
sepia brown paper color.
reseda Light green, eye protection mode.

Json Example

{
  "modeConfig": {
    "initialViewMode": "viewer",
    "availableViewModes": [
      "viewer",
      "annotations",
      "contentEditor",
      "forms",
      "signatures"
    ]
  },
  "toolbarConfig": {
    "androidAvailableActions": [
      "thumbnail",
      "search",
      "bota",
      "menu"
    ],
    "iosLeftBarAvailableActions": [
      "back",
      "thumbnail"
    ],
    "iosRightBarAvailableActions": [
      "search",
      "bota",
      "menu"
    ],
    "availableMenus": [
      "viewSettings",
      "documentEditor",
      "documentInfo",
      "watermark",
      "security",
      "flattened",
      "save",
      "share",
      "openDocument"
    ]
  },
  "annotationsConfig": {
    "availableTypes": [
      "note",
      "highlight",
      "underline",
      "squiggly",
      "strikeout",
      "ink",
      "circle",
      "square",
      "arrow",
      "line",
      "freetext",
      "signature",
      "stamp",
      "pictures",
      "link",
      "sound"
    ],
    "availableTools": [
      "setting",
      "undo",
      "redo"
    ],
    "initAttribute": {
      "note": {
        "color": "#1460F3",
        "alpha": 255
      },
      "highlight": {
        "color": "#1460F3",
        "alpha": 77
      },
      "underline": {
        "color": "#1460F3",
        "alpha": 77
      },
      "squiggly": {
        "color": "#1460F3",
        "alpha": 77
      },
      "strikeout": {
        "color": "#1460F3",
        "alpha": 77
      },
      "ink": {
        "color": "#1460F3",
        "alpha": 100,
        "borderWidth": 10
      },
      "square": {
        "fillColor": "#1460F3",
        "borderColor": "#000000",
        "colorAlpha" : 128,
        "borderWidth": 2,
        "borderStyle": {
          "style": "solid",
          "dashGap": 0.0
        }
      },
      "circle": {
        "fillColor": "#1460F3",
        "borderColor": "#000000",
        "colorAlpha" : 128,
        "borderWidth": 2,
        "borderStyle": {
          "style": "solid",
          "dashGap": 0.0
        }
      },
      "line": {
        "borderColor": "#1460F3",
        "borderAlpha": 100,
        "borderWidth": 5,
        "borderStyle": {
          "style": "solid",
          "dashGap": 0.0
        }
      },
      "arrow": {
        "borderColor": "#1460F3",
        "borderAlpha": 100,
        "borderWidth": 5,
        "borderStyle": {
          "style": "solid",
          "dashGap": 0.0
        },
        "startLineType": "none",
        "tailLineType": "openArrow"
      },
      "freeText": {
        "fontColor": "#000000",
        "fontColorAlpha": 255,
        "fontSize": 30,
        "isBold": false,
        "isItalic": false,
        "alignment": "left",
        "typeface": "Helvetica"
      }
    }
  },
  "contentEditorConfig": {
    "availableTypes": [
      "editorText",
      "editorImage"
    ],
    "availableTools": [
      "setting",
      "undo",
      "redo"
    ],
    "initAttribute": {
      "text": {
        "fontColor": "#000000",
        "fontColorAlpha" : 100,
        "fontSize": 30,
        "isBold": false,
        "isItalic": false,
        "typeface": "Times-Roman",
        "alignment": "left"
      }
    }
  },
  "formsConfig": {
    "availableTypes": [
      "textField",
      "checkBox",
      "radioButton",
      "listBox",
      "comboBox",
      "signaturesFields",
      "pushButton"
    ],
    "availableTools": [
      "undo",
      "redo"
    ],
    "initAttribute": {
      "textField": {
        "fillColor": "#DDE9FF",
        "borderColor": "#1460F3",
        "borderWidth": 2,
        "fontColor": "#000000",
        "fontSize": 20,
        "isBold": false,
        "isItalic": false,
        "alignment": "left",
        "multiline": true,
        "typeface": "Helvetica"
      },
      "checkBox": {
        "fillColor": "#DDE9FF",
        "borderColor": "#1460F3",
        "borderWidth": 2,
        "checkedColor": "#43474D",
        "isChecked": false,
        "checkedStyle": "check"
      },
      "radioButton": {
        "fillColor": "#DDE9FF",
        "borderColor": "#1460F3",
        "borderWidth": 2,
        "checkedColor": "#43474D",
        "isChecked": false,
        "checkedStyle": "circle"
      },
      "listBox": {
        "fillColor": "#DDE9FF",
        "borderColor": "#1460F3",
        "borderWidth": 2,
        "fontColor": "#000000",
        "fontSize": 20,
        "typeface": "Helvetica",
        "isBold": false,
        "isItalic": false
      },
      "comboBox": {
        "fillColor": "#DDE9FF",
        "borderColor": "#1460F3",
        "borderWidth": 2,
        "fontColor": "#000000",
        "fontSize": 20,
        "typeface": "Helvetica",
        "isBold": false,
        "isItalic": false
      },
      "pushButton": {
        "fillColor": "#DDE9FF",
        "borderColor": "#1460F3",
        "borderWidth": 2,
        "fontColor": "#000000",
        "fontSize": 20,
        "title": "Button",
        "typeface": "Helvetica",
        "isBold": false,
        "isItalic": false
      },
      "signaturesFields": {
        "fillColor": "#DDE9FF",
        "borderColor": "#000000",
        "borderWidth": 2
      }
    }
  },
  "readerViewConfig": {
    "linkHighlight": true,
    "formFieldHighlight": true,
    "displayMode": "singlePage",
    "continueMode": true,
    "verticalMode": true,
    "cropMode": false,
    "themes" : "light",
    "enableSliderBar": true,
    "enablePageIndicator": true,
    "pageSpacing": 10,
    "pageScale": 1.0,
    "pageSameWidth":true
  }
}