如何用Vue和Django实现一个长尾词的文件下载功能？

本文共计706个文字，预计阅读时间需要3分钟。

一、概述在项目中，点击下载按钮即可下载文件。传统的下载链接一般采用GET方式，这种链接是公开的，可以任意下载。但在实际项目中，某些下载链接是保密的，需要使用POST方式下载。

二、下载按钮点击下载按钮，即可下载文件。

三、下载链接

1.传统的下载链接通常采用GET方式，例如：http://example.com/file.zip

2.保密的下载链接需要使用POST方式，例如：http://example.com/download?token=123456

四、POST方式下载

使用POST方式下载保密文件，需要在请求中包含相应的参数，例如：POST /download HTTP/1.1Host: example.comContent-Type: application/x-www-form-urlencoded

token=123456

一、概述

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

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

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

二、django项目

本环境使用django 3.1.5，新建项目download_demo

安装模块

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.127.0.0.1:8000/download/excel/" let params = { filename: "大江大河.xlsx", } // console.log("下载参数",params) this.downloadFile(postUrl,params) }, } } </script> <style> </style>

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

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

就会自动下载

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

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

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

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

以上就是vue+django实现下载文件的示例的详细内容，更多关于vue+django实现下载文件的资料请关注自由互联其它相关文章！