时间戳

首页 > 解决方案 > 将带有格式/样式的 HTML 表格标记复制到剪贴板

javascript - 将带有格式/样式的 HTML 表格标记复制到剪贴板

问题描述

我正在尝试使用格式复制 HTML 表格元素标记。我遵循了这些 Stackoverflow 答案，但仍然只有文本被复制而没有格式。

https://stackoverflow.com/a/38821410 https://stackoverflow.com/a/30566157

这是我的javascript代码：

function selectElementContents(el) {
  var body = document.body, range, sel;
  if (document.createRange && window.getSelection) {
    range = document.createRange();
    sel = window.getSelection();
    sel.removeAllRanges();
    try {
      range.selectNodeContents(el);
      sel.addRange(range);
    } catch (e) {
      range.selectNode(el);
      sel.addRange(range);
    }
    document.execCommand("Copy");
  } else if (body.createTextRange) {
    range = body.createTextRange();
    range.moveToElementText(el);
    range.select();
    document.execCommand("Copy");
  }
}

这是复制表格按钮

@component('layouts.components.custom-button',
                              [
                              'id' => 'copyTable',
                              'class' => 'ml-auto m-r-10',
                              'tooltip' => 'Copy Table',
                              'position' => 'top right',
                              'target' => '',
                              'clipboard_target' => '#JoineeTrackerTable',
                              'toggle' => '',
                              'action' => '',
                              'icon' => 'file_copy',
                              ])
                            @endcomponent

这是表代码。我从 PHP 构建后动态附加表正文内容

<table id="JoineeTrackerTable" class="table table-responsive">
                    <thead>
                    <tr class="">
                        <th class="tablet-hide font-weight-bold c_id">No.</th>
                        <th>Full Name</th>
                        <th>Mobile Number</th>
                        <th class="">Designation</th>
                        <th class="">Recruiter</th>
                        <th class="">Country (Recruiter)</th>
                        <th class="">Organization</th>
                        <th class="">Process Type</th>
                        <th class="">Company Name</th>
                        <th class="">City/Company Site</th>
                        <th class="">DOI</th>
                        <th class="">DOJ</th>
                        <th class="">Joinee Status</th>
                        <th class="">Job Type</th>
                        <th class="">Comments</th>
                    </tr>
                    </thead>

                    <tbody id="joinee-tracker-list">

                    </tbody>
                </table>

任何帮助，将不胜感激。

标签： javascriptjqueryhtmlbootstrap-tableexeccommand

解决方案

如果您需要将 HTML 元素复制到剪贴板 - 用于网页（浏览器环境）以外的用途 - 我建议您尝试 IE 的 F12 工具...

  1. 移至“DOM 资源管理器”选项卡
  2. 选择感兴趣的元素
  3. 右键单击以打开飞行命令菜单，然后
  4. 单击“复制带有样式的元素”。

我最后一次使用这个命令（在任何浏览器环境中）是 2005 年，当时是 IE，所以我不知道其他浏览器是否在他们最新的开发工具中提供了这个选项。我只能保证它在 IE F12 上的可用性。

否则，这个看似简单、看似简单的工作，很快就会变成一件非常复杂的工作。

或者，触发文档编辑模式：ON，也可能为您的复制命令提供针对选定元素的样式格式。

使用 JavaScript 通过迭代和检查嵌套在下面的每个子项的当前样式以编程方式复制内容及其相应样式，这是一种超越好处的折磨。但是可行！

推荐阅读