Скопируйте все данные сетки wijmo в буфер обмена в angular 5

Я пытаюсь скопировать все данные из текущей сетки в буфер обмена одним нажатием кнопки, чтобы их можно было вставить в любое место назначения (excel, блокнот и т. д.).

Я попытался использовать класс wijmo.Clipboard, и у меня это не сработало.

 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);

  }

может ли кто-нибудь помочь мне в том, как это сделать.


angular grid wijmo clipboard wijmo5
person Amit Kumar    schedule 06.08.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Ваш код выглядит хорошо для меня. У меня есть что-то подобное в этой скрипке:

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();
  })

Одно предостережение заключается в том, что execCommand('copy') работает только в том случае, если метод был вызван действием пользователя, например нажатием кнопки. Для получения более подробной информации см.:

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

person Bernardo    schedule 08.08.2018
comment
Я попробовал ваше решение, я получил ошибку, так как ожидалось положительное число, потому что выбор отсутствовал. Не знаю, как это работает для вас. - person Amit Kumar; 09.08.2018
comment
Подскажите, пожалуйста, какой файл нужно импортировать для wijmo.grid.FlexGrid. У меня выдает ошибку. Использование углового 4 - person Amit Kumar; 09.08.2018
comment
@AmitKumar, сетку можно импортировать вот так import * as wjGrid from 'wijmo/wijmo.grid'; в приложение Angular4, а wijmo.grid следует заменить на wjGrid. - person Manish Gupta; 14.08.2018
comment
@AmitKumar, для PoistiveNumber строка кода rng = new wijmo.grid.CellRange(0, 0, g.rows.length - 1, g.columns.length - 1) может быть причиной проблемы, если FlexGrid имеет 0 строк или столбцов. Любой пример и фрагмент кода будут полезны для решения проблемы. - person Manish Gupta; 14.08.2018