前端下载文件

对于浏览器不能直接打开的文件

• 使用a标签，添加download属性，就可以下载

<a url="" download />

• 这种方法现在只适合部分浏览器，有些浏览器可能并不适用，并且对于浏览器能直接打开的文件，例如图片，pdf,mp3,mp4,等，不会下载，而是会新开一个页面，直接打开

适用Blob 转换再下载

  function download(url:string, name: string) {
    axios({
      method: 'get',
      url: url,
      data: {},
      responseType: 'blob'
    }).then((res:any) => {
      let data:any = res
      if(!data) return
      let newUrl = window.URL.createObjectURL(new Blob([data]))
      let a = document.createElement('a')
      a.style.display = 'none'
      a.href = newUrl
      a.setAttribute('download', name)
      document.body.appendChild(a)
      a.click() //执行下载
      window.URL.revokeObjectURL(a.href)
      document.body.removeChild(a)
    }).catch(error => {
        console.log(error)
      })
  }

• axios，设置responseType为blob,将下载的文件转换成blob,拿到新的url,再去下载
• 这种可以下载那些不能够直接下载的文件