vue+django实现下载文件

梦里梦外; 2022-10-30 13:24 277阅读 0赞

# 一、概述 #

在项目中，点击下载按钮，就可以下载文件。

传统的下载链接一般是get方式，这种链接是公开的，可以任意下载。

在实际项目，某些下载链接，是私密的。必须使用post方式，传递正确的参数，才能下载。

# 二、django项目 #

本环境使用django 3.1.5，新建项目download\_demo

![ea5cd9f40f75221627f41ca5522c21fb.png][]

安装模块

pip3 install djangorestframework django-cors-headers

修改文件download\_demo/settings.py

INSTALLED_APPS = [
        'django.contrib.admin',
        'django.contrib.auth',
        'django.contrib.contenttypes',
        'django.contrib.sessions',
        'django.contrib.messages',
        'django.contrib.staticfiles',
        'api.apps.ApiConfig',
        'corsheaders',  # 注册应用cors
    ]

注册中间件

MIDDLEWARE = [
        'django.middleware.security.SecurityMiddleware',
        'django.contrib.sessions.middleware.SessionMiddleware',
        'django.middleware.common.CommonMiddleware',
        'django.middleware.csrf.CsrfViewMiddleware',
        'django.contrib.auth.middleware.AuthenticationMiddleware',
        'django.contrib.messages.middleware.MessageMiddleware',
        'django.middleware.clickjacking.XFrameOptionsMiddleware',
        'corsheaders.middleware.CorsMiddleware',  # 注册组件cors
    ]

最后一行增加

# 跨域增加忽略
    CORS_ALLOW_CREDENTIALS = True
    CORS_ORIGIN_ALLOW_ALL = True
    
    CORS_ALLOW_METHODS = (
        'GET',
        'OPTIONS',
        'PATCH',
        'POST',
        'VIEW',
    )
    
    CORS_ALLOW_HEADERS = (
        'XMLHttpRequest',
        'X_FILENAME',
        'accept-encoding',
        'authorization',
        'content-type',
        'dnt',
        'origin',
        'user-agent',
        'x-csrftoken',
        'x-requested-with',
        'Pragma',
    )

修改download\_demo/urls.py

from django.contrib import admin
    from django.urls import path
    from api import views
    
    urlpatterns = [
        path('admin/', admin.site.urls),
        path('download/excel/', views.ExcelFileDownload.as_view()),
    ]

修改api/views.py

from django.shortcuts import render,HttpResponse
    from download_demo import settings
    from django.utils.encoding import escape_uri_path
    from django.http import StreamingHttpResponse
    from django.http import JsonResponse
    from rest_framework.views import APIView
    from rest_framework import status
    import os
    
    class ExcelFileDownload(APIView):
        def post(self,request):
            print(request.data)
            # filename = "大江大河.xlsx"
            filename = request.data.get("filename")
            download_file_path = os.path.join(settings.BASE_DIR, "upload",filename)
            print("download_file_path",download_file_path)
    
            response = self.big_file_download(download_file_path, filename)
            if response:
                return response
    
            return JsonResponse({
          'status': 'HttpResponse', 'msg': 'Excel下载失败'})
    
        def file_iterator(self,file_path, chunk_size=512):
            """
            文件生成器,防止文件过大，导致内存溢出
            :param file_path: 文件绝对路径
            :param chunk_size: 块大小
            :return: 生成器
            """
            with open(file_path, mode='rb') as f:
                while True:
                    c = f.read(chunk_size)
                    if c:
                        yield c
                    else:
                        break
    
        def big_file_download(self,download_file_path, filename):
            try:
                response = StreamingHttpResponse(self.file_iterator(download_file_path))
                # 增加headers
                response['Content-Type'] = 'application/octet-stream'
                response['Access-Control-Expose-Headers'] = "Content-Disposition, Content-Type"
                response['Content-Disposition'] = "attachment; filename={}".format(escape_uri_path(filename))
                return response
            except Exception:
                return JsonResponse({
          'status': status.HTTP_400_BAD_REQUEST, 'msg': 'Excel下载失败'},
                                    status=status.HTTP_400_BAD_REQUEST)

在项目根目录创建upload文件

![cf59a6630767a316f51b69495db1cbc8.png][]

里面放一个excel文件，比如：大江大河.xlsx

# 三、vue项目 #

新建一个vue项目，安装ElementUI 模块即可。

新建test.vue

<template>
      <div style="width: 70%;margin-left: 30px;margin-top: 30px;">
        <el-button class="filter-item" type="success" icon="el-icon-download" @click="downFile()">下载</el-button>
      </div>
    </template>
    
    <script>
      import axios from 'axios'
    
      export default {
        data() {
          return {
          }
        },
        mounted: function() {
    
        },
        methods: {
          downloadFile(url, options = {}){
            return new Promise((resolve, reject) => {
              // console.log(`${url} 请求数据，参数=>`, JSON.stringify(options))
              // axios.defaults.headers['content-type'] = 'application/json;charset=UTF-8'
              axios({
                method: 'post',
                url: url, // 请求地址
                data: options, // 参数
                responseType: 'blob' // 表明返回服务器返回的数据类型
              }).then(
                response => {
                  // console.log("下载响应",response)
                  resolve(response.data)
                  let blob = new Blob([response.data], {
                    type: 'application/vnd.ms-excel'
                  })
                  // console.log(blob)
                  // let fileName = Date.parse(new Date()) + '.xlsx'
                  // 切割出文件名
                  let fileNameEncode = response.headers['content-disposition'].split("filename=")[1];
                  // 解码
                  let fileName = decodeURIComponent(fileNameEncode)
                  // console.log("fileName",fileName)
                  if (window.navigator.msSaveOrOpenBlob) {
                    // console.log(2)
                    navigator.msSaveBlob(blob, fileName)
                  } else {
                    // console.log(3)
                    var link = document.createElement('a')
                    link.href = window.URL.createObjectURL(blob)
                    link.download = fileName
                    link.click()
                    //释放内存
                    window.URL.revokeObjectURL(link.href)
                  }
                },
                err => {
                  reject(err)
                }
              )
            })
          },
          // 下载文件
          downFile(){
            let postUrl= "http://127.0.0.1:8000/download/excel/"
            let params = {
              filename: "大江大河.xlsx",
            }
            // console.log("下载参数",params)
            this.downloadFile(postUrl,params)
          },
        }
      }
    </script>
    
    <style>
    </style>

注意：这里使用post请求，并将filename传输给api，用来下载指定的文件。

访问测试页面，点击下载按钮

![594f640521f037bed3c1568759d1da86.png][]

就会自动下载

![7d0b339ddb567f1443d7b772e8b8b6cc.png][]

打开工具栏，查看响应信息

![d6ea77b6bf0aec3e4cf7f1366c1f4d6e.png][]

这里，就是django返回的文件名，浏览器下载保存的文件名，也是这个。

遇到中文，会进行URLcode编码。

所以在vue代码中，对Content-Disposition做了切割，得到了文件名。

[ea5cd9f40f75221627f41ca5522c21fb.png]: /images/20221024/67fc6e7f19b0464d8a3bb42fefc144f5.png
[cf59a6630767a316f51b69495db1cbc8.png]: /images/20221024/eb385b189dd34be5ae0e6e882969ad77.png
[594f640521f037bed3c1568759d1da86.png]: /images/20221024/1298145f85f14ac0a6f0fba19c4e6dc5.png
[7d0b339ddb567f1443d7b772e8b8b6cc.png]: /images/20221024/e6ee5f14497d4f0f81fdfcbb78397ea4.png
[d6ea77b6bf0aec3e4cf7f1366c1f4d6e.png]: /images/20221024/bb5b210a11ce4ad88e9a5c6b570264ac.png