如何在同一剪贴板项中复制SVG与网站链接？

要实现点击按钮同时复制图表图片和网站链接，核心是利用剪贴板支持多格式数据写入的特性——我们可以同时向剪贴板写入图片二进制数据，以及包含图片+链接的富文本内容，不同粘贴场景会自动适配读取对应的格式。

实现步骤 #

• 1. 准备图表的Blob数据：如果图表是Canvas渲染的，直接用canvas.toBlob()转为PNG格式的Blob；如果是img元素，可通过Canvas中转生成Blob。
• 2. 构造富文本内容：创建包含图表（用Blob URL或Data URI）和网站链接的HTML片段，比如：

  <div>
    <img src="图表的Blob URL" alt="数据图表">
    <br>
    <a href="你的网站完整链接">查看图表详情页面</a>
  </div>
  

• 3. 写入剪贴板：使用现代的Clipboard API（推荐）同时写入image/png和text/html两种格式的数据；对旧浏览器可降级使用document.execCommand('copy')配合隐藏的富文本容器。

示例代码 #

// 假设chartCanvas是渲染图表的canvas元素
async function copyChartAndLink() {
  // 生成图表Blob
  const chartBlob = await new Promise(resolve => chartCanvas.toBlob(resolve, 'image/png'));
  const chartBlobUrl = URL.createObjectURL(chartBlob);

  // 构造富文本HTML
  const htmlContent = `
    <div style="text-align:center;">
      <img src="${chartBlobUrl}" alt="数据图表" style="max-width:100%;">
      <br>
      <p><a href="https://your-site.com/chart-page">查看完整图表页面</a></p>
    </div>
  `;

  try {
    // 写入剪贴板（多格式）
    await navigator.clipboard.write([
      new ClipboardItem({
        'image/png': chartBlob,
        'text/html': new Blob([htmlContent], { type: 'text/html' })
      })
    ]);
    alert('图表和链接已复制到剪贴板');
  } catch (err) {
    console.error('复制失败:', err);
    // 降级处理：兼容不支持Clipboard API的浏览器
    const tempContainer = document.createElement('div');
    tempContainer.style.position = 'fixed';
    tempContainer.style.top = '-9999px';
    tempContainer.innerHTML = htmlContent;
    document.body.appendChild(tempContainer);

    const selection = window.getSelection();
    const range = document.createRange();
    range.selectNodeContents(tempContainer);
    selection.removeAllRanges();
    selection.addRange(range);

    document.execCommand('copy');
    selection.removeAllRanges();
    document.body.removeChild(tempContainer);
    alert('图表和链接已复制（兼容模式）');
  }
}

效果说明 #

• 粘贴到富文本场景（如Gmail、Outlook、Word）：会同时显示图表图片和可点击的网站链接；
• 粘贴到纯文本场景：会显示图片的替代文本+链接，保证内容可用性。

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