將具有格式/樣式的HTML表標簽復制到剪貼板

Question

我正在嘗試使用格式復制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>

任何幫助，將不勝感激。

Answer 1

如果您需要將HTML元素復制到剪貼板上（而不是網頁（瀏覽器環境）使用），建議您嘗試使用IE的F12工具...

1. 移至“ DOM資源管理器”標簽
2. 選擇感興趣的元素
3. 右鍵單擊以打開飛行命令菜單，然后
4. 單擊“使用樣式復制元素”。

我上次使用此命令（在所有瀏覽器環境中都沒有使用）是2005年，它是IE，所以我不知道其他瀏覽器是否在其最新的開發工具中提供此選項。 我只能保證它在IE F12上的可用性。

否則，這項表面上簡單且看似簡單的任務很快就會成為一項非常復雜的工作。

---

另外，觸發文檔編輯模式：ON，也可能會為您的復制命令提供樣式格式設置，以選定元素為目標。

---

使用JavaScript通過迭代並檢查下面嵌套的每個子元素的當前樣式 ，以編程方式復制內容及其對應的樣式，這是一種超越益處的折磨。 但是可行！