VUE+ElementUI下载文件的几种方式(小结)

下面我就来讲解一下“VUE+ElementUI下载文件的几种方式(小结)”这篇文章的完整实例教程，具体内容如下。

1. 示例说明

该篇文章主要介绍了VUE+ElementUI下载文件的几种方式，并提供了完整的代码实例。以下我们就以其中的两种方式为例来作为示例，分别是axios和原生JavaScript实现。

2. axios下载文件示例

首先，我们要安装axios这个库，可以通过npm来进行安装，命令如下：

npm install axios --save

接下来，我们编写下载文件的方法，代码如下：

download() {
  axios({
    method: 'get',
    url: 'http://localhost:8080/file/download',
    responseType: 'blob'
  }).then(res => {
    const content = res.data
    const blob = new Blob([content])
    const fileName = res.headers['content-disposition'].split('=')[1]
    if ('download' in document.createElement('a')) {
      const elink = document.createElement('a')
      elink.download = fileName
      elink.style.display = 'none'
      elink.href = URL.createObjectURL(blob)
      document.body.appendChild(elink)
      elink.click()
      URL.revokeObjectURL(elink.href)
      document.body.removeChild(elink)
    } else {
      navigator.msSaveBlob(blob, fileName)
    }
  })
}

以上代码中，我们通过axios发送了一个GET请求，获取到了文件的二进制数据，并将其转化成了Blob对象。接着我们利用createElement方法创建一个a标签，并将其style.display设置为了“none”，同时设置其href为我们刚刚获取到的文件的二进制数据，并将其添加到了body元素中。

接着我们使用click方法来模拟点击下载这个a标签，这样就可以实现文件下载了。最后我们还需要通过revokeObjectURL方法来释放掉URL对象，同时从body中移除这个a标签。

3. 原生JavaScript下载文件示例

下面我们来看一下利用原生JavaScript来下载文件的实现方式。代码如下：

download() {
  const xhr = new XMLHttpRequest()
  xhr.open('GET', 'http://localhost:8080/file/download', true)
  xhr.responseType = 'blob'
  xhr.onload = () => {
    if (xhr.status === 200) {
      const blob = xhr.response
      const fileName = xhr.getResponseHeader('content-disposition').split('=')[1]
      if ('download' in document.createElement('a')) {
        const elink = document.createElement('a')
        elink.download = fileName
        elink.style.display = 'none'
        elink.href = window.URL.createObjectURL(blob)
        document.body.appendChild(elink)
        elink.click()
        window.URL.revokeObjectURL(elink.href)
        document.body.removeChild(elink)
      } else {
        navigator.msSaveBlob(blob, fileName)
      }
    }
  }
  xhr.send()
}

以上代码中，我们利用XMLHttpRequest对象来进行文件下载，通过设置responseType属性为“blob”来获取文件的二进制数据，接着通过创建一个a标签，将其href设置为获取到的文件的二进制数据，在最后进行模拟点击操作，以完成文件的下载。

4. 总结

通过以上两个示例可以看出，实现文件下载可以使用axios和原生JavaScript两种方式来实现，通过利用Blob对象和createElement方法创建一个a标签，再利用click方法进行模拟点击，就可以达到文件下载的效果。需要注意的是，在文件下载结束后，一定要利用revokeObjectURL方法来释放掉URL对象，这样才能避免内存泄漏问题的出现。