vue+axios实现post文件下载

下面是 vue+axios 实现 post 文件下载的攻略：

1. 前置条件

在进行 post 文件下载的功能实现之前，需要确保你已经安装了以下依赖：

• Vue.js：用于前端开发
• axios：用于网络请求
• file-saver：用于文件下载

如果还没有安装，可以使用以下命令进行安装：

npm install vue axios file-saver --save

2. 实现过程

2.1 创建 API

首先，需要在后台创建相应的 API，用于返回文件数据。以 Python Flask 框架为例，可以使用以下代码实现这个过程：

@app.route('/file/download', methods=['POST'])
def download_file():
    data = request.get_data()
    file = io.BytesIO(data)
    file.seek(0)
    return send_file(file, as_attachment=True, attachment_filename='example.txt')

这个 API 将会接收一个 POST 请求，并返回一个文件数据，以上述代码为例，接收到 POST 请求后将会创建一个内存文件，并将 POST 请求中的数据写入文件中，最后以附件的形式返回此文件。

2.2 触发下载

在前端页面中，可以使用 axios 发送一个 POST 请求，将数据和下载链接发送给后台，以触发文件下载。以下是一个示例代码：

import axios from 'axios'
import fileSaver from 'file-saver'

axios({
  url: '/file/download',
  method: 'post',
  data: fileData,
  responseType: 'blob',
}).then(response => {
  fileSaver.saveAs(response.data, 'example.txt')
}).catch(error => {
  console.error(error)
})

在上述代码中，首先使用 axios 发送一个 POST 请求，请求链接为 /file/download，并将要下载的文件数据作为请求体发送出去。responseType 的设置为 blob，表示后台返回的数据类型为二进制数据。发送成功后，将会返回一个响应，其中的 response.data 表示从后台返回的二进制数据，需要使用 file-saver 将其保存下来。

2.3 解决乱码问题

有时候，文件中可能会包含一些非 ASCII 码字符，这样在前端下载后会出现乱码问题。为了解决这个问题，需要在后台将数据转换为二进制数据，并在前端的 axios 请求中添加 responseType: 'blob' 的配置项。在下载文件时，需要使用 file-saver 的 saveAs 方法，将后台返回的二进制数据保存下来。

3. 示例说明

以下提供两个示例，分别是 Python Flask 和 Java Spring Boot 后端实现文件下载 API 的示例代码。

3.1 Python Flask 后端示例

from flask import Flask, request, send_file
import io

app = Flask(__name__)

@app.route('/file/download', methods=['POST'])
def download_file():
    data = request.get_data()
    file = io.BytesIO(data)
    file.seek(0)
    return send_file(file, as_attachment=True, attachment_filename='example.txt')

if __name__ == '__main__':
    app.run()

3.2 Java Spring Boot 后端示例

@RestController
@RequestMapping("/file")
public class FileController {

    @PostMapping("/download")
    public ResponseEntity<byte[]> downloadFile(@RequestBody byte[] data) {
        HttpHeaders headers = new HttpHeaders();
        headers.setContentType(MediaType.APPLICATION_OCTET_STREAM);
        headers.setContentDisposition(ContentDisposition.attachment().filename("example.txt").build());
        return new ResponseEntity<>(data, headers, HttpStatus.OK);
    }

}

以上就是 vue+axios 实现 post 文件下载的完整攻略。希望能够对你有所帮助！