使用 jquery 在按钮单击时复制表或 div 内容

debugcn 发表于 Dev

苏西尔

我得到表格 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>

尼尔·比利亚雷亚尔

你可能想试试这个。

我根据这篇文章中的文本选择由@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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。