前端下载文件的几种方式

迷南。 2024-02-06 06:19 66阅读 0赞

###  ###

#### 前言 ####

实习一个人负责一个管理系统的前端部分。其中，就有前端下载文件的需要。最终采用的是使用`axios`发送`get`请求的方式，因为需要携带`token`。但是，不应该只注重结果，也应该注重过程，不然可能一直都是拧螺丝。另外提一嘴，找工作最好还是找能去的最大的公司，虽然小公司也能学到东西，但是因为制度不完善的缘故，可能会被不好的小公司坑，问就是一行泪。(去的小公司开始对实习生下手了，甚至有请假回去答辩时被背刺的)

#### a链接 ####

##### 极简版本 #####

实际上，如果a链接的`href`就是指向文件的地址的话，是可以直接下载的。这种方式下载的文件名就是原本的文件名。

![image-20220430181604786][]

##### 自定义文件名 #####

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

上面不能实现重命名？

这是因为通过`download`属性来实现对下载的文件进行重命名需要是同源路径下。

换成同源路径后，就能实现自定义文件名了

![image-20220430183758385][]

##### 动态添加a标签 #####

在上面的例子中，我们是通过点击a标签来实现下载文件的。但是，实际上，我们也可以通过动态添加a标签的形式来实现。

<button οnclick="download()">下载文件</button>
    
    <script>
      function download() {
        const a = document.createElement('a')
        a.href = '/test.xlsx'
        a.download = 'clz.xlsx'
        a.click()
      }
    </script>

结果和上面一样

#### 指定location的href ####

通过指定`location`对象的`href`属性，就可以在当前页面打开URL页面，其实就和上面a链接的极简版本一样效果。

<button οnclick="download()">下载文件</button>
    
    <script>
      function download() {
        window.location.href = '/test.xlsx'
      }
    </script>

无法重命名

#### window.open ####

打开指定的页面的URL

<button οnclick="download()">下载文件</button>
    
    <script>
      function download() {
        window.open('/test.xlsx')
      }
    </script>

无法重命名

#### axios ####

因为下载文件其实就相当于发起get请求，所以可以使用axios来发起请求，这样子就能够很方便地携带token等信息。

**因为是下载文件，所以响应类型应该是`blob`，用来存取二进制数据**

<button οnclick="download()">下载文件</button>
    
    <script>
      function download() {
        axios({
          url: "/test.xlsx",
          method: 'GET',
          responseType: 'blob',     // 用来存取二进制数据
          headers: {
            token: 'testtest'     // 可以携带token
          }
        }).then(res => {
          console.log(res)
        })
      }
    </script>

![image-20220430212722930][]

不过，此时并没有下载文件，因为此时是二进制数据。

![image-20220430212915220][]

所以，我们还需要将二进制数据变成文件下载。

那么，怎么将二进制数据变成文件呢？

这里在网上找到一个方法，就是通过`URL.createObjectURL`方法，生成对应二进制数据`blob`对象的URL，然后通过动态添加a标签的方法，来实现生成文件。

<button οnclick="download()">下载文件</button>
    
      <script>
        function download() {
          axios({
            url: "/test.xlsx",
            method: 'GET',
            responseType: 'blob',
            headers: {
              token: 'testtest'     // 可以携带token
            }
          }).then(res => {
    
    
            const href = URL.createObjectURL(res.data)
            // console.log(href)
    
            const a = document.createElement('a')
            a.download = 'clz.xlsx'
            a.href = href
    
            a.click()
          })
        }
      </script>

将二进制数据变成文件也可以通过`FileReader`的`readAsDataURL`来实现，该方法读取`blob`对象或`file`对象。读取成功后，能够通过`onload`回调函数中通过实例对象的`target`属性下的`result`属性中获取base64编码的URL。

const reader = new FileReader()
    
    reader.readAsDataURL(res.data)
    
    reader.onload = (e) => {
      console.log(e)
    
      const a = document.createElement('a')
      a.download = 'clz.xlsx'
      a.href = e.target.result
    
      a.click()
    }

![image-20220430215628865][]

[image-20220430181604786]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/a0667a15cc664046a2b2ae3c0d881293.png
[image-20220430183758385]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/22e56435c29e42b49de52012fa86e10c.png
[image-20220430212722930]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/f81f8183ccd44de590907e26fc7eb763.png
[image-20220430212915220]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/001c1e68d27642b09d86a9469cee6040.png
[image-20220430215628865]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/07d61ab7b704468890f03974f78dc39c.png