将Wijmo网格的全部数据复制到Angular 5中的剪贴板

Question

I am trying to copy entire data from current grid to clipboard on a button click, so it can be pasted to any destination (excel, notepad, etc.)

I tried using wijmo.Clipboard class and it didn't work out for me.

 import * as wjcCore from 'wijmo/wijmo';

 @ViewChild('grid') grid: GridComponent; 

copysGrid() {

    let hdr = '';

    for (let c = 1; c < this.grid.columns.length; c++) {
      hdr += '\t';
      hdr += this.grid.columns[c].header;
    }

    let cellRange = new CellRange(-1, -1, -1, -1);
    this.grid.select(cellRange);

    cellRange = new CellRange(1, 1, this.grid.rows.length - 1, this.grid.columns.length - 1);

    const gridData = this.grid.getClipString(cellRange);
    const a = hdr + '\r\n' + gridData;

    //  wjcCore.Clipboard.copy(a);

    const selBox = document.createElement('textarea');
    selBox.style.position = 'fixed';
    selBox.style.left = '0';
    selBox.style.top = '0';
    selBox.style.opacity = '0';
    selBox.value = a;
    document.body.appendChild(selBox);
    selBox.focus();
    selBox.select();
    document.execCommand('copy');
    document.body.removeChild(selBox);

  }

can anyone help me on how to do this.

Answer 1

Your code looks fine to me. I have something similar in this fiddle:

https://jsfiddle.net/Wijmo5/4pxLtk0o/

  document.getElementById('btnCopyAll').addEventListener('click', function(e) {

    // get clip string from the grid (all grid data)
    var g = theGrid,
        rng = new wijmo.grid.CellRange(0, 0, g.rows.length - 1, g.columns.length - 1),
        clipString = g.getClipString(rng);

    // add headers
    var hdr = '';
    for (var c = rng.leftCol; c <= rng.rightCol; c++) {
      if (hdr) hdr += '\t';
      hdr += g.columns[c].header;
    }
    clipString = hdr + '\n' + clipString;

    // copy it to the clipboard using a temporary textarea element
    var input = document.createElement('textarea');
    document.body.appendChild(input);
    input.value = clipString;
    input.select();
    document.execCommand('copy');
    document.body.removeChild(input);
    alert('The data has been copied to the clipboard.');

    // return focus to the button
    e.target.focus();
  })

One caveat is that the execCommand('copy') only works if the method was called by a user action like clicking a button. For more details please refer to:

https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Interact_with_the_clipboard