javascript - 带边框的复制表格在 Firefox 中不起作用

Question

我正在尝试使用document.execCommand. 复制有效，但是当我粘贴到电子邮件客户端时，边框和背景颜色丢失。仅当我从 Firefox 复制它时才会发生这种情况；铬工作正常。

关于如何在没有外部插件且不对现有表使用内联样式的情况下为 Firefox 解决此问题的任何想法？

function selectElementContents() {
  var el = document.getElementById('div1');
  // Copy textarea, pre, div, etc.
  var range = document.createRange();
  range.selectNodeContents(el);
  var sel = window.getSelection();
  sel.removeAllRanges();
  sel.addRange(range);
  try {
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Copy command was ' + msg);
  } catch (err) {
    console.log('Oops, unable to copy');
  }

} // end function selectElementContents(el)

.table {
  background-color: #faa835;
  border: 2px solid black;
  border-collapse: collapse;
}

.table th {
  border: 2px solid black
}

.table td {
  border: 2px solid black
}

<button id="copy" onclick="selectElementContents()">Copy</button>
<div id="div1">
  <table class="table">
    <tr>
      <th>Not working table</th>
      <th>1</th>
      <th>2</th>
      <th>3</th>
      <th>4</th>
    </tr>
    <tr>
      <td>Not working table</td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
  </table>
</div>

在 CodePen 上查看

标签： javascripthtmlcssfirefoxexeccommand