将具有格式/样式的HTML表标签复制到剪贴板

时间:2019-09-08 12:31:07

标签: javascript jquery html bootstrap-table execcommand

我正在尝试使用格式复制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>

任何帮助将不胜感激。

1 个答案:

答案 0 :(得分:0)

如果您需要将HTML元素复制到剪贴板上-而不是网页(浏览器环境)使用-建议您尝试使用IE的F12工具...

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

我上次使用此命令(在所有浏览器环境中都没有使用)是2005年,它是IE,所以我不知道其他浏览器是否在其最新的开发工具中提供此选项。我只能保证它在IE F12上的可用性。

否则,这项表面上简单且看似简单的任务很快就会变成一件非常复杂的工作。


或者,触发文档编辑模式:“打开”,也可能会为您的针对选定元素的复制命令提供样式格式。


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