Guides

ViewMode

When you open a document using ComPDFKit.openDocument(), you can set the default display mode according to your product's needs. For example, the default Viewer Mode allows viewing PDF documents and filling out forms but does not allow editing annotations, text, etc.

Setting the Default Mode

The following example demonstrates how to set Annotation Mode as the default display mode. In Annotation Mode, users can add, delete, and modify annotations.

// ComPDFKit.openDocument Sample
var config = ComPDFKit.getDefaultConfig({
  modeConfig : {
    initialViewMode: CPDFViewMode.ANNOTATIONS
  }
})
ComPDFKit.openDocument(samplePDF, '', config)

// CPDFReaderView Sample
<CPDFReaderView
    ref={pdfReaderRef}
    document={samplePDF}
    saveDocument={saveDocument}
    configuration={config}/>

The results are as follows:

Android	iOS

Setting the Mode List

You can switch modes by clicking the top title. Depending on your needs, you can configure the required modes and their display order in CPDFConfiguration. The following example shows how to configure only Viewer Mode and Annotation Mode:

// ComPDFKit.openDocument Sample
var config = ComPDFKit.getDefaultConfig({
  modeConfig : {
    availableViewModes: [
      CPDFViewMode.VIEWER,
      CPDFViewMode.ANNOTATIONS
    ]
  }
})
ComPDFKit.openDocument(samplePDF, '', config)

// CPDFReaderView Sample
<CPDFReaderView
    ref={pdfReaderRef}
    document={samplePDF}
    saveDocument={saveDocument}
    configuration={config}/>

The results are as follows:

Android	iOS

Switching View Modes:

When using the CPDFReaderView to display a PDF, you can programmatically switch the current view mode using the provided API.

// Switch to annotation mode
await pdfReaderRef.current?.setPreviewMode(CPDFViewMode.VIEWER);

// Get the current view mode
const mode = await pdfReaderRef.current?.getPreviewMode();