使用jQuery在按钮单击上复制表或div内容

Question

我正在获取HTML表$(selector).html()

但是在执行document.execCommand("copy");之后，它不会复制表的内容。

请找到附件，以更加清楚。

function copy(selector) {
  var $temp = $("<div>");
  $("body").append($temp);
  $temp.attr("contenteditable", true)
    .html($(selector).html()).select()
    .focus(function() {
      document.execCommand('selectAll', false, null)
    });
  document.execCommand("copy");
  $temp.remove();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>

  <tbody>
    <tr>
      <td colspan="2" style="text-align: left; line-height: 40px; font-family: Verdana; font-size: 12px; font-weight: bold; color: #123456; text-transform: uppercase; background: #e6d05c75;">Accomodation</td>
    </tr>
    <tr>
      <td width="50%">Country</td>
      <td>Mauritius</td>
    </tr>
    <tr>
      <td>Destination</td>
      <td>All Hotels</td>
    </tr>
    <tr>
      <td width="50%">Hotel Name</td>
      <td>Anahita Mauritius - The Resort</td>
    </tr>
    <tr>
      <td>Check In</td>
      <td>22/Aug/2018</td>
    </tr>
    <tr>
      <td>Check Out</td>
      <td>24/Aug/2018</td>
    </tr>
    <tr>
      <td colspan="2">
        <table cellpadding="0px" cellspacing="0" width="100%" style=" padding:20px; line-height: 30px; font-family: Verdana; font-size: 12px; font-weight: bold; color: #123456; vertical-align: top" rules="all">
          <tbody>
            <tr style="background: #cce7ff;">
              <td>Room Type</td>
              <td>Meal Type</td>
              <td>Offer</td>
            </tr>
            <tr>
              <td>1 Bedroom Suite Garden(02 pax)</td>
              <td>Half Board</td>
              <td>N/A</td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
    <tr style="background: #c0e098;font - size: 15px ">
      <td>Total Package Cost</td>
      <td>1502.00 USD</td>
    </tr>
    <tr>
      <td><input readonly="" type="text" value="Click Me To Copy" class="allowCopy noselect"></td>
      <td><button onclick="copy(tblcopy)" type="button">Click to Copy</button></td>
    </tr>
  </tbody>
</table>

Answer 1

您可能想尝试一下。

我根据这篇帖子Answered by @Tom Oakley

中的文本进行了选择

function selectText(el){
    var doc = document;
    var element = document.getElementById(el);
    if (doc.body.createTextRange) {
        var range = document.body.createTextRange();
        range.moveToElementText(element);
        range.select();
    } else if (window.getSelection) {
        var selection = window.getSelection();        
        var range = document.createRange();
        range.selectNodeContents(element);
        selection.removeAllRanges();
        selection.addRange(range);
    }
}
function copy(selector) {
  var $temp = $("<div id='toCopy'>");
  $("body").append($temp);
  $temp.attr("contenteditable", true)
    .html($(selector).html());
  selectText("toCopy");
  document.execCommand("copy");
  $temp.remove();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tblcopy">

  <tbody>
    <tr>
      <td colspan="2" style="text-align: left; line-height: 40px; font-family: Verdana; font-size: 12px; font-weight: bold; color: #123456; text-transform: uppercase; background: #e6d05c75;">Accomodation</td>
    </tr>
    <tr>
      <td width="50%">Country</td>
      <td>Mauritius</td>
    </tr>
    <tr>
      <td>Destination</td>
      <td>All Hotels</td>
    </tr>
    <tr>
      <td width="50%">Hotel Name</td>
      <td>Anahita Mauritius - The Resort</td>
    </tr>
    <tr>
      <td>Check In</td>
      <td>22/Aug/2018</td>
    </tr>
    <tr>
      <td>Check Out</td>
      <td>24/Aug/2018</td>
    </tr>
    <tr>
      <td colspan="2">
        <table cellpadding="0px" cellspacing="0" width="100%" style=" padding:20px; line-height: 30px; font-family: Verdana; font-size: 12px; font-weight: bold; color: #123456; vertical-align: top" rules="all">
          <tbody>
            <tr style="background: #cce7ff;">
              <td>Room Type</td>
              <td>Meal Type</td>
              <td>Offer</td>
            </tr>
            <tr>
              <td>1 Bedroom Suite Garden(02 pax)</td>
              <td>Half Board</td>
              <td>N/A</td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
    <tr style="background: #c0e098;font - size: 15px ">
      <td>Total Package Cost</td>
      <td>1502.00 USD</td>
    </tr>
    <tr>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

<button onclick="copy('#tblcopy')" type="button">Click to Copy</button>