Bootstrap模态框中复制JS生成表格至剪贴板的实现问题

你当前的代码是针对输入框设计的，但要复制的是动态生成的表格，需要调整复制逻辑，以下是两种简单可行的方案：

方案一：改进Clipboard.js的使用 #

既然你已经在用Clipboard.js，可以直接修改它的配置，自定义要复制的内容，无需依赖输入框。

调整HTML #

移除按钮上的data-clipboard-target属性：

<div class="modal-body">
  <div id="table">
    <!-- 动态生成的表格会在这里插入 -->
  </div>
  <div class="modal-footer">
    <a href="#" id="copy" class="btn btn-default">复制表格内容到剪贴板</a>
    <a href="link.com" class="btn btn-primary" role="button" aria-pressed="true">Done</a>
  </div>
</div>

修改JS代码 #

初始化Clipboard时，通过回调函数获取表格内容（要复制纯文本用innerText，要保留表格格式用innerHTML）：

$(".modal").on("shown.bs.modal", function() {
  // 先销毁旧实例，避免重复绑定事件
  if (window.clipboardInstance) {
    window.clipboardInstance.destroy();
  }
  
  // 初始化Clipboard，自定义复制内容
  window.clipboardInstance = new Clipboard('#copy', {
    text: function() {
      return document.getElementById('table').innerText;
      // 若要复制带格式的表格，替换成：return document.getElementById('table').innerHTML;
    }
  });

  // 可选：添加复制反馈
  window.clipboardInstance.on('success', function(e) {
    alert('表格内容已复制到剪贴板');
    e.clearSelection();
  });

  window.clipboardInstance.on('error', function(e) {
    alert('复制失败，请手动复制');
  });
});

方案二：原生JS实现（无需第三方库） #

如果不想依赖Clipboard.js，用浏览器原生剪贴板API更直接，适合新手理解：

调整HTML按钮 #

给按钮绑定点击事件：

<a href="#" id="copy" class="btn btn-default" onclick="copyTable()">复制表格内容到剪贴板</a>

添加复制函数 #

function copyTable() {
  const tableBox = document.getElementById('table');
  // 获取表格内容，纯文本用innerText，带格式用innerHTML
  const content = tableBox.innerText;

  // 调用原生剪贴板API
  navigator.clipboard.writeText(content)
    .then(() => {
      alert('复制成功！');
    })
    .catch(err => {
      console.error('复制出错:', err);
      alert('复制失败，请检查浏览器权限或手动复制');
    });
}

// 确保模态框显示后表格已生成（如果表格是在这里动态创建的，放在这个事件里执行创建逻辑即可）
$(".modal").on("shown.bs.modal", function() {
  // 这里可以写生成表格的代码
});

补充：复制带格式的表格 #

如果需要复制后粘贴到Excel/Word仍保留表格结构，可以用临时文本框的方式：

function copyFormattedTable() {
  const tableBox = document.getElementById('table');
  const tempTextarea = document.createElement('textarea');
  // 把表格的HTML结构塞进临时文本框
  tempTextarea.value = tableBox.innerHTML;
  // 临时添加到页面（必须可见才能复制，设置为绝对定位隐藏）
  tempTextarea.style.position = 'absolute';
  tempTextarea.style.left = '-9999px';
  document.body.appendChild(tempTextarea);
  
  // 选中内容并复制
  tempTextarea.select();
  try {
    document.execCommand('copy');
    alert('带格式的表格已复制');
  } catch (err) {
    alert('复制失败');
  }
  
  // 删除临时元素
  document.body.removeChild(tempTextarea);
}

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