vue+axios实现文件下载及vue中使用axios的实例

Vue.js 是一个流行的前端框架，而 Axios 是一个基于 promise 的 HTTP 库，可以在浏览器和 Node.js 中使用。在 Vue 中集成 Axios 可以方便地处理 HTTP 请求，包括文件的下载。下面将详细介绍如何使用 Vue 和 Axios 实现文件下载，以及在 Vue 项目中配置 Axios 的方法。 ### 文件下载流程 1. **接口准备**：你需要与后端开发人员协调，确保他们提供的接口已经正确设置了响应头（`response header`），特别是 `Content-Type` 和 `Content-Disposition`。通常，用于下载的接口会返回文件流，`Content-Type` 设置为文件类型，如 `application/vnd.openxmlformats-officedocument.spreadsheetml.sheet` 对于 Excel 文件，`Content-Disposition` 设置为 `attachment; filename=yourfilename.xlsx`，指示浏览器以附件形式下载。 2. **配置 Axios**：在 Vue 中发送文件下载请求时，需要将 Axios 的 `responseType` 配置为 `blob`。这是因为 Blob 数据类型可以用来处理二进制数据，如文件。以下是一个示例： ```javascript axios({ method: 'post', url: 'api/user/', data: { firstName: 'Fred', lastName: 'Flintstone' }, responseType: 'blob', }).then(response => { this.download(response) }).catch((error) => {}) ``` 3. **处理响应**：当请求成功后，`then` 回调函数中的 `response` 参数包含了文件数据。此时，你可以创建一个新的 Blob 对象，并利用创建的 `a` 标签模拟点击下载。在 Vue 组件中，你可以定义一个 `download` 方法来处理这个过程： ```javascript methods: { download(data) { if (!data) return; let url = window.URL.createObjectURL(new Blob([data])); let link = document.createElement('a'); link.style.display = 'none'; link.href = url; link.setAttribute('download', 'excel.xlsx'); document.body.appendChild(link); link.click(); // 记得在文件下载完成后释放 URL 对象 setTimeout(() => { window.URL.revokeObjectURL(url); }, 0); } } ``` ### Vue 中配置 Axios 1. **安装 Axios**：在 Vue 项目中，你可以通过 npm 安装 Axios： ``` npm install axios --save ``` 2. **创建 Axios 实例**：为了在 Vue 中更好地管理 Axios，通常会在项目中创建一个单独的配置文件，如 `api/index.js`。在这个文件中，你可以定义 Axios 实例并设置基础 URL、请求头、处理请求和响应的转换函数等。以下是一个示例： ```javascript import axios from 'axios'; let http = axios.create({ baseURL: 'http://localhost:8080/', withCredentials: true, headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8', }, transformRequest: [function (data) { let newData = ''; for (let k in data) { if (data.hasOwnProperty(k) === true) { newData += encodeURIComponent(k) + '=' + encodeURIComponent(data[k]) + '&'; } } return newData; }], }); function apiAxios(method, url, params, response) { http({ method: method, url: url, data: method === 'POST' || method === 'PUT' ? params : null, params: method === 'GET' || method === 'DELETE' ? params : null, }) .then(function (res) { response(res); }) .catch(function (err) { response(err); }); } export default { get: function (url, params, response) { return apiAxios('GET', url, params, response); }, post: function (url, params, response) { return apiAxios('POST', url, params, response); }, put: function (url, params, response) { return apiAxios('PUT', url, params, response); }, delete: function (url, params, response) { return apiAxios('DELETE', url, params, response); }, }; ``` 3. **在 Vue 组件中使用**：在 Vue 组件中，你可以导入并使用这个配置好的 Axios 实例来发送请求。例如，调用上面定义的 `get` 方法： ```javascript import api from '@/api/index.js'; export default { methods: { fetchData() { api.get('/api/data', {}, res => { console.log(res.data); }); }, }, }; ``` 通过以上步骤，你不仅可以在 Vue 中使用 Axios 实现文件下载，还可以更好地组织和管理你的 HTTP 请求。同时，通过封装 Axios 实例，你的代码会更加整洁，可维护性也会提高。