在項(xiàng)目中，點(diǎn)擊下載按鈕，就可以下載文件。

傳統(tǒng)的下載鏈接一般是get方式，這種鏈接是公開的，可以任意下載。

在實(shí)際項(xiàng)目，某些下載鏈接，是私密的。必須使用post方式，傳遞正確的參數(shù)，才能下載。

本環(huán)境使用django 3.1.5，新建項(xiàng)目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’, # 注冊(cè)應(yīng)用cors]

注冊(cè)中間件

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’, # 注冊(cè)組件cors]

最后一行增加

# 跨域增加忽略CORS_ALLOW_CREDENTIALS = TrueCORS_ORIGIN_ALLOW_ALL = TrueCORS_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 adminfrom django.urls import pathfrom api import viewsurlpatterns = [ path(’admin/’, admin.site.urls), path(’download/excel/’, views.ExcelFileDownload.as_view()),]

修改api/views.py

from django.shortcuts import render,HttpResponsefrom download_demo import settingsfrom django.utils.encoding import escape_uri_pathfrom django.http import StreamingHttpResponsefrom django.http import JsonResponsefrom rest_framework.views import APIViewfrom rest_framework import statusimport osclass 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): ''' 文件生成器,防止文件過大，導(dǎo)致內(nèi)存溢出 :param file_path: 文件絕對(duì)路徑 :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)

在項(xiàng)目根目錄創(chuàng)建upload文件

里面放一個(gè)excel文件，比如：大江大河.xlsx

新建一個(gè)vue項(xiàng)目，安裝ElementUI 模塊即可。

新建test.vue

<template> <div style='width: 70%;margin-left: 30px;margin-top: 30px;'> <el-button 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} 請(qǐng)求數(shù)據(jù)，參數(shù)=>`, JSON.stringify(options)) // axios.defaults.headers[’content-type’] = ’application/json;charset=UTF-8’ axios({ method: ’post’, url: url, // 請(qǐng)求地址 data: options, // 參數(shù) responseType: ’blob’ // 表明返回服務(wù)器返回的數(shù)據(jù)類型 }).then( response => { // console.log('下載響應(yīng)',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() //釋放內(nèi)存 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('下載參數(shù)',params) this.downloadFile(postUrl,params) }, } }</script><style></style>

注意：這里使用post請(qǐng)求，并將filename傳輸給api，用來下載指定的文件。

訪問測(cè)試頁(yè)面，點(diǎn)擊下載按鈕

就會(huì)自動(dòng)下載

打開工具欄，查看響應(yīng)信息

這里，就是django返回的文件名，瀏覽器下載保存的文件名，也是這個(gè)。

遇到中文，會(huì)進(jìn)行URLcode編碼。

所以在vue代碼中，對(duì)Content-Disposition做了切割，得到了文件名。

以上就是vue+django實(shí)現(xiàn)下載文件的示例的詳細(xì)內(nèi)容，更多關(guān)于vue+django實(shí)現(xiàn)下載文件的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！