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.
This feature is supported in SDK v1.1.14 and later versions. For earlier versions, you can use
instance.onorinstance.Application.Subto register events.Note on SDK event mechanism adjustment:
instance.onandinstance.Application.Subwill be deprecated in future versions. We recommend that you use the improvedApiEventinstead.
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.
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.
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.
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.
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);
});