vue element中axios下载文件（后端Python）

下面是详细的讲解：

背景介绍

在使用Vue Element 开发时，我们常常会遇到需要通过axios发送请求来下载文件的情况。而本文将给大家介绍如何在Vue Element中通过axios下载文件，以及前后端代码示例。

步骤

步骤一：创建后端Python代码

我们首先需要在后端编写Python代码，用于向前端提供下载文件的接口。

示例代码：

from flask import Flask,send_file

app = Flask(__name__)

@app.route('/downloadfile/<path:filename>')
def download_file(filename):
    return send_file(filename, as_attachment=True)

此处我是使用了Python的Flask框架，通过Flask提供的 send_file 函数，将文件传输到前端。

在Flask路由中，我们注册了/downloadfile/路由，其接收一个文件名称 path ，并以附件形式下载文件。

步骤二：创建前端Vue Element代码

接下来，我们需要在Vue Element中通过axios请求后端，获取下载文件。示例代码如下：

<template>
  <el-button type="primary" @click="downloadfile">下载文件</el-button>
</template>

<script>
import axios from "axios"

export default {
  methods: {
    downloadfile: function() {
      axios({
        url: "/downloadfile/download.pdf",
        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", "文件名称.pdf")
        document.body.appendChild(link)
        link.click()
      })
    }
  }
}
</script>

在Vue Element中，我们通过注册一个下载文件的方法 downloadfile，在该方法中通过axios向后端发送一个 GET 请求，并设置 responseType 为 blob，即响应的数据格式为二进制流，用于下载文件。

响应成功后，我们使用 window.URL.createObjectURL 方法将响应数据转化为一个 Blob 对象，再通过创建一个 a 标签 link，并设置其 href 属性为这个 Blob 对象的 URL。最后添加 link 到 body 标签中，并调用 link.click() 方法进行下载文件。