如何使用clipboard.js复制不含HTML标签的表格内容？

没问题！当然可以解决这个问题——clipboard.js支持自定义复制的文本内容，你只需要替换掉默认的data-clipboard-target方式，改用自定义文本生成逻辑，就能轻松移除所有HTML标签（包括<br>），同时还能保持表格的行列结构。

解决方案步骤： #

1. 移除按钮上的data-clipboard-target属性，手动控制复制内容
2. 初始化Clipboard实例时，通过text回调函数生成处理后的纯文本
3. 在回调函数里遍历表格行列，移除所有标签并整理格式

修改后的完整代码： #

<a class="btn btn-default" id="export-btn">Copy</a> 
<table id="datTable" data-tableName="Test" class="table table-hover"> 
<thead> 
<tr><td>Col1</td><td>Col2</td></tr> 
</thead> 
<tbody> 
<tr><td> dat10<br> Ok </td><td> dat11 </td></tr> 
<tr><td> dat20 </td><td> dat21 </td></tr> 
</tbody> 
</table> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js"></script> 
<script> 
// 初始化Clipboard，自定义复制文本逻辑
var clipboard = new Clipboard('#export-btn', {
  text: function() {
    const table = document.getElementById('datTable');
    let cleanedTableText = '';

    // 遍历所有行，保持表格的行列结构
    const rows = table.querySelectorAll('tr');
    rows.forEach(row => {
      // 获取当前行的所有单元格（兼容表头th和内容td）
      const cells = row.querySelectorAll('td, th');
      // 处理每个单元格：移除标签、清理多余空格
      const cellContents = Array.from(cells).map(cell => {
        return cell.innerHTML
          .replace(/<br\s*\/?>/gi, ' ') // 将<br>标签替换为空格
          .replace(/<[^>]+>/g, '')      // 移除所有其他HTML标签
          .replace(/\s+/g, ' ')         // 合并多余空格
          .trim();                      // 去掉首尾空格
      });
      // 用制表符分隔列（粘贴到Excel/表格工具会自动识别列），换行分隔行
      cleanedTableText += cellContents.join('\t') + '\n';
    });

    // 去掉末尾多余的换行
    return cleanedTableText.trim();
  }
}); 

clipboard.on('success', function(e) { 
console.info('Action:', e.action); 
console.info('Cleaned Text:', e.text); 
console.info('Trigger:', e.trigger); 
e.clearSelection(); 
}); 

clipboard.on('error', function(e) { 
console.error('Action:', e.action); 
console.error('Trigger:', e.trigger); 
}); 
</script>

代码说明： #

• 放弃默认的data-clipboard-target，转而通过text回调函数精准控制复制内容
• 对每个单元格内容做针对性处理：先替换<br>为空格，再移除所有其他HTML标签，最后清理冗余空格
• 用制表符\t分隔列，粘贴到Excel、Google Sheets等工具时会自动识别为不同列，完美保留表格结构
• 最后去除末尾多余换行，让复制的文本更整洁

这样处理后，复制的内容就完全是干净的纯文本，不会有任何HTML标签带来的换行或格式问题啦！

内容的提问来源于stack exchange，提问作者Javi_Mandrat