Programatically trigger paste event (ctrl+v)

Programatically trigger paste event (ctrl+v)

Posted by: apurushotaman on 6 December 2019, 4:03 am EST

• 

  apurushotaman

  • Post Options:
  • Link
    Copy

  Posted 6 December 2019, 4:03 am EST

  Hello,

  I am trying to achieve the same results as ctrl+v but upon clicking a button.

  Things I have tried so far:
  
  on the click event

   spread.commandManager().execute({
                              cmd: "clipboardPaste",
                              sheetName: spread.getActiveSheet().name(),
                              isCutting: false,
                              clipboardText: "",
                              pasteOption: GC.Spread.Sheets.ClipboardPasteOptions.all
                          });
  

  This does not seem to work.
  
  Please help.

• 

  apurushotaman

  • Post Options:
  • Link
    Copy

  Posted 6 December 2019, 4:20 am EST

  I also tried this

  
  var e = jQuery.Event("keydown");
  e.which = 86;       // # v code value
  e.ctrlkey = true;     // control key pressed
  $(document).trigger(e);// trigger event on document
  
  

  but it doesn’t seem to paste clipboard data into the spreadsheet

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 8 December 2019, 9:27 pm EST

  Hi Ashwin,

  Due to the security reasons, Browsers, do not allow the webapps to access the clipboard until the user explicitly triggers the paste event by pressing ctrl + v or by using the system context menu, hence Spread cannot read the clipboard data on button click. Currently, a new CLipboard API is being developed that you use but as of now, it is not supported by all the major browsers. You may read more about the new Clipboard API here: https://developers.google.com/web/updates/2018/03/clipboardapi

  Regards
  
  Sharad

• 

  adisa.craig

  • Post Options:
  • Link
    Copy

  Posted 8 June 2022, 6:28 am EST

  Hi Sharad,
  
  As the Clipboard API has been adopted by most major browsers. I am currently able to get the copied text via the below code

  
  navigator.clipboard.readText().then((copiedText) => {
                          // Do something with copied text
                          console.log('copied text', copiedText);
                          
                      });
  
  

  Is there a way to add this content to the SpreadJS internal clipboard so that when the following code is run, it pastes the content that I’ve obtained above instead of being blank

  
  spread.commandManager().execute({ cmd: "paste", sheetName: sheet.name() });
  
  

• 

  avinash.pathak

  

  • Post Options:
  • Link
    Copy

  Posted 9 June 2022, 3:29 pm EST

  Hi,

  For this, you need to override the clipboard paste command. Please refer to the following code snippet and let me know if you face any issues.

  
    let old = GC.Spread.Sheets.Commands.clipboardPaste.execute;
    GC.Spread.Sheets.Commands.clipboardPaste.execute = function (
      spread,
      option,
      isUndo
    ) {
      console.log(option);
      /*option.clipboardText = some text
      option.clipboardHtml = HTML
      
      */
  
      old.apply(this, arguments);
    };
  }
  
  
  

  clipboardPaste: https://www.grapecity.com/spreadjs/docs/latest/online/SpreadJS~GC.Spread.Sheets.Commands.clipboardPaste.html?highlight=clipboardpaste%2C
  
  Regards,
  
  Avinash

• 

  adisa.craig

  • Post Options:
  • Link
    Copy

  Posted 14 June 2022, 4:09 am EST

  Thanks for the response Avinash, but I tried with the above override, but the content that gets added to clipboardText option still does not get pasted when the paste event is triggered.
  
  Can you set up a demo with the above code working pls

• 

  avinash.pathak

  

  • Post Options:
  • Link
    Copy

  Posted 14 June 2022, 6:11 pm EST

  Hi,

  We are sorry but on further investigation, we found that the writing internal clipboard in spreadJS is not supported. For this, you need to implement your own paste command and replace it with internaClipboardPaste. Please refer to the following code snippet and attached sample that explains the same.

  
  var pasteCommand = {
      canUndo: true,
      execute: function (spread, options, isUndo) {
        var Commands = GC.Spread.Sheets.Commands;
        if (isUndo) {
          Commands.undoTransaction(spread, options);
          return true;
        } else {
          Commands.startTransaction(spread, options);
          spread.suspendPaint();
          let sheet = spread.getActiveSheet();
          let clipboardtext = "Text\nText2\tText3";
          var toRanges = [
            new GC.Spread.Sheets.Range(
              sheet.getActiveRowIndex(),
              sheet.getActiveColumnIndex(),
              clipboardtext.split("\n").length,
              clipboardtext.split("\t").length
            )
          ];
          spread.commandManager().execute({
            cmd: "clipboardPaste",
            sheetName: "Sheet1",
            fromSheet: spread.getActiveSheet(),
            pastedRanges: toRanges,
            isCutting: false,
            clipboardText: clipboardtext,
            pasteOption: GC.Spread.Sheets.ClipboardPasteOptions.all
          });
          spread.resumePaint();
          Commands.endTransaction(spread, options);
          return true;
        }
      }
    };
    spread.commandManager().register("myPaste", pasteCommand, 86, true);
  
  

  sample: https://codesandbox.io/s/spread-js-starter-forked-mgq5nr?file=/src/index.js:535-1738

  regards,
  
  Avinash