[]
DEMOS DOC DESIGNER API
DOWNLOAD
(Showing Draft Content)

Use Events when Clipboard Changes

You can use four types of Clipboard events, such as ClipboardChanged, ClipboardChanging, ClipboardPasted, and ClipboardPasting events. The ClipboardChanged and ClipboardChanging events occur when a clipboard change happens and when a clipboard is changing, respectively. Likewise, the ClipboardPasted and ClipboardPasting events occur when the user pastes from the clipboard and when the user is pasting, respectively. With these Clipboard events, users can perform copy-paste operations for text, cell data, pictures, charts, shapes, slicers, and custom floating objects from Excel to Spread worksheets, as well as within and between the worksheets.


You can also access values such as source sheet and range information as well as whether the cut operation is being performed when performing clipboard copy-paste operation.


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


The following code sample shows how to use the different Clipboard events.

$(document).ready(function () {
    // Initializing Spread
    var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });
    // Get the activesheet
    var activeSheet = spread.getActiveSheet();

    // set allowCopyPasteExcelStyle to true
    spread.options.allowCopyPasteExcelStyle = true;

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

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

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

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

Copying Pasting from Excel to SpreadJS

Suppose you have multiple objects such as images, charts, and shapes in Excel and you want to copy and paste all objects except images to SpreadJS. For this, the cancel parameter in the ClipboardPasting event is set to true.


Note that to copy-paste objects such as images, charts, and shapes from Excel to Spread Worksheets, you need to set the allowCopyPasteExcelStyle property to true. To know more about copying Excel objects to Spread, refer to this topic.


The following code sample shows how you can prevent the copy of images from Excel to Spread.

$(document).ready(function () {
    // Initializing Spread
    var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });
    // Get the activesheet
    var activeSheet = spread.getActiveSheet();

    // Set allowCopyPasteExcelStyle to true
    spread.options.allowCopyPasteExcelStyle = true;

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

    // This code prevents the copy of images from Excel to SpreadJS
    spread.bind(GC.Spread.Sheets.Events.ClipboardPasting, (e, args) => {
        if ((args.pasteData && args.pasteData.image)) {
            args.cancel = true;
        }
    });
});

Copying Pasting within SpreadJS Worksheets

Suppose you have multiple objects such as images, charts, and shapes in SpreadJS and you want to copy-paste all floating objects except images from a specific worksheet within SpreadJS. The 'objects' parameter in the Clipboard events can be used to copy-paste text, cell data, pictures, custom floating objects, slicers, charts, and shapes.


The following code sample shows how you can prevent the copy of images from a specific worksheet (using the fromSheet parameter) and warn users of accidental cut operations (using the enumeration GC.Spread.Sheet.ClipboardActionType, which indicates the type of the current action) by setting the cancel parameter to true.

// Configure Workbook and Worksheet
var spread = new GC.Spread.Sheets.Workbook("ss", { sheetCount: 2 });
var activeSheet = spread.getActiveSheet();

// Set allowCopyPasteExcelStyle to true
spread.options.allowCopyPasteExcelStyle = true;

// Add picture
// activeSheet.pictures.add("f2", "Capture.PNG", 100, 60, 200, 100);
ss.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) => {
    // This code prevent the internal floating element copy paste
    if (args.objects && args.objects.length > 0 && args.fromSheet.name() == "Sheet1") {
        args.cancel = true;
    }
    // This code prevents accidental cut operations
    else if (args.action == GC.Spread.Sheets.ClipboardActionType.cut) {
        if (confirm("You are performing a Cut operation.\nGo ahead?") == true) {
text = "You pressed OK!";
        } else {
text = "You canceled!";
args.cancel = true;
        }
    }
});