使用clipboard.js能否将checkbox连同文本复制到剪贴板并粘贴到Word

首先明确：该需求可以实现。核心原理是系统剪贴板支持多格式内容存储，你可以在复制时同时写入纯文本和HTML格式数据，Microsoft Word粘贴时会优先解析HTML内容，标准的<input type="checkbox">标签会被Word自动识别为可交互的复选框控件。

具体实现步骤 #

• 不要直接使用clipboard.js默认的文本复制逻辑，需要手动监听复制事件，向剪贴板写入HTML格式的目标内容，参考代码如下：

<!-- 页面结构 -->
<div id="copyTarget">
  <input type="checkbox">Electricity Bill
</div>
<button class="clipboard-btn" data-clipboard-target="#copyTarget">复制</button>

<!-- 逻辑代码 -->
<script src="clipboard.min.js"></script>
<script>
const clipboard = new ClipboardJS('.clipboard-btn', {
  // 定义纯文本格式的复制内容，作为纯文本场景下的兼容 fallback
  text: function(trigger) {
    const targetEl = document.querySelector(trigger.getAttribute('data-clipboard-target'))
    const checkStatus = targetEl.querySelector('input[type="checkbox"]').checked ? '☑' : '☐'
    return `${checkStatus} ${targetEl.textContent.trim()}`
  }
})

// 监听复制成功事件，额外写入HTML格式数据到剪贴板
clipboard.on('success', function(e) {
  e.preventDefault()
  const targetSelector = e.trigger.getAttribute('data-clipboard-target')
  const htmlContent = document.querySelector(targetSelector).outerHTML
  
  // 向剪贴板同时写入两种格式的数据
  const data = [
    new ClipboardItem({
      'text/plain': new Blob([e.text], { type: 'text/plain' }),
      'text/html': new Blob([htmlContent], { type: 'text/html' })
    })
  ]
  navigator.clipboard.write(data).then(() => {
    console.log('复制成功')
  })
})
</script>

• 如果你需要保留复选框的勾选状态一起复制，只需要在复制前给<input type="checkbox">加上checked属性即可，粘贴到Word后勾选状态也会原样保留。

注意事项 #

• 该方案仅在支持Clipboard API的现代浏览器中生效，目前主流Chrome、Edge、Firefox均已支持
• 粘贴到Word时如果默认显示的是纯文本，可右键选择「保留源格式」粘贴，即可看到可交互的复选框

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