前端文件下载

180 阅读1分钟

下载文件

  • 此方法有弊端
    • 当文件过大或者网速过慢时,等待时过长
    • 接口返回的内容会先存在浏览器中,等接口掉完后再去生成一个临时url,由a标签触发下载
const res = await fetch('请求地址')//向浏览器发起一个请求
//new Bolb() 处理返回的数据
const bolb=await  res.bolb()
//创建一个临时url,对象表示指定的File对象或Bolb对象
let url =URL.createObjectURL(blob)
//请求文件,触发浏览器下载
const link =document.createElement("a")
link.href=url//给a标签添加一个临时的url
link.download='文件名.文件格式'//给a标签设置一个download属性,
link.click()//触发a标签下载
URL.revokeObjectURL(url)//接触url与bolb的绑定

fetch()

第二参数,配置对象
cosnt res=await fetch(url,{
method:'post',
headers:{
'xxx':'xxxx'
},
body:'xxxx'
})
  • method:Http请求方法,POST,GET,DELETE,PUT等在此设置
  • headers:一个对象,用来定制HTTP请求标头
  • body:POST请求数据