粘贴板之二维码复制

534 阅读1分钟

个人博客网站欢迎交流:萤火之森:https://blog.xkongkeji.com

说一点废话

复制网页上的二维码,并分享到的聊天工具中,是特别常见的功能。在网上找了很多资料,大部分都是坑。

解决思路

  • 使用 navigator.permissions api查询浏览器是否支持粘贴板操作
  • 使用fetch 请求二维码 文件流
  • 将文件流转化为blob
  • 使用navigator.clipboard.write 将文件blob写入粘贴板

未解决的问题

  • 粘贴板在不安全的环境中会有限制,可能导致复制失败。建议在https环境中使用
  • 老旧项目慎重CV,具有一定的兼容性问题

查询浏览器是否支持访问粘贴板权限

getAuthClipboard(): void {
    navigator.permissions.query({
      name: 'clipboard-write'
    }).then( async permissionStatus => {
      // permissionStatus.state 的值是 'granted''denied''prompt':
      if (permissionStatus.state === 'granted') {
         this.copyQRcode();
      } else {
        this.message.error('没有获得粘贴板读取权限');
        if (navigator.permissions.request) { 
        // 尝试请求获取,navigator.permissions.request API有些浏览器不支持
          navigator.permissions.request({ name: 'clipboard-write' });
        }
      }
    });
  }

复制二维码

  async copyQRcode() {
     const request = {
       method: 'get',
       headers: {
         'Content-Type': 'application/octet-stream;charset=UTF-8',
         'Authorization': StorageUtil.getLocalStorage('token'), //携带自己的token
       }
     };
     const data = await fetch(this.QRcode, request);
     const blob = await data.blob();
     await navigator.clipboard.write([
       new ClipboardItem({
         [blob.type]: blob
       })
     ]).catch(err => {
       this.message.error('复制失败');
     });
     this.message.success('复制成功');
  }