[]
        
(Showing Draft Content)

Clipboard Events

SpreadJS provides four Clipboard events that allow you to intercept and customize copy, cut, and paste behavior.

These events can be used to:

  • Validate or block paste operations

  • Restrict specific object types (such as images or shapes)

  • Detect cut operations

  • Access source sheet and range information

  • Integrate Excel copy‑paste workflows

Clipboard Lifecycle

Clipboard operations follow a consistent lifecycle pattern:

Stage

Event

Cancelable

Before copy or cut

ClipboardChanging

Yes

After copy or cut

ClipboardChanged

No

Before paste

ClipboardPasting

Yes

After paste

ClipboardPasted

No

Use:

  • ClipboardChanging — to inspect or modify copy/cut behavior

  • ClipboardPasting — to validate, filter, or block paste operations

  • ClipboardChanged — to track completed copy operations

  • ClipboardPasted  — to react after data is inserted

Cancelable events expose a cancel property in the event arguments.

Supported Clipboard Content

Clipboard events support:

  • Cell values and formatting

  • Formulas

  • Pictures

  • Charts

  • Shapes

  • Slicers

  • Custom floating objects

Copy‑paste operations are supported:

  • From Excel to SpreadJS

  • Within a worksheet

  • Between worksheets

Currently, cut or copy operations from SpreadJS to Excel are not supported.

Basic Clipboard Event Binding

The following example demonstrates how to bind all four Clipboard events.

// Initialize Spread
var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });

// Enable Excel-style copy/paste
spread.options.allowCopyPasteExcelStyle = true;

// Bind Clipboard events
spread.bind(GC.Spread.Sheets.Events.ClipboardChanged, function () {
    console.log("ClipboardChanged.");
});

spread.bind(GC.Spread.Sheets.Events.ClipboardChanging, function () {
    console.log("ClipboardChanging");
});

spread.bind(GC.Spread.Sheets.Events.ClipboardPasted, function () {
    console.log("ClipboardPasted");
});

spread.bind(GC.Spread.Sheets.Events.ClipboardPasting, function () {
    console.log("ClipboardPasting");
});

Intercepting Excel to SpreadJS Paste

This scenario demonstrates how to prevent specific object types (such as images) from being pasted from Excel into SpreadJS.

To enable copying objects from Excel (images, charts, shapes), set:

spread.options.allowCopyPasteExcelStyle = true;

You can cancel paste operations by setting args.cancel = true in the ClipboardPasting event.

The following example prevents images from being pasted

var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });
var activeSheet = spread.getActiveSheet();

spread.options.allowCopyPasteExcelStyle = true;

activeSheet.pictures.add("f2", "Capture.PNG", 100, 60, 200, 100);

spread.bind(GC.Spread.Sheets.Events.ClipboardPasting, (e, args) => {
    if (args.pasteData && args.pasteData.image) {
        args.cancel = true;
    }
});

For more information about copying Excel objects to SpreadJS, refer to the related Excel integration topic.

Intercepting Internal Copy and Paste Operations

Clipboard events can also be used to control copy and paste behavior within SpreadJS or between worksheets.

The objects parameter provides access to copied floating objects such as:

  • Pictures

  • Custom floating objects

  • Slicers

  • Charts

  • Shapes

The action parameter indicates whether the operation is copy or cut using the GC.Spread.Sheets.ClipboardActionType enumeration.

The following example:

  • Prevents floating objects from being pasted when copied from a specific worksheet

  • Prompts the user before allowing a cut operation

var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 2 });
var activeSheet = spread.getActiveSheet();

spread.options.allowCopyPasteExcelStyle = true;

spread.getSheet(0).pictures.add(
    "f5",
    "https://cdn.pixabay.com/photo/2015/10/01/17/17/car-967387__480.png",
    2,
    2,
    200,
    200
);

spread.bind(GC.Spread.Sheets.Events.ClipboardPasting, (e, args) => {

    // Prevent internal floating object copy/paste from Sheet1
    if (args.objects && args.objects.length > 0 &&
        args.fromSheet && args.fromSheet.name() === "Sheet1") {
        args.cancel = true;
    }

    // Confirm cut operations
    else if (args.action === GC.Spread.Sheets.ClipboardActionType.cut) {
        if (!confirm("You are performing a Cut operation.\nGo ahead?")) {
            args.cancel = true;
        }
    }
});