vue+django实现下载文件的示例

Vue是一种流行的JavaScript框架，用于构建用户界面。Django是一个用于构建Web应用程序的Python框架。使用这两种框架可以很容易地实现文件下载的功能。

首先，在Django中，你需要创建一个视图函数来处理文件下载的请求。你可以使用Python的内置模块`open`来打开文件，并将其内容发送给浏览器。具体代码如下：

from django.http import FileResponse
import os

def download_file(request):
    file_path = '/path/to/your/file.pdf'  # 文件路径
    file_name = os.path.basename(file_path)  # 获取文件名

    response = FileResponse(open(file_path, 'rb'), as_attachment=True)
    response['Content-Disposition'] = f'attachment; filename="{file_name}"'

    return response

在Vue中，你可以创建一个按钮或链接来触发文件下载的请求。使用`axios`库来发起HTTP请求并下载文件。具体代码如下：

<template>
  <div>
    <button @click="downloadFile">下载文件</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  methods: {
    downloadFile() {
      axios({
        url: 'http://your-api-url/download',
        method: 'GET',
        responseType: 'blob',  // 必须设置为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>

以上是一个简单的示例，演示了如何在Vue和Django中实现文件下载的功能。当用户点击“下载文件”按钮时，Vue将发送一个HTTP请求到Django后端，后端会返回文件的内容，然后前端利用Blob对象创建一个URL，最终通过创建一个a标签实现文件下载。