通过navigator.clipboard.write做兼容浏览器剪贴操作

cat2bug

已于 2024-04-18 13:47:09 修改

阅读量817

点赞数 7

文章标签： javascript vue 经验分享 safari chrome 功能测试测试工具

于 2024-04-18 13:32:40 首次发布

本文链接：https://blog.csdn.net/rohaha/article/details/137916366

版权

最近在做Cat2Bug的Bug分享功能，就是将Bug信息保存成图片后，复制到剪贴板中，本以为很简单的一段代码就能搞定，谁知在Safari浏览器上，总是提示：

Unhandled Promise Rejection: NotAllowedError: The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.

这就是库克在点我：“苹果不是什么人都用得起的～～”。之后我试了一下目前市面可见的所有开源剪贴板库，惊奇的发现没有一个可以解决此问题的，真是应了那句话：“从来就没有什么救世主，也不靠神仙皇帝！要创造人类的幸福，全靠我们自己！”，所以最终方案还是得自己研究，还是要通过原生Clipboard API来处理。由于人生匆匆，下面直接说下解决方案。

复制文字（navigator.clipboard.writeText）的处理方式注意点

最外层套一下setTimeout，代码如下:

setTimeout(()=>{
	navigator.clipboard.writeText('hello world');
},0);

复制图片（navigator.clipboard.write）的处理方式注意点

同样外层要套一下setTimeout；
在write方法的参数中，已[new ClipboardItem]数组的形式传参；
image/png选项要通过new Promise实现；
所有处理的数据，要放到new Promise中，不要放到外面；

setTimeout(()=>{
	navigator.clipboard.write([
        new ClipboardItem({
          'image/png': new Promise(async (resolve) => {
            // TODO 处理你的blob数据
            resolve(new Blob([blob], {type: 'image/png'}));
          }),
        })
      ]);
},0);

以上示例代码看似简单，都是笔者访名师撸大腰，日日夜夜尝试了无数次的结果，并将注意点和精华记录下来，希望对各位道友有所帮助。如果有朋友想看看具体代码和实际应用，可以下载我的源码工程：https://gitee.com/cat2bug/cat2bug-platform，其中

src/components/ShareCard/DefectShareCard/TextDefectShareCard.vue中的copy方法实现了向剪贴板复制文字的功能；
src/components/ShareCard/DefectShareCard/DefaultDefectShareCard.vue中的copy方法实现了向剪贴板复制图片的功能；
src/components/ShareCard/index.vue中的copy方法实现了调用以上两个方法的功能；

严格按照以上方法实现，在目前版本肯定可以实现兼容的剪贴板功能。

最后，给自己做个广告，望各位看官有钱的捧个钱场，不想给钱的帮我在Gitee 上收藏加星，跪拜。。