自定义UI
在版本 1.12.0 中,我们扩展了在 configuration.json 中定义的选项。当使用 NativeModules.OpenPDFModule.openPDFByConfiguration
方法打开 PDF 视图时,您可以定义 JSON 内容以满足产品需求。我们将继续丰富配置选项,以进一步提高产品的灵活性。以下是一些常用配置选项的示例:
以下仅显示示例的关键部分。在使用时,请传入完整的 JSON 内容。
- 设置初始显示模式和可用模式列表。 以下代码为仅启用查看器模式和注释模式示例:
json
{
"modeConfig": {
"initialViewMode": "viewer",
"availableViewModes": [
"viewer",
"annotations"
]
},
... // 其他选项
}
- 设置启用的注释类型和默认注释属性值的列表。 例如,仅启用高亮注释并设置高亮注释的颜色和透明度:
json
{
"annotationsConfig": {
"availableTypes": [
"note"
],
"availableTools": [
"setting",
"undo",
"redo"
],
"initAttribute": {
"note": {
"color": "#1460F3",
"alpha": 255
}
}
}
... // 其他选项
}
- 设置显示模式和翻页方向:
json
{
"readerViewConfig": {
"displayMode": "doublePage",
"verticalMode": false
}
... // 其他选项
}
以下是完整的配置内容及数据描述:
json
{
"modeConfig": {
"initialViewMode": "viewer", // 在初始化显示模式时,请确保所选模式存在于 availableViewModes 中。否则,它将默认为查看器模式。请参考 availableViewModes 字段获取有效的值。
"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",
"pencil", // pencil功能仅iOS平台可用
"circle",
"square",
"arrow",
"line",
"freetext",
"signature",
"stamp",
"pictures",
"link",
"sound"
],
"availableTools": [ // 底部注释功能启用的注释工具
"setting",
"undo",
"redo"
],
"initAttribute": { // 初始化时注释的默认属性,影响添加注释时的属性,如颜色、透明度等。
"note": {
"color": "#1460F3",
"alpha": 255 // 颜色透明度 0~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", // 边框线样式: 实线:solid, 虚线:dashed
"dashGap": 0.0 // 虚线间隔长度,仅在style设置为 'dashed' 时适用。
}
},
"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", // 起始箭头样式: none, openArrow, closedArrow, square, circle, diamond.
"tailLineType": "openArrow" // 尾部箭头样式选项
},
"freeText": {
"fontColor": "#000000",
"fontColorAlpha": 255,
"fontSize": 30,
"isBold": false,
"isItalic": false,
"alignment": "left", // left, center, right
"typeface": "Helvetica" // 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", // Courier, Helvetica, Times-Roman
"alignment": "left" // left, center, right
}
}
},
"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", // left, center, right
"multiline": true,
"typeface": "Helvetica" // Courier, Helvetica, Times-Roman
},
"checkBox": {
"fillColor": "#DDE9FF",
"borderColor": "#1460F3",
"borderWidth": 2,
"checkedColor": "#43474D",
"isChecked": false,
"checkedStyle": "check" // check, circle, cross, diamond, square, star
},
"radioButton": {
"fillColor": "#DDE9FF",
"borderColor": "#1460F3",
"borderWidth": 2,
"checkedColor": "#43474D",
"isChecked": false,
"checkedStyle": "circle" // check, circle, cross, diamond, square, star
},
"listBox": {
"fillColor": "#DDE9FF",
"borderColor": "#1460F3",
"borderWidth": 2,
"fontColor": "#000000",
"fontSize": 20,
"typeface": "Helvetica", // Courier, Helvetica, Times-Roman
"isBold": false,
"isItalic": false
},
"comboBox": {
"fillColor": "#DDE9FF",
"borderColor": "#1460F3",
"borderWidth": 2,
"fontColor": "#000000",
"fontSize": 20,
"typeface": "Helvetica", // Courier, Helvetica, Times-Roman
"isBold": false,
"isItalic": false
},
"pushButton": {
"fillColor": "#DDE9FF",
"borderColor": "#1460F3",
"borderWidth": 2,
"fontColor": "#000000",
"fontSize": 20,
"title": "Button",
"typeface": "Helvetica", // Courier, Helvetica, Times-Roman
"isBold": false,
"isItalic": false
},
"signaturesFields": {
"fillColor": "#DDE9FF",
"borderColor": "#000000",
"borderWidth": 2
}
}
},
"readerViewConfig": {
"linkHighlight": true,
"formFieldHighlight": true,
"displayMode": "singlePage", // 单页:singlePage, 双页:doublePage, 封面模式:coverPage
"continueMode": true,
"verticalMode": true,
"cropMode": false,
"themes" : "light", // 亮色:light, 暗色:dark, 褐色:sepia, 护眼色:reseda
"enableSliderBar": true,
"enablePageIndicator": true,
"pageSpacing": 10,
"pageScale": 1.0
}
}