從剪貼板復制並粘貼富文本到 mailto 正文

Question

我有一個表，我希望用戶能夠通過 email 通過單擊復制並粘貼到郵件主題來發送此表。

這是代碼沙箱的現場演示： 復制和粘貼富文本

A function 從剪貼板復制並粘貼富文本到郵件正文

  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}`;
    });
  };

用戶單擊復制按鈕時的預期結果，它打開客戶端默認 email 並將表格傳遞到如下所示的正文。

注意：我可以將復制的數據作為字符串發送，但不能以富文本格式發送。

我需要做什么來解決問題？

Answer 1

改變：

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

至

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