从剪贴板复制并粘贴富文本到 mailto 正文

Question

我有一个表格，我希望用户能够通过电子邮件在点击时复制并粘贴到 mailto 主题来发送此表格。

这是代码沙盒的现场演示：copy and paste rich text

从剪贴板复制和粘贴富文本到邮件正文的功能

  const copyToClip = () => {
    let range = document.createRange();
    range.selectNodeContents(tableRef.current);
    let sel = window.getSelection();
    sel.removeAllRanges();
    sel.addRange(range);
    document.execCommand("Copy");
    sel.removeAllRanges();
    //paste the copied data to mailto body
    document.addEventListener("paste", function (event) {
      var clipText = event.clipboardData.getData("Text");
      window.location = `mailto:?subject=I wanted you to see this site&body=${clipText}`;
    });
  };

用户单击复制按钮时的预期结果，它打开客户端默认电子邮件并将表格传递到正文，如下所示。

注意：我可以将复制的数据作为字符串发送，但不能以富文本格式发送。

我需要做什么来解决这个问题？

Answer 1

变化：

var clipText = event.clipboardData.getData("Text");

到

var clipText = encodeURIComponent(event.clipboardData.getData("Text"));