当用户从网页复制网格并将其粘贴到记事本时复制网格线

Question

用户希望在从网页复制时将网格线与网格数据一起复制。这可能吗？

目前复制的结果是这样的：

name subject
lolo math
fofo history

我想要的是：

  |  name | subject |
   ---------------
  |  lolo | math    |
   ---------------
  |  fofo | history |

我用谷歌搜索，但找不到好的解决方案，而且我对前端技巧没有经验。

Answer 1

您需要为您的 table 创建一个 copy 事件：

//Here we assume that your table has an id and it is stored in myTable
document.getElementById(myTable).addEventListener('copy', function(e){
    e.preventDefault();
    e.clipboardData.setData("Text", parseClipboard(e.clipboardData.getData("Text")));
});

在上面的示例中，假定 parseClipboard 处理剪贴板中的文本并按您的意愿进行转换。您希望 split 以换行符作为分隔符的文本，添加您的 |每个项目（行）的行首和行尾的字符，然后 join 它们带有换行符----------------换行符

Answer 2

你可以这样做：

function changeCopiedText(event) {
    event.preventDefault();

    // get original text from selection
    var originaltext =  window.getSelection();

    // call your function to add the lines to the original text
    var textwithlines = addTableLines(originaltext);

    // add the new text to the clipboard
    if (window.clipboardData) {
        window.clipboardData.setData('Text', textwithlines);
    }
}

// capture the copy event
document.addEventListener('copy', changeCopiedText);

但您将不得不根据自己的需要考虑在 addTableLines 中添加这些行的最佳方式。

Answer 3

我的解决方案是将上述解决方案混合使用 Clipboard.js 并解析复制的文本：

  new Clipboard('.clipboard-btn', {
    text: function (trigger) {
      var originaltext = $(trigger).next('table').closest("#my-tbl").text();
      return addTableLines(originaltext);
    }
  });

我还在写 addTableLines 因为 split 没有检测到新行。

当用户从网页复制网格并将其粘贴到记事本时复制网格线

Copy grid lines when user copies the grid from webpage and paste it into notepad

html

css

grid

markup