vue后台返回二维码展示在前端页面，复制二维码到剪贴板

1.二维码渲染
vue请求，后端返回二维码，在请求时加上 responseType: ‘blob’

export function getQrCode(query) {
    return request({
        url: 'xx',
        method: 'get',
        params: query,
        responseType: 'blob'
    });
}

后台返回的数据会被强制转为blob类型,定义一个url去存储处理过后的图片数据

getQrCode(params).then((res) => {
         const blob = new Blob([res]);
         this.url = window.URL.createObjectURL(blob);
 }

页面上用img标签渲染

 <img  ref="vcImg" style="width: 200px;height: 200px" :src="url" />

2.二维码复制到粘贴板
这用到了插件Clipboard
首先安装插件

npm install --save clipboard

在需要的页面上import引入(使用教程很多，我这里不过多阐述）https://blog.csdn.net/weixin_45439379/article/details/111942258这位博主写的很详细

import clipboard from 'clipboard'

因为图片返回的是个二进制流，如果直接使用clipboard.write复制是空白甚至报错，所以要加一个方法对图片进行处理（copy_jpg方法），如果需要复制的图片是png格式的话可以直接使用clipboardImg(),把图片的地址传进去就好。
图片中的代码是这位博主的

https://blog.csdn.net/yyznm/article/details/121432397

关于clipboard的使用，阮一峰老师写的很全（地址奉上）

https://www.ruanyifeng.com/blog/2021/01/clipboard-api.html
这个问题困扰了我两天，img标签中是本地的图片和路径为https的图片(这里我测试的图片也都是png格式的)都可以用clipboard.write方法复制到粘贴板上，返回的二维码死活不可以，明明页面上已经渲染出来了，百度了终于在大佬这里找到了解决方案。
笔记只是为了记录一下遇到的问题，文中出现的链接如有侵权，联系删除