将本机 HTML 粘贴到浏览器剪贴板

Question

通过单击按钮，用户会将 HTML 内容从当前页面放入剪贴板。然后，在电子邮件中，粘贴保留 HTML 格式的内容。希望在浏览器中复制内容选择 window，而不让用户进行选择（单独视图）。

我已经完成了大部分设置并且可以正常工作。我不认为存在权限问题。但是，使用下面的代码，我得到了“粘贴”，但随后粘贴 (CTRL+V)，粘贴缓冲区中没有任何内容。如果我将它切换为 clipboard.writeText()，我会得到 html 作为明文。它只是将 Blob 用于 html 导致粘贴缓冲区为空。

我认为它与 Blob 部分有关，也许 text/html 部分是错误的？有没有办法让它发挥作用？

<div id="lipsum" contenteditable="true" style="display: none;">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <p>Vivamus mollis, augue eu vulputate fermentum.</p>
</div>
<script>
(function() {
  let html = document.getElementById('lipsum').innerHTML
  let content = new Blob([ html ], { type: 'text/html' })
  let data = [ new ClipboardItem({ [ content.type ]: content }) ]
  
  window.focus()

  setTimeout(() => {
    navigator.clipboard.write(data).then(
      () => console.log('pasted'),                   <<< This fires
      (error) => console.log('not pasted', error)
    )
  }, 2000)
})()
</script>

Answer 1

你的代码在 Chrome 上对我有效。加载页面并等待几秒钟后，我能够粘贴 div 内容。如果我没有持续关注页面，我确实注意到了错误。例如。当我让检查员 window 前进时它会出错。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Test</title>
</head>
<body>
<div id="lipsum" contenteditable="true" style="display: none;">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <p>Vivamus mollis, augue eu vulputate fermentum.</p>
</div>

<script>
  (function() {
    let html = document.getElementById('lipsum').innerHTML
    let content = new Blob([ html ], { type: 'text/plain' })
    let data = [ new ClipboardItem({ [ content.type ]: content }) ]

    setTimeout(() => {
      window.focus()
      navigator.clipboard.write(data).then(
        () => console.log('pasted'),
        (error) => console.log('not pasted', error)
      )
    }, 2000)
  })()</script>
</body>
</html>

将本机 HTML 粘贴到浏览器剪贴板

Pasting native HTML to browser clipboard

javascript

clipboard