查看: 978|回复: 47

vue,js,fetch请求数据流下载文件

[复制链接]

5

主题

1

回帖

49

积分

新手上路

积分
49
发表于 2024-1-29 19:54:02 | 显示全部楼层 |阅读模式
vue,js,fetch请求数据流下载文件

假设现在有一后台API提供访问,那么要想前端进行下载head头需要设置如下类型
  1. Content-Type:application/octet-stream
复制代码

下面两个head头建议也添加一下,虽然不是必须的(注意filename后面如果有中文,需要进行urlencode,否则会报错)
  1. Access-Control-Expose-Headers:Content-Disposition
  2. Content-Disposition:attachment;filename=rename.xlsx
复制代码

前端部分:
  1. fetch('/api', function (response) {
  2.    response.blob().then((blob) => {
  3.    saveBlobAs(blob, 'result.xls')
  4.             })
  5.         }, function (result) {
  6.    console.info("获取数据失败" + result.message);
  7.         })

  8. // 保存bolb的方法
  9. function saveBlobAs (blob, filename) {
  10.    if (window.navigator.msSaveOrOpenBlob) {
  11.       navigator.msSaveBlob(blob, filename)
  12.    } else {
  13.       const anchor = document.createElement('a')
  14.       const body = document.querySelector('body')
  15.       anchor.href = window.URL.createObjectURL(blob)
  16.       anchor.download = filename

  17.       anchor.style.display = 'none'
  18.       body.appendChild(anchor)

  19.       anchor.click()
  20.       body.removeChild(anchor)

  21.       window.URL.revokeObjectURL(anchor.href)
  22.    }
  23.     }
复制代码
这样就完事了
回复

使用道具 举报

0

主题

1042

回帖

1562

积分

金牌会员

积分
1562
发表于 2024-10-10 02:40:14 | 显示全部楼层
感谢LZ分享
回复

使用道具 举报

0

主题

1074

回帖

1610

积分

金牌会员

积分
1610
发表于 2024-10-10 03:55:25 | 显示全部楼层
1111111111111111111
回复

使用道具 举报

0

主题

1040

回帖

1559

积分

金牌会员

积分
1559
发表于 2024-10-10 05:10:22 | 显示全部楼层
11111111111
回复

使用道具 举报

0

主题

1058

回帖

1586

积分

金牌会员

积分
1586
发表于 2024-10-11 07:16:10 | 显示全部楼层
66666666666666
回复

使用道具 举报

0

主题

1044

回帖

1565

积分

金牌会员

积分
1565
发表于 2024-10-21 16:22:50 | 显示全部楼层
66666666666666666
回复

使用道具 举报

0

主题

1022

回帖

1532

积分

金牌会员

积分
1532
发表于 2024-10-22 10:29:29 | 显示全部楼层
1111111111111111111
回复

使用道具 举报

26

主题

326

回帖

566

积分

高级会员

积分
566
发表于 2024-10-23 07:01:49 | 显示全部楼层
11111111111111
回复

使用道具 举报

0

主题

1084

回帖

1625

积分

金牌会员

积分
1625
发表于 2024-10-24 02:41:30 | 显示全部楼层
1111111111111111111
回复

使用道具 举报

0

主题

1034

回帖

1550

积分

金牌会员

积分
1550
发表于 2024-10-24 16:48:25 | 显示全部楼层
感谢LZ分享
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|手机版|小黑屋|九尾社区 ( 皖ICP备2021001835号 )

GMT+8, 2024-12-4 03:26 , Processed in 0.389380 second(s), 21 queries .

Powered by Discuz! X3.5

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表