如何使用 javascript(Microsoft Edge 浏览器)将 table html(数据和格式)复制到剪贴板

How to copy table html (data and format) to clipboard using javascript (microsoft edge browser)

问题: 我已将 html table 的复制数据和格式的代码附加到剪贴板中,如下所示。此代码在 chrome 上按我预期的方式工作,但在 Microsoft Edge 上不起作用。我试过了,但找不到任何好方法让我的代码在边缘上工作,就像 chrome 一样。这些情况有什么解决办法吗?

附加信息:

Chrome版本:78.0.3904.108

Edge 版本:Microsoft Edge 44.17763.831.0 --- Microsoft EdgeHTML 18.17763

此驱动器 link 包含我的 chrome 和边缘浏览器代码的结果(粘贴到文本、word 和 excel 文件): https://drive.google.com/open?id=155DWin26afHumem0tYircVsNojKPEl5M

代码https://jsfiddle.net/bj13nu9s/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table id="table">
    <thead>
        <tr>
            <th>From</th>
            <th>To </th>
            <th>School</th>
            <th>Class</th>
            <th>Student Name</th>
            <th>Student Code</th>
        </tr>
    </thead>
    <tbody class="scroll-content">
        <tr>
            <td>2011/02/18</td>
            <td>2011/02/19</td>
            <td>Diet University</td>
            <td>Classical Medley</td>
            <td>John Wick</td>
            <td>305179</td>
        </tr>
        <tr>
            <td>2011/02/18</td>
            <td>2011/02/19</td>
            <td>Diet University</td>
            <td>Classical Medley</td>
            <td>John Wick</td>
            <td>305179</td>
        </tr>
        <tr>
            <td>2012/03/20</td>
            <td>2015/03/20</td>
            <td>Universal University</td>
            <td>Memento Guitar</td>
            <td>Daniel Johnson</td>
            <td>60708090</td>
        </tr>
        <tr>
            <td>2013/02/18</td>
            <td>2018/02/19</td>
            <td>Kurikuri University</td>
            <td>Magic Chaos</td>
            <td>Yugi Muto</td>
            <td>12356789</td>
        </tr>
        <tr>
            <td>2016/01/02</td>
            <td>2019/02/19</td>
            <td>Destroyer University</td>
            <td>...</td>
            <td>Santa Monica</td>
            <td>64562107</td>
        </tr>
    </tbody>
</table>
<button type="button" id="copy_btn" onclick="selectElementContents( document.getElementById('table') );">Copy Table</button>
</body>
</html>
<script type="text/javascript">
    function selectElementContents(el) {
        let body = document.body, range, sel;
        if (document.createRange && window.getSelection) {
            range = document.createRange();
            sel = window.getSelection();
            sel.removeAllRanges();
            try {
                range.selectNodeContents(el);
                sel.addRange(range);
            } catch (e) {
                range.selectNode(el);
                sel.addRange(range);
            }
        } else if (body.createTextRange) {
            range = body.createTextRange();
            range.moveToElementText(el);
            range.select();
        }
        document.execCommand("Copy");}

</script>

我尝试测试这个问题,我发现我可以产生这个问题。

如果您在 Word 和 Excel 中的粘贴设置设置为 仅保留文本,那么您会看到 table 未格式化。

通常当您使用 CTRL + V 粘贴时,它会使用 仅保留文本 格式。我建议您使用 鼠标右键单击 -> 粘贴(保持源格式) 选项来粘贴 table。

记事本没有任何格式化选项,因此我们无法为记事本修复此问题。看起来这是 MS Edge 浏览器的设计。

对于其他解决方法,您可以尝试使用 MS Edge (Chromium) 浏览器测试问题。粘贴 table 将保留记事本、Word 和 Excel 中的格式。