前端下载文件的几种方式使用Blob下载文件

通用方法：a链接

在前端下载文件是个很通用的需求，一般后端会提供下载的方式有两种： 1.直接返回文件的网络地址（一般用在静态文件上，比如图片以及各种音视频资源等） 2.返回文件流（一般用在动态文件上，比如根据前端选择，导出不同的统计结果 excel 等）

我们可以通过download属性，可以实现对下载的文件进行重命名。

<a href="https://www.wubin.work.pdf" download="附件.pdf">下载文件</a>

还可以使用编程式的写法：

<script>
  function Download() {
    window.location.href = 'www.wubin.pdf'
  }
</script>

<script>
  function Download() {
    window.open('www.wubin.pdf')
  }
</script>

注意：在使用window.open的时候在除Google Chrome 浏览器会拦截内容但在其他浏览器是可以直接下载的

• 如果要想Google Chrome 设置里面更改

使用blob文件流下载

  <script>
    function Download() {
      axios({
        url: "www.wubin.pdf",
        method: 'GET',
        responseType: 'blob', // 这里就是转化为blob文件流
        headers: {
          token: 'sss'     // 可以携带token
        }
      }).then(res => {
        const href = URL.createObjectURL(res.data)
        const box = document.createElement('a')
        box.download = '附件.pdf'
        box.href = href
        box.click()
      })
    }
  </script>

下面封装了一个 blob的方法逻辑 感兴趣的可以参考一下

 // 下载
  const DownloadFile = (row: any) => {
    contractApi
      .xxxApi({ fullFileName: row.filePath })
      .then((blob: any) => {
        row.fileFormat = row.filePath.split('.')[row.filePath.split('.').length - 1]
        download(blob, row.fileFormat, row.fileName)
      })
  }

export function download(file: any, fileType: string, fileName?: string) {
  const blob = new Blob([file], { fileType})
  const downloadElement = document.createElement('a')
  const href = window.URL.createObjectURL(blob) // 创建下载的链接
  downloadElement.href = href
  downloadElement.download = fileName // 下载后文件名
  document.body.appendChild(downloadElement)
  downloadElement.click() // 点击下载
  document.body.removeChild(downloadElement) // 下载完成移除元素
  window.URL.revokeObjectURL(href) // 释放掉blob对象
}