关于 js 复制粘贴问题

[co2In]

我想在浏览器里面实现复制功能，发现 navigator.clipboard.write 无法写入多张图片，问 ai 也说不能，现在有个疑问
从 qq 这种软件复制多张图片，触发粘贴发现是一个 DataTransferItemList 类数组对象，那么既然可以粘贴，应该是可以写入的啊，求大佬解惑

[gucheen]

这个问题和浏览器、操作系统设计有关
事实上，现在的 write 方法中，虽然支持一个数组，但是大部分实现都只会处理第一个 ClipboardItem

[gucheen]

如过你去翻标准定义，会发现有这么一句
If data’s size is greater than 1, and the current operating system does not support multiple native clipboard items on the system clipboard, then add data[0] to dataList, else, set dataList to data.

[co2In]

@gucheen 感谢大佬解惑

[xiaoming1992]

我看 mdn navigator.clipboard.write 接收参数是一个 ClipboardItem[]，我尝试了一下，chrome 目前并不支持多个 ClipboardItem. 所以可能 QQ 是 app, 他支持多写入，浏览器是受限环境，仅支持多读，不支持多写？

[co2In]

@xiaoming1992 可能是这样，只能写入第一个 ClipboardItem

[rogerer]

QQ 应该是全程当 HTML 处理吧？这样本质上就是一个 ClipboardItem 。

https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/write ，这里提示部分系统是不支持多个 ClipboardItem 。

[rogerer]

@rogerer QQ 本身的消息框是图文混排的，所以写入的时候会是一个 HTML 写入进去，然后粘贴的时候再来解析。这和很多在线文档的实现方式是一致的，而不需要真的写入多个 minetype 为 text/image 的 ClipboardItem 到 Clipboard 里。

[co2In]

@rogerer 感谢大佬，有思路了，不过这样写入的话，只能在自己的粘贴里面才能解析成功是这样吧

[zsh2517]

之前写过一个读取剪贴板的东西： https://codepen.io/zsh2517/full/ZEdEdzw

复制一段消息，然后在这里读取剪贴板，看一下真实的剪贴板数据。
然后试着构造一个相同的结构塞进去，看看 QQ 能不能用。

不过因为浏览器的局限性，它只能读取一些通用的格式。如果想要完整的剪贴板数据，可以 AI 用 win/mac 原生 API 写个工具。
有些软件除了公共格式比如 text/html/image 等还会写入自己应用专有格式，以实现例如表情、at 人、回复等功能

设置剪贴板可以参考这个有点意思的 demo （往剪贴板写入 text/html 不对应的内容，实现纯文本输入框粘贴/富文本输入框粘贴，内容不同的效果）： https://codepen.io/zsh2517/full/WNqNBad

[co2In]

@zsh2517 好的，谢谢大佬

[rogerer]

@co2In 也不是，各个产品都是根据自己的需求去解析 HTML 代码。

[unhappy224]

大部分富文本的地方都是能解析 html 的，所以如果实在是要多张图片，可以转成 html 用 base64 传