前端将后端返回的文件流转成url

// 将返回的流数据转换为url
export function getObjectURL(file, type) {
  return window.URL.createObjectURL(new Blob([file], { type }))
}

// base64转url
export function base64ToUrl(data, type) {
  let base64 = data
  let bstr = atob(base64)
  let n = bstr.length
  let u8arr = new Uint8Array(n)
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n)
  }
  //确定解析格式
  let blob = new Blob([u8arr], { type:'application/pdf;chartset=UTF-8' })
  let url = window.URL.createObjectURL(blob)
  return url
}

this.pdfUrl = getObjectURL(res.data, 'application/pdf;chartset=UTF-8')

返回的数据格式:
在这里插入图片描述

效果图:
在这里插入图片描述

  • 2
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
后端返回文件流后,前端可以通过以下几种方式实现文件下载导出: 1. 使用`<a>`标签的`download`属性:可以在前端创建一个`<a>`标签,将后端返回文件流作为链接的`href`属性值,并设置`download`属性为文件名,这样点击该链接时,浏览器会自动下载文件。 ```html <a href="后端返回文件URL" download="文件名">点击下载</a> ``` 2. 使用`window.open()`方法:可以使用JavaScript的`window.open()`方法打开一个新的窗口,并将后端返回文件URL作为参数传递给该方法,浏览器会自动下载文件。 ```javascript window.open("后端返回文件URL"); ``` 3. 使用`XMLHttpRequest`对象:可以使用JavaScript的`XMLHttpRequest`对象发送GET请求,将后端返回文件流作为响应内容,然后通过创建`Blob`对象和`URL.createObjectURL()`方法将文件流转换为可下载的URL,最后使用`<a>`标签的`download`属性进行下载。 ```javascript var xhr = new XMLHttpRequest(); xhr.open("GET", "后端返回文件URL", true); xhr.responseType = "blob"; xhr.onload = function() { if (xhr.status === 200) { var blob = xhr.response; var url = URL.createObjectURL(blob); var a = document.createElement("a"); a.href = url; a.download = "文件名"; a.click(); } }; xhr.send();``` 请注意,以上方法中的"后端返回文件URL"需要替换为实际的后端返回文件流的URL,"文件名"需要替换为实际的文件名。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值