IBrowseViewer

This interface that defines a thumbnail object and this object will be created automatically as soon as an EditViewer instance is created.

Code Snippet

const editViewer = new Dynamsoft.DDV.EditViewer({
    container: document.getElementById("viewer"),
});

// An IBrowseViewer object will be created at meanwhile which represents the thumbnail object in edit viewer.
const thumbnailObj = editViewer.thumbnail; 

Members

Events

Please refer to BrowseViewer-Events.

getStyle()

Get the style object of BrowseViewer.

Syntax

getStyle(browseViewerStyleName: BrowseViewerStyleName): BrowseViewerStyle | null;

Parameters

browseViewerStyleName: A BrowseViewerStyleName can be one of eight types.

type BrowseViewerStyleName = "canvasStyle" | "pageStyle" | "selectedPageStyle" | "currentPageStyle" | "hoveredPageStyle" | "placeholderStyle" | "pageNumberStyle" | "checkboxStyle";

Return values

The style object. Please refer to Style Interfaces.

Code Snippet

// Get pageStyle object;
const pageStyle = thumbnailObj.getStyle("pageStyle");

Warning

updateStyle()

Update the style object of BrowseViewer.

Syntax

updateStyle(browseViewerStyleName: BrowseViewerStyleName, browseViewerStyle: BrowseViewerStyle): boolean;

Parameters

browseViewerStyleName: A BrowseViewerStyleName can be one of eight types.

type BrowseViewerStyleName = "canvasStyle" | "pageStyle" | "selectedPageStyle" | "currentPageStyle" | "hoveredPageStyle" | "placeholderStyle" | "pageNumberStyle" | "checkboxStyle";

browseViewerStyle: The style object. Please refer to Style Interfaces.

Return Value

true: Successfully.

false: Failed.

Code Snippet

• First method

    // Get style object
    const pageStyle = thumbnailObj.getStyle("pageStyle");
  
    // Modify the style object
    pageStyle.background = "red";
    pageStyle.border = "1px solid green";
  
    // Update page style
    thumbnailObj.updateStyle("pageStyle", pageStyle);
  

• Second method

    // Update the style object directly
    thumbnailObj.updateStyle("pageStyle", {
        background: "red",
        border: "1px solid green",
    });
  

Warning

Remark

• The updates are independent of whether the viewer is displayed and are updated in real time.

getUiConfig()

Get current UiConfig object.

Syntax

getUiConfig(): UiConfig;

Return Value

The UiConfig object.

Code Snippet

const viewerUi = thumbnailObj.getUiConfig();

updateUiConfig()

Update UiConfig object.

Syntax

updateUiConfig(uiConfig: UiConfig): boolean;

Parameters

uiConfig: The UiConfig to update.

Return Value

true: Successfully.

false: Failed.

Warning

Remark

• The updates are independent of whether the viewer is displayed and are updated in real time.

show()

Show the viewer.

Syntax

show(): void;

Code Snippet

thumbnailObj.show();

hide()

Hide the viewer.

Syntax

hide(): void;

Code Snippet

thumbnailObj.hide();

isVisible

Return whether the viewer is shown or hidden.

Syntax

readonly isVisible: boolean;

Remark

• If visibility is not specified in thumbnailConfig while creating the viewer additionally, its default value is false.

multiselectMode

Specify or return whether to allow multiple pages to be selected at once.

Syntax

multiselectMode: boolean; 

Example

thumbnailObj.multiselectMode = true;

Warning

Remark

• If it is not specified in thumbnailConfig while creating the viewer additionally, its default value is false.

getSelectedPageIndices()

Get indices of selected pages.

Syntax

getSelectedPageIndices(): number[];

Return Value

The array of the selected pages’ indices.

Example

const selPages = thumbnailObj.getSelectedPageIndices();

Warning

Remark

• If no page is selected in the viewer, returns [].
• The order of the returned array elements is based on the order in which the pages are selected. For example, if select the pages with the index 6, 5, 2 in order, the returned array will be [6,5,2].

selectPages()

Select pages by specified indices.

Syntax

selectPages(indices: number[]): string[];

Parameters

indices: Specify the indices of the pages to be selected. If set to an empty array [], no pages will be selected.

Return Value

The array of selected pages’ uids.

Example

// Select the first and second pages.
thumbnailObj.selectPages([0,1]);

Warning

selectAllPages()

Select all pages.

Syntax

selectAllPages(): string[];

Return Value

The array of selected pages’ uids.

Example

thumbnailObj.selectAllPages();

Warning

setRowAndColumn()

Set rows and columns of displayed pages.

Syntax

setRowAndColumn(
    rows: number, 
    columns: number 
): boolean;

Parameters

rows: The number of rows. The maximum value is 20.

columns: The number of columns. The maximum value is 20.

Return Value

true: Successfully.

false: Failed.

Example

thumbnailObj.setRowAndColumn(5,8); // Display the page in five rows and eight columns.

Warning

Remark

• If it is not specified in thumbnailConfig while creating the edit viewer additionally, its default rows is 4(3) and columns is 1(2) in desktop(mobile).