拷贝

拷贝功能

场景：

点击拷贝按钮时，拷贝表格内容实现可以复制，为保证样式好看一个tr一行数据。

实现:

<button class="copy">拷贝</button>
<table class="table">
  <thead>
    <tr>
      <th>快递单号</th>
      <th>订单号</th>
      <th>金额</th>
    </tr>
   </thead>
   <tbody class="tbody">
     <tr>
       <td>650663245490481661</td>
       <td>1000111100020445281</td>
       <td>1000.00</td>
     </tr>
     <tr>
       <td>590663245494572661</td>
       <td>1000111100020445281</td>
       <td>1000.00</td>
     </tr>
     <tr>
       <td>590663245494572661</td>
       <td>1000111100020445281</td>
       <td>1000.00</td>
     </tr>
   </tbody>
</table>

// 样式
<style>
    table,
    th,
    td {
      border: 1px solid #ccc;
    }
    table {
      border-collapse: collapse;
      width: 600px;
    }
    td {
      text-align: center;
    }
    button {
      margin: 20px 0;
    }
</style>

// 功能
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
  $('button').click(function() {
    let tbody = $('.tbody')[0].innerText
    let tbodyData = tbody.replace(/  +/g, ',').split(',')
    let str = ''
    for(let i = 0; i<tbodyData.length; i++ ) {
      console.log('i', i, tbodyData[i]);
      if (i%3 == 2) {
        str = str + tbodyData[i] + '\n'
      } else {
        str = str + tbodyData[i] + ' '
      }
    }
    // console.log('str', str)
    let oInput = document.createElement("textarea"); // 如果写input不会识别 \n 不会换行
    oInput.style.border = "0 none";
    oInput.style.color = "transparent";
    oInput.value = str;
    document.body.appendChild(oInput);
    oInput.select(); // 选择对象
    document.execCommand("Copy"); // 执行浏览器复制命令
    oInput.parentNode.removeChild(oInput)
    $('.showText')[0].innerText = str
  })
</script>

效果:

在进行复制即可

650663245490481661	1000111100020445281	1000.00
590663245494572661	1000111100020445281	1000.00
590663245494572661	1000111100020445281	1000.00