Skip to content

自定义UI

在版本 1.12.0 中,我们扩展了在 configuration.json 中定义的选项。当使用 NativeModules.OpenPDFModule.openPDFByConfiguration 方法打开 PDF 视图时,您可以定义 JSON 内容以满足产品需求。我们将继续丰富配置选项,以进一步提高产品的灵活性。以下是一些常用配置选项的示例:

以下仅显示示例的关键部分。在使用时,请传入完整的 JSON 内容。

  1. 设置初始显示模式和可用模式列表。 以下代码为仅启用查看器模式和注释模式示例:
json
{
  "modeConfig": {
    "initialViewMode": "viewer",
    "availableViewModes": [
      "viewer",
      "annotations"
    ]
  },
  ... // 其他选项
}
  1. 设置启用的注释类型和默认注释属性值的列表。 例如,仅启用高亮注释并设置高亮注释的颜色和透明度:
json
{
  "annotationsConfig": {
    "availableTypes": [
      "note"
    ],
    "availableTools": [
      "setting",
      "undo",
      "redo"
    ],
    "initAttribute": {
      "note": {
        "color": "#1460F3",
        "alpha": 255
      }
    }
  }
  ... // 其他选项
}
  1. 设置显示模式和翻页方向:
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
  }
}