jquery 复制html表格到剪贴板与格式

bkkx9g8r 于 2023-10-17 发布在 jQuery

关注(0)|答案(2)|浏览(127)

已解决2022年7月1日

我的最终代码，让我与谷歌工作表

$(document).on('click', '#copy_btn', function () {
              var currentRow = $(this).closest("tr");
              var memberName = currentRow.find("td:eq(1)").text();
              newMemberName = $.trim(memberName.replace(/(\r\n|\n|\r)/gm, ""));
              var bankName = currentRow.find("td:eq(2)").text();
              var amoutName = currentRow.find("td:eq(3)").text();

              function copyTextToClipboard(text) {
                if (!navigator.clipboard) {
                  fallbackCopyTextToClipboard(text);
                  return;
                }
                navigator.clipboard.writeText(text).then(function () {
                  console.log('Async: Copying to clipboard was successful!');
                }, function (err) {
                  console.error('Async: Could not copy text: ', err);
                });
              }

              var text2copy = '=SPLIT("' + newMemberName + ',' + amoutName + ',' + bankName + '", ",")'
              copyTextToClipboard(text2copy);
            })

这是我的表，我希望在单击copy_btn时将membername + bank + amount复制到剪贴板

<tbody id="pendingDepositTable">
      <tr>
        <td>
          <div class="d-flex align-items-center">
            <div class="table-user-name ml-3">
              <p class="mb-0 font-weight-medium">9</p>
            </div>
          </div>
        </td>
        <td>
          <a href="/profile/MS00001">
            MS00001
          </a>
        </td>
        <td>test bank</td>
        <td>123</td>
        <td>
          <div class="badge badge-inverse-warning"> pending </div>
        </td>
        <td>2022-01-04 16:13:58</td>
        <td>
          <a id="copy_btn" class="btn btn-success"><i class="mdi mdi mdi-content-duplicate"></i></a>
          <a href="/updateDepositStatus?depositID=9" class="btn btn-success"><i class="mdi mdi mdi-check-all"></i></a>
          <a href="/rejectDeposit?depositID=9" class="btn btn-danger"><i class="mdi mdi-close"></i></a>
        </td>
      </tr>
    </tbody>

<script>
            $(document).on('click', '#copy_btn', function () {
              var currentRow = $(this).closest("tr");
              var memberName = currentRow.find("td:eq(1)").text();
              newMemberName = $.trim(memberName.replace(/(\r\n|\n|\r)/gm, ""));
              var bankName = currentRow.find("td:eq(2)").text();
              var amoutName = currentRow.find("td:eq(3)").text();
              navigator.clipboard.writeText(newMemberName,bankName,amoutName）;

            })
          </script>

说实话，我不知道我可以这样做。我希望得到的结果是我按下复制按钮后，然后我可以粘贴在Excel或谷歌工作表这样

jquery

来源：https://stackoverflow.com/questions/70581191/copy-html-table-into-clipboard-with-format

2条答案

按热度按时间

qfe3c7zg1#

要将行值粘贴到电子表格中，创建一个mime类型为text/html的ClipboardItem和一个表格，其中一行包含所需的值（作为html字符串），然后将其写入剪贴板。

const spreadSheetRow = new Blob([value], {type: 'text/html'});
navigator.clipboard.write([new ClipboardItem({'text/html': spreadSheetRow})])

Stackoverflow-snippet在这里不起作用，因为Clipboard只在顶层窗口/选项卡中起作用。
这里有一个小的（Stackblitz）snippet玩。它在单击时复制行的值。

赞(0）回复(0）举报 2023-10-17

r8xiu3jd2#

KooiInc的答案的一个小扩展，演示了从DOM中提取html，并为不支持HTML的粘贴目标应用程序提供了一个回退值

// Get the table element from the DOM
const tableElement = document.getElementById('someExistingtableElement');

// Convert the table element to an HTML string
const tableHTMLString = tableElement.outerHTML;

// Convert the table element to plain text string
const plainTextString = tableElement.innerText;

navigator.clipboard.write([
    new ClipboardItem({
        'text/html': new Blob([tableHTMLString], {
            type: 'text/html',
        }),
        'text/plain': new Blob([plainTextString], {
            type: 'text/plain',
        }),
    }),
]

赞(0）回复(0）举报 2023-10-17

我来回答

jquery 复制html表格到剪贴板与格式

2条答案

相关问题

热门标签

最新问答