Event handling

更新时间:
复制 MD 格式

You can use the ApiEvent event mechanism to listen to the interactive behavior of a document. This topic describes the mechanism and usage of event handling.

Overview

The software development kit (SDK) provides the ApiEvent mechanism. This lets you listen for interactive behavior in the document and run JavaScript code when an event is triggered. Events are categorized into public events and component events, such as Word events and Excel events. Public events can be used in all major components.

The JS-SDK event mechanism supports binding multiple callback functions to the same event, and unbinding functions from registered events.

Important
  • This feature is supported in SDK v1.1.14 and later versions. For earlier versions, you can use instance.on or instance.Application.Sub to register events.

  • Note on SDK event mechanism adjustment: instance.on and instance.Application.Sub will be deprecated in future versions. We recommend that you use the improved ApiEvent instead.

Usage

// Get the SDK instance object.
const instance = aliyun.config({
  url: 'The URL for online document preview',
})

await instance.ready()

const handle = (res) => console.log(res)

// Listen for the event.
instance.ApiEvent.AddApiEventListener('tabSwitch', handle)

// Cancel the listener.
instance.ApiEvent.RemoveApiEventListener('tabSwitch', handle)

The event mechanism in previous versions

The instance.on and instance.off methods are used to register public events. The instance.Application.Sub method is used to register events within components. You can use the on method of the SDK instance to listen for events and the off method to cancel the listener.

const handle = (res) => console.log(res)

// Listen for the event.
instance.on('tabSwitch', handle)

// Cancel the listener.
instance.on('tabSwitch', handle)

Listen to public events

The following table lists the public events.

Event name

Description

fileOpen

The document opens.

error

An error occurs.

tabSwitch

The tab switches.

fileStatus

The saving status of the file.

previewLimit

The limited page is reached in preview.

hasDocMap

The file has a table of contents or not.

fullscreenchange

Enters or exits the full screen mode.

webSocketStatus

Monitors the status of the WebSocket connection.

fileNameChange

The file is renamed.

filePasswordStatus

The password status of encrypted files.

ModelVisible

Occurs when the modal is opened or closed.

OnBroadcast

Global broadcast.

fileOpen

The callback of the fileOpen event.

Important

This event must be registered before instance.ready() is called.

Usage

instance.ApiEvent.AddApiEventListener("fileOpen", (data) => {
  console.log("fileOpen: ", data);
});

Success response

{
  duration: 812,
  fileInfo: {
    createTime: 1606461829,
    id: "94749723688",
    modifyTime: 1606461829,
    name: "userName",
    officeType: "s",
  },
  stageTime: 1614,
  success: true,
  time: 1614,
  ts: 1607858260164,
}

Failure response

{
  msg: "Fail",
  result: "Fail"
}

error

The callback of the error event.

Usage

instance.ApiEvent.AddApiEventListener("error", (data) => {
  console.log("error: ", data);
});

Response parameters

{
  reason: "Fail"
}

tabSwitch

The callback of tabSwitch event.

Usage

instance.ApiEvent.AddApiEventListener("tabSwitch", (data) => {
  console.log("tabSwitch: ", data);
});

Response parameters

// Take Excel as an example.
{
  tabKey: "InsertTab",
  tabKey: "StartTab",
  // For more statuses, see the specific tab.
}

fileStatus

This event callback is triggered to save a file.

Usage

instance.ApiEvent.AddApiEventListener("fileStatus", (data) => {
  console.log("fileStatus: ", data);
});

Response parameters

{
  status: 0, // The document is not updated.
  status: 1, // The version is saved. Scenarios: manual save, scheduled save, or closing the web page.
  status: 2, // Saving an empty file is not supported. Scenario: The file is empty after the kernel saves it.
  status: 3, // The storage space is full.
  status: 4, // Do not perform frequent operations during saving. Scenario: The server-side save queue is full and waiting.
  status: 5, // Failed to save.
  status: 6, // The file update is being saved. Scenario: Saving is triggered by modifying the document content.
  status: 7, // Saved successfully. Scenario: The document content modification is saved successfully.
}

previewLimit

The callback of the previewLimit event. The event is triggered when you scroll to the bottom of the limited page.

Important

This event is valid in page preview mode and supports only Word, PPT, and PDF components.

Usage

instance.ApiEvent.AddApiEventListener("previewLimit", (data) => {
  console.log("previewLimit: ", data);
});

Response parameters

// Word document
// Because Word documents use a flow layout, the exact number of pages cannot be obtained. Therefore, the callback has only the total parameter.
{
  total: 4; // The page limit.
}
// PPT and PDF
{
  total: 4; // The page limit.
  realTotal: 10; // The actual total number of pages.
}

hasDocMap

If the file has a table of contents, a callback is executed.

Important

This event supports only the Word component. The Word component obtains the table of contents using dynamic sharding. Therefore, you must listen to the hasDocMap event to determine whether the table of contents exists.

instance.ApiEvent.AddApiEventListener("hasDocMap", (data) => {
  console.log("hasDocMap: ", data);
});

fullscreenchange

A callback is executed when you enter or exit full screen.

If isBrowserViewFullscreen or isIframeViewFullscreen is configured in commonOptions, this listener has no effect.

Usage

instance.ApiEvent.AddApiEventListener("fullscreenchange", (data) => {
  console.log("fullscreenchange: ", data);
});

Response parameters

{
  status: 0, // Exit full-screen mode.
  status: 1, // Enter full-screen mode.
}

webSocketStatus

Listen to the connection status of the webSocket.

Usage

instance.ApiEvent.AddApiEventListener("webSocketStatus", (data) => {
  console.log("webSocketStatus: ", data);
});

Response parameters

{
  status: '_online', // Connected
  status: '_offline', // Offline
  status: '_close', // Connection closed
}

fileNameChange

The callback of the fileNameChange event. After the file is successfully renamed, the new file name is returned.

Usage

instance.ApiEvent.AddApiEventListener("fileNameChange", (data) => {
  console.log("fileNameChange: ", data);
});

Response parameters

{
  fileName: "NewName"
}

filePasswordStatus

Listen to the password status of encrypted files.

Important

This event must be registered before instance.ready() is called.

Usage

instance.ApiEvent.AddApiEventListener("filePasswordStatus", (data) => {
  console.log("filePasswordStatus: ", data);
});

Response parameters

{
  status: 'NeedPassword', // A password is required.
  status: 'InvalidPassword', // Incorrect password.
}

ModelVisible

This event is triggered when a modal box is opened or closed. For example, this event is triggered when you choose More > Print.

instance.ApiEvent.AddApiEventListener("ModelVisible", (data) => {
  console.log("ModelVisible: ", data);
});

OnBroadcast

Listen to global broadcasts for multi-user collaboration.

instance.ApiEvent.AddApiEventListener("OnBroadcast", (data) => {
  console.log("OnBroadcast: ", data);
});

Listening for text events

The following table lists the events of the Word component that can be listened to.

Event name

Description

CurrentPageChange

Listens for an event that is triggered when the current page number changes.

ClipboardCopy

You can listen for clipboard copy events.

DocMapPanelChange

Listen for the folder's show and hide events.

WindowScrollChange

Listen for the scroll event on the document, not the page.

WindowSelectionChange

You can listen for the selection change event.

FontMissing

The font is missing.

DocMapItemClick

You can listen for click events on folders in the outline.

ControlItemClick

The content control is clicked.

ContentChange

Listening for change events in document content

Example

instance.ApiEvent.AddApiEventListener("ClipboardCopy", (data) => {
  console.log("ClipboardCopy: ", data);
});

Listen for table events

The following table lists the events of the Excel component that can be listened to.

Event name

Description

Clipboard_Copy

Detects copy events on the clipboard.

Worksheet_Activate

The active worksheet changes.

Worksheet_SelectionChange

You can listen for the selection change event.

Worksheet_ScrollChange

Listen for the user's scroll behavior on the canvas.

Worksheet_ForceLandscape

A listener for notifications about forced landscape orientation.

Change

Listen for cell updates

Example

instance.ApiEvent.AddApiEventListener("Worksheet_Activate", (data) => {
  console.log("Worksheet_Activate: ", data);
});

Listen to the events of the PPT component

The following table lists the events of the PPT component that can be listened to.

Event name

Description

SlideShowBegin

Listens for when the slideshow enters full-screen playback.

SlideShowEnd

Monitors for exits from full-screen slideshow playback.

SlideShowOnNext

Wait for the next animation operation.

SlideShowOnPrevious

Listens for the previous animation operation.

SlideSelectionChanged

You can listen for the current page change event.

ActiveSlideChange

You can monitor page navigation.

VideoFullscreenInfo

An event listener for when a demo video enters or exits full-screen playback.

TriggerPlayEvent

The animation is triggered.

SlideMove

Monitor the PPT shift operation.

PresentationNewSlide

Listens for an operation to add a PPT.

SlideDelete

Listens for the delete operation on a PPT file.

SlidePlayerChange

You can monitor playback state changes.

SlideMediaChanged

Listens for changes to the video playback state.

SlideLaserPenInkPointsChanged

Listens for ink strokes drawn with the laser pointer.

SlideInkVisible

Controls whether the annotation is displayed.

SlideInkToolbarVisible

Indicates whether a laser pointer and annotations are used.

SlideChangeOperator

A notification is sent to the current user after the user adds, moves, or deletes a slide.

Example

instance.ApiEvent.AddApiEventListener("SlideShowBegin", (data) => {
  console.log("SlideShowBegin: ", data);
});

Listen to the events of the PDF component

The following table lists the events of the PDF component that can be listened to.

Event name

Description

CurrentPageChange

This event is triggered when the current page number changes.

Scroll

You can listen for scroll events.

ZoomUpdated

Listen for scaling events.

StartPlay

Listen for the playback start event.

EndPlay

You can listen for the exit playback event.

PicSelectionChange

The image selection changes.

TextSelectChange

The text selection changes.

Example

instance.ApiEvent.AddApiEventListener("CurrentPageChange", (data) => {
  console.log("CurrentPageChange: ", data);
});