SpreadJS 14
Frequently Used Events / Use Events when Clipboard Changes
In This Topic
    Use Events when Clipboard Changes
    In This Topic

    You can use four types of Clipboard events, such as ClipboardChangedClipboardChangingClipboardPasted 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.

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

    Using Code

    This example uses the different Clipboard events.

    Javascript
    Copy Code
    <script>
        $(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");
            });
        });
    </script>
    

    Use-cases

    You can use the clipboard events in the following use-cases.

    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 in order 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 this topic.

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

    Javascript
    Copy Code
    <script>
        $(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;
                }
            });
        });
    </script>
    

    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 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 snippet depicts how you can prevent the copy of images within Spread worksheets by setting the 'cancel' parameter to true.

    Javascript
    Copy Code
    <script>
        $(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;
    
            spread.bind(GC.Spread.Sheets.Events.ClipboardPasting, (e, args) => {
                // This code prevent the internal floating element copy paste // This code prevent the outside image paste
                if ((args.objects && args.objects.length > 0) || (args.pasteData && args.pasteData.image)) {
                    //alert("test");
                    args.cancel = true;
                }
            });
        });
    </script>