vue + axios get下载文件功能

1. 简介

Vue.js是一种渐进式JavaScript框架，它可以帮助开发人员更轻松地构建交互式的用户界面。Axios则是一个用于浏览器和Node.js的基于Promise的HTTP客户端，用于处理AJAX请求和RESTful API。本文将介绍如何结合Vue和Axios实现下载文件的功能。

1. 实现过程

首先需要在Vue项目中安装Axios。可以使用npm命令行工具进行安装：

npm install axios --save

然后，在需要下载文件的Vue组件中，可以通过以下代码导入Axios：

<script>
import axios from 'axios'

export default {
  methods: {
    downloadFile() {
      axios({
        url: 'http://example.com/download',
        method: 'GET',
        responseType: 'blob'
      }).then(response => {
        const url = window.URL.createObjectURL(new Blob([response.data]))
        const link = document.createElement('a')
        link.href = url
        link.setAttribute('download', 'file.pdf')
        document.body.appendChild(link)
        link.click()
      })
    }
  }
}
</script>

代码解析：

• 首先通过import语句导入了Axios库。
• downloadFile方法用于下载文件，当用户点击下载按钮时会触发该方法。
• 在Axios的请求中，设置了响应类型responseType为blob。
• 通过.then()方法，成功响应后将响应结果的data属性转换成Blob对象，并通过URL.createObjectURL()创建该Blob对象的URL，然后创建一个链接，将该URL设置为链接的href属性。

• 最后通过设置链接的download属性触发文件下载。

• 示例说明1

假设后端API提供了download接口，通过传递id参数来指定要下载的文件，例如：

http://example.com/download?id=1234

前端Vue组件可以通过以下方式实现文件下载：

<script>
import axios from 'axios'

export default {
  methods: {
    downloadFile(id) {
      axios({
        url: `http://example.com/download?id=${id}`,
        method: 'GET',
        responseType: 'blob'
      }).then(response => {
        const url = window.URL.createObjectURL(new Blob([response.data]))
        const link = document.createElement('a')
        link.href = url
        link.setAttribute('download', 'file.pdf')
        document.body.appendChild(link)
        link.click()
      })
    }
  }
}
</script>

代码解析：

• Axios的请求地址动态传递了一个id参数，在后台API中可以通过此id来获取要下载的文件。

• 通过创建URL.createObjectURL()方法创建Blob对象URL，下载文件并设置链接的download属性。

• 示例说明2

假设需要下载的文件是一个Excel文件，需要将响应的数据解析为Excel格式。可以借助第三方库FileSaver.js和xlsx.js实现。在Vue组件中，可以按如下方式导入库：

<script>
import axios from 'axios'
import XLSX from 'xlsx'
import FileSaver from 'file-saver'

export default {
  methods: {
    downloadExcelFile() {
      axios({
        url: 'http://example.com/download',
        method: 'GET',
        responseType: 'arraybuffer'
      }).then(response => {
        const data = new Uint8Array(response.data)
        const workbook = XLSX.read(data, { type: 'array' })
        const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' })
        const blob = new Blob([excelBuffer], { type: 'application/vnd.ms-excel' })
        FileSaver.saveAs(blob, 'report.xlsx')
      })
    }
  }
}
</script>

代码解析：

• 通过import导入axios、xlsx和FileSaver库。
• Axios的响应类型responseType设置为arraybuffer，以获取字节数组的数据。
• 创建Uint8Array对象，将从服务器返回的字节数组复制到新的Uint8Array数组中，并将其传递至XLSX.read()方法中，使其解析为Excel工作簿。
• 通过XLSX.write()方法将解析后的Excel工作簿写入数组。

• 创建Blob对象，通过FileSaver.saveAs()方法将Blob对象保存为一个Excel文件，并设置其文件名为report.xlsx。

• 总结

本文介绍了如何结合Vue和Axios实现下载文件的功能，分别通过两个实例进行了详细讲解。在开发过程中，可以根据具体需求进行调整，实现更加灵活地下载文件功能。