前端如何处理后端返回的二维码数据

后端返回的是一段二进制码，那前端就需要处理后端返回的数据，展示出二维码的图片效果

处理二进制码可以通过blob

const blob = new Blob(['调用后端接口返回的数据'], { type: 'image/jpeg' })

可以看一下官网Blob：

BLOB (binary large object)，二进制大对象，是一个可以存储二进制文件的容器。在计算机中，BLOB常常是数据库中用来存储 的字段类型。BLOB是一个大文件，典型的BLOB是一张图片或一个声音文件，由于它们的尺寸，必须使用特殊的方式来处理（例如：上传、下载或者存放到一个数据库）。

这里有很详细的blob转文件的所有类型下载，大家有需要可以看看 [Vue使用new Blob()实现不同类型的文件下载功能_vue.js_脚本之家

这篇文章主要给大家介绍了关于Vue使用new Blob()实现不同类型的文件下载功能的相关资料,在Vue项目中,经常用Blob二进制进行文件下载功能,需要的朋友可以参考下

“Vue使用new Blob()实现不同类型的文件下载功能_vue.js_脚本之家”)

再来说一说URL.createObjectURL :URL.createObjectURL()方法会根据传入的参数创建一个指向该 的URL. 这个URL的生命仅存在于它被创建的这个文档里. 新的对象URL指向执行的File对象或者是Blob对象.

简单来说，这个对象就是将Blob对象或者File对象转化为url仅供当前文件内使用,在我们有需要看图片，或者下载文件的时候就需要用到

有URL.createObjectURL那必须也得有URL.revokeObjectURL()：

URL.revokeObjectURL()方法会释放一个通过URL.createObjectURL()创建的对象URL. 当你要已经用过了这个对象URL,然后要让浏览器知道这个URL已经不再需要指向对应的文件的时候,就需要调用这个方法.

具体的js方法如下

接口方法名.then(response => {
  const blob = new Blob([response.data])
  // 获取文件名称
  const excelName = response.headers['content-disposition'].split('=')[1]
  if ('download' in document.createElement('a')) {
   // 非IE下载
   const elink = document.createElement('a')
   elink.download = decodeURI(excelName)
   elink.style.display = 'none'
   elink.href = URL.createObjectURL(blob)
   document.body.appendChild(elink)
   elink.click()
   URL.revokeObjectURL(elink.href) // 释放URL 对象
   document.body.removeChild(elink)
  } else {
   // IE10+下载
   navigator.msSaveBlob(blob, decodeURI(excelName))
  }
})