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

目录

• 一、概述
• 二、django项目
• 三、vue项目

一、概述

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

传统的下载链接一般是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 = 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):  """  文件生成器,防止文件过大，导致内存溢出  :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文件

 里面放一个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，用来下载指定的文件。 

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

就会自动下载

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

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

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

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

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

• Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法
• springboot+vue实现页面下载文件
• springboot+vue实现文件上传下载
• vue实现下载文件流完整前后端代码
• vue将文件/图片批量打包下载zip的教程
• vue-以文件流-blob-的形式-下载-导出文件操作
• 在vue中使用axios实现post方式获取二进制流下载文件(实例代码)
• vue excel上传预览和table内容下载到excel文件中
• springboot整合vue实现上传下载文件
• vue实现在线预览pdf文件和下载（pdf.js）
• vue实现点击按钮下载文件功能

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！