使用JS通过剪贴板复制图文至Slack失败问题求助

你的代码仅向剪贴板写入了text/html格式内容，而Slack的剪贴板解析逻辑有特定要求：

• 需要同时提供纯文本格式作为解析 fallback
• 远程图片URL无法被Slack自动加载，必须直接提供图片的二进制数据

以下是修改后的代码：

修改后的JS代码 #

const btn = document.getElementById("btn");
const out = document.getElementById("out");

btn.addEventListener("click", async () => {
  try {
    // 准备纯文本内容
    const plainText = "Random string";
    // 准备HTML内容
    const html = `
      <img src="https://picsum.photos/seed/picsum/200/300">
      <p>Random string</p>
    `;
    // 下载远程图片为Blob
    const imgResponse = await fetch("https://picsum.photos/seed/picsum/200/300");
    const imgBlob = await imgResponse.blob();

    // 构造多格式剪贴板内容
    const clipboardItems = [
      new ClipboardItem({
        "text/plain": new Blob([plainText], { type: "text/plain" }),
        "text/html": new Blob([html], { type: "text/html" }),
        "image/png": imgBlob
      })
    ];

    await navigator.clipboard.write(clipboardItems);
    out.innerText = "Copied to clipboard!";
  } catch (err) {
    out.innerText = "Error: " + err;
  }
});

HTML代码（无需修改） #

<p>Click Copy, then paste into Word/Teams/Slack</p>

<button id="btn" type="button">Copy HTML (works)</button>

<pre id="out"></pre>

关键改动说明 #

• 添加text/plain格式：确保Slack能读取到纯文本内容，作为HTML解析失败时的 fallback
• 下载图片为Blob并添加image/png类型：让Slack直接获取图片二进制数据，无需远程加载
• 使用await简化异步逻辑，避免嵌套回调

测试时点击按钮，剪贴板会同时包含三种格式的内容，粘贴到Slack即可正常显示图片和文本。

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