时间戳

首页 > 解决方案 > 以角度将具有结构的HTML表格复制到剪贴板

angular - 以角度将具有结构的HTML表格复制到剪贴板

问题描述

我正在尝试将整个 HTML 表格及其结构复制到有角度的剪贴板。复制部分工作正常，但没有遵循确切的表格布局。

  1. 要复制的表

    在此处输入图像描述

  2. 复制表

    在此处输入图像描述

似乎它正确地遵循了标题的布局，但数据布局是错误的。

用来实现这个东西的方法

selectNode(node){
    let range  =  document.createRange();
    range.selectNodeContents(node)
    let select =  window.getSelection()
    select.removeAllRanges()
    select.addRange(range)
  }

  copy(){
    this.selectNode(this.queryTable.nativeElement);
    document.execCommand('copy');    
  }

HTML：

<table id="queryTable" class="table table-responsive-sm table-hover table-outline mb-0" #queryTable>
   <thead class="text-center no-padding" style="background: #0042be;">
       <tr class="querytableheaderstyling">
           <th *ngFor="let key of debugQueryData">{{key}}</th>
       </tr>
   </thead>
   <tbody class="text-center">
       <tr *ngFor="let value of debugResult | filter : filters.searchUsersText">
           <td *ngFor="let key of debugQueryData; index as i" style="padding:0px 10px !important"><div [innerHTML]="value[key]"></div></td>
       </tr>   
   </tbody>
</table>

我做错了什么，我怎样才能让它发挥作用？

PS：由于几个原因，我不能在这种情况下使用 DataTable。我正在使用基于 HTML 的简单表格，因此请提供可以在这种情况下工作的解决方案。

标签： angularhtml-tablecopyclipboard

解决方案

检查您复制的原始值，似乎您在那里/n或类似的东西。

尝试添加nodeString.strip()以删除数据中的任何特殊字符。

甚至像这样从复制的输入中删除所有特殊字符

str.replace(/[^a-zA-Z ]/g, "")

希望能帮助到你

推荐阅读