TypeScript报错如何通过navigator.clipboard将Chart.js画布存为PNG到剪贴板

问题修复方案 #

报错原因说明 #

两个报错分别对应两个类型不匹配问题：

1. TS类型定义中ClipboardItem构造参数要求对象的值为Promise<ClipboardItemDataType>类型，直接传入Blob不符合类型校验
2. TS标准库没有包含异步剪贴板API的类型定义，导致识别不到navigator.clipboard.write方法和ClipboardItem构造函数

完整修复代码 #

// 扩展全局类型解决TS类型报错，若项目有全局d.ts文件也可以把这段声明放在d.ts中
declare global {
  interface Clipboard {
    write(data: ClipboardItem[]): Promise<void>
  }
  type ClipboardItemDataType = string | Blob
  type ClipboardItemData = Promise<ClipboardItemDataType> | ClipboardItemDataType
  declare class ClipboardItem {
    constructor(data: Record<string, ClipboardItemData>)
  }
}

graphicDiv.addEventListener(
  'click',
  (event) => {
    const canvas = document.getElementById('canvas') as HTMLCanvasElement
    // 固定导出为image/png格式，兼容性更好
    canvas.toBlob(async (blob) => {
      if (!blob) return
      try {
        // 将blob用Promise.resolve包裹符合ClipboardItem类型要求
        const clipboardItem = new ClipboardItem({
          [blob.type]: Promise.resolve(blob)
        })
        await navigator.clipboard.write([clipboardItem])
        // 可在此处添加写入成功的提示逻辑
      } catch (err) {
        // 可在此处添加写入失败的处理逻辑
        console.error('复制到剪贴板失败', err)
      }
    }, 'image/png')
  },
  false
)

额外注意事项 #

• 异步剪贴板API仅在安全上下文（HTTPS/localhost）下可用
• 写入操作必须在用户交互事件（如click、tap）的回调中触发，否则会被浏览器权限拦截
• 部分浏览器仅支持写入image/png格式的图片到剪贴板，指定导出格式为png可以避免兼容性问题

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