Vue 3 前端下载文件夹：使用 axios 获取接口数据并下载 ZIP 文件

{ "title": "Vue 3 前端下载文件夹：使用 axios 获取接口数据并下载 ZIP 文件", "description": "本文介绍如何使用 Vue 3 前端框架，通过 axios 获取后端接口数据并下载 ZIP 文件，包括接口请求、数据处理、Blob 对象转换、创建下载链接等步骤。", "keywords": "Vue 3, 文件下载, axios, ZIP 文件, Blob, 下载链接, 前端开发", "content": "在前端使用 Vue 3 接受这个接口的数据并下载文件，可以按照以下步骤进行操作：\n\n1. 在 Vue 3 项目中创建一个方法来发送请求并接收数据。\n\njavascript\nimport axios from 'axios';\n\nmethods: {\n downloadFolder() {\n axios.get('/api/downloadFolder', {\n responseType: 'blob' // 设置响应类型为二进制数据\n })\n .then(response => {\n this.saveFile(response.data);\n })\n .catch(error => {\n console.error(error);\n });\n },\n saveFile(data) {\n const blob = new Blob([data], { type: 'application/octet-stream' });\n const url = URL.createObjectURL(blob);\n const link = document.createElement('a');\n link.href = url;\n link.setAttribute('download', '7月税务信息.zip');\n document.body.appendChild(link);\n link.click();\n document.body.removeChild(link);\n }\n}\n\n\n2. 在 Vue组件中调用downloadFolder方法，例如在模板中添加一个按钮。\n\nhtml\n<template>\n <button @click="downloadFolder">下载文件</button>\n</template>\n\n\n这样，当按钮被点击时，前端会发送请求到后端接口/api/downloadFolder，后端会生成一个ZIP文件并返回给前端。前端通过saveFile方法将接收到的二进制数据转换为Blob对象并创建下载链接，最后模拟点击链接进行文件下载。"}