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


Posted in Vue.js onMarch 24, 2021

一、概述

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

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

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

二、django项目

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

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

安装模块

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文件

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

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

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

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

就会自动下载

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

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

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

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

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

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

Vue.js 相关文章推荐
vue打开其他项目页面并传入数据详解
Nov 25 Vue.js
Vue3配置axios跨域实现过程解析
Nov 25 Vue.js
Vue用mixin合并重复代码的实现
Nov 27 Vue.js
详解Vue3 Teleport 的实践及原理
Dec 02 Vue.js
对vue生命周期的深入理解
Dec 03 Vue.js
Vue使用鼠标在Canvas上绘制矩形
Dec 24 Vue.js
vue3+typeScript穿梭框的实现示例
Dec 29 Vue.js
vue中axios封装使用的完整教程
Mar 03 Vue.js
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
Apr 17 Vue.js
vue实现可拖拽的dialog弹框
May 13 Vue.js
vue+springboot实现登录验证码
May 27 Vue.js
vue打包时去掉所有的console.log
Apr 10 Vue.js
vue路由实现登录拦截
vue项目实现分页效果
Mar 24 #Vue.js
vue实现倒计时功能
Mar 24 #Vue.js
vue 中 get / delete 传递数组参数方法
Mar 23 #Vue.js
使用Vue.js和MJML创建响应式电子邮件
vue+flask实现视频合成功能(拖拽上传)
Mar 04 #Vue.js
vue打开新窗口并实现传参的图文实例
Mar 04 #Vue.js
You might like
php中curl和file_get_content的区别
2014/05/10 PHP
php的XML文件解释类应用实例
2014/09/22 PHP
PHP中把有符号整型转换为无符号整型方法
2015/05/27 PHP
Yii2简单实现给表单添加验证码的方法
2016/07/18 PHP
PHP多进程编程实例详解
2017/07/19 PHP
用javascript实现读取txt文档的脚本
2007/07/20 Javascript
轻松创建nodejs服务器(1):一个简单nodejs服务器例子
2014/12/18 NodeJs
IE及IE6浏览器中判断JS文件加载成功失败的方法
2015/02/18 Javascript
js动态修改表格行colspan列跨度的方法
2015/03/30 Javascript
Javascript中函数名.length属性用法分析(对比arguments.length)
2016/09/16 Javascript
AngularJS使用ng-Cloak阻止初始化闪烁问题的方法
2016/11/03 Javascript
jQuery电话号码验证实例
2017/01/05 Javascript
node作为中间服务层如何发送请求(发送请求的实现方法详解)
2018/01/02 Javascript
Vue实现todolist删除功能
2018/06/26 Javascript
vue加载完成后的回调函数方法
2018/09/07 Javascript
Nautil 中使用双向数据绑定的实现
2019/10/02 Javascript
Vue使用NProgress的操作过程解析
2019/10/10 Javascript
ES11新增的这9个新特性,你都掌握了吗
2020/10/15 Javascript
[01:40]2014DOTA2国际邀请赛 三冰SOLO赛后采访恶搞
2014/07/09 DOTA
[52:26]完美世界DOTA2联赛决赛 FTD vs Phoenix 第一场 11.08
2020/11/11 DOTA
详解Python各大聊天系统的屏蔽脏话功能原理
2016/12/01 Python
Windows下Anaconda2安装NLTK教程
2018/09/19 Python
对Python中DataFrame选择某列值为XX的行实例详解
2019/01/29 Python
Python使用pyautocad+openpyxl处理cad文件示例
2019/07/11 Python
python基础教程之while循环
2019/08/14 Python
python解释器pycharm安装及环境变量配置教程图文详解
2020/02/26 Python
无需压缩软件,用python帮你操作压缩包
2020/08/17 Python
CSS3制作气泡对话框的实例教程
2016/05/10 HTML / CSS
美国知名奢侈美容品牌零售商:Cos Bar
2017/04/21 全球购物
Ajax主要包含了哪些技术
2014/06/12 面试题
销售员岗位职责范本
2014/02/03 职场文书
《四季》教学反思
2014/04/08 职场文书
大学团日活动新闻稿
2014/09/10 职场文书
2014年个人债务授权委托书范本
2014/09/22 职场文书
超市员工辞职信范文
2015/05/12 职场文书
2015年建筑工程工作总结
2015/05/13 职场文书