python+vue实现文件下载,(导出EXCEL文件,下载.zip等文件功能)

一、公司项目需求要求导出表格数据,以excel文件导出,后端python处理已经可以直接将数据导出并生成Excel文件,但是前后台传输是不可能直接传输文件的,是以二进制文件流进行传输的,此时呢就会遇到一个问题,最后上网差对比总结,下面这个成熟且处理简单。(导出文件同方法)
二、代码:

/**
 * vue从后台获取数据,并导出EXCEL文件
 * @param value
 * @returns {*}
 * @constructor cuishao 2020.4.15
 */

export function Upexcele(value) {
  const url = window.URL.createObjectURL(value)
  const a = document.createElement('a')
  a.href = url
  a.download = 'xx信息.xls'
  document.body.appendChild(a)
  a.click()
  window.URL.revokeObjectURL(url)
  document.body.removeChild(a)
}

这里是封装了一个公用函数,Upexcele函数中的参数value是成功请求后,后端的返回值。对应下面的res

<template>
...
...
...
  <div class="tradition-meeting-detail">
    <div class="tradition-meeting-back">
      <button class="normal-btn export" @click="onExport()" style="float:right">导出</button>
    </div>
  </div>
</template>

<script>
...
...
...
import {Upexcele}  from '../../../globle/commonFunction'

export default {
  components: {
    NmsPagerTable,
  },
  name: "terminaldetail",
  data() {
    return {
      ...
      ...
      ...

    };
  },
  methods: {
   ...
   ...
   ...
    onExport: function() {
      api.downloadInspect({params:{taskid:this.taskid},responseType: 'blob'})
      .then((res) => {
        Upexcele(res)
      }).catch(error => {
        console.log(error)
      });
    }
  },
</script>

<style scoped>

</style>

请求参数在这里一定要加上 responseType: ‘blob’,否则不会生效。这个blob是js的内置对象 就是将其转化为文件blob
三、api接口

export const downloadInspect = params => {
  return axios.get('/nms/inspect/download/', params).then(res => res.data)
};

这里我使用了vue中使用axios处理get方法导出excel表格
四、后端处理细节(后端语言Python):
1.读的字节流方式:

class DownloadWarning(APIView):
    def get(self, request, *args, **kwargs):

        ......
        ......
        ......

        f = open('/opt/data/nms_webserver/inspect/aa.xls' , 'rb')
        response = FileResponse(f)
        response['Content-Type'] = 'application/octet-stream'
        response['Content-Disposition'] = 'attachment;filename=inspect_result.xls'
        return response

2.第三方requests.get方式:

class DownloadCaptureFile(APIView):
    def get(self, request):
    ......
    ......
    ......
        download_url = "http://"+ip+":"+port+"/api/xxx/xxx/v1"
        headers = {
            'path': 'xxx',
            'type': 'xxxx',
            'home': 'xxxx'
        }
        
        file = requests.get(download_url, headers=headers)
        response = FileResponse(file)
        response['Content-Type'] = 'application/octet-stream'
        response['Content-Disposition'] = 'attachment;filename="%s"' % (fileName)

        return response

注意点两部分:
一个是使用Django实现文件下载-FileResponse:FileResponse是StreamingHttpResponse的衍生类(子类),为二进制文件做了优化。如果 wsgi server 来提供,则使用了wsgi.file_wrapper ,否则将会流式化一个文件为一些小块。
FileResponse 需要通过二进制模式打开文件,如下:

>>> from django.http import FileResponse
>>> response = FileResponse(open('myfile.png', 'rb'))

二是用通用通用的MIME类型:application/octet-stream,它的文件扩展名是.*( 二进制流,不知道下载文件类型),这样做的好处是只要是返回二进制文件,都支持下载。相关知识:HTTP Content-type 对照表
参考:小混蛋&闯江湖 李大玄

已标记关键词 清除标记
相关推荐
<p style="color:#666666;"> <span style="font-size:14px;">本门课程重实战,将基础知识拆解到项目里,让你在项目情境里学知识。</span> </p> <p style="color:#666666;"> <span style="font-size:14px;">这样的学习方式能让你保持兴趣、充满动力,时刻知道学的东西能用在哪、能怎么用。</span> </p> <p style="color:#666666;"> <span style="font-size:14px;">平时不明白的知识点,放在项目里去理解就恍然大悟了。</span> </p> <p style="color:#666666;"> <span></span> </p> <p style="color:#666666;"> <span style="font-size:14px;"> </span> </p> <p style="color:#666666;"> <span style="color:#FF0000;font-size:14px;"><strong>一、融汇贯通</strong></span> </p> <p style="color:#666666;"> <span style="font-size:14px;">本视频采用了前后端分离的开发模式,前端使用Vue.js+Element UI实现了Web页面的呈现,后端使用Python 的Django框架实现了数据访问的接口,前端通过Axios访问后端接口获得数据。在学习完本章节后,真正理解前后端的各自承担的工作。</span> </p> <p style="color:#666666;"> <span style="font-size:14px;"> </span> </p> <p style="color:#666666;"> <span style="color:#FF0000;font-size:14px;"><strong>二、贴近实战</strong></span> </p> <p style="color:#666666;"> <span style="font-size:14px;">本系列课程为练手项目实战:学生管理系统v4.0的开发,项目包含了如下几个内容:项目的总体介绍、基本功能的演示、Vuejs的初始化、Element UI的使用、在Django中实现针对数据的增删改查的接口、在Vuejs中实现前端增删改查的调用、实现文件的上传、实现表格的分页、实现导出数据到Excel实现通过Excel导入数据、实现针对表格的批量化操作等等,所有的功能都通过演示完成、贴近了实战</span> </p> <p style="color:#666666;"> <span style="font-size:14px;"> </span> </p> <p style="color:#666666;"> <span style="color:#FF0000;font-size:14px;"><strong>三、课程亮点</strong></span> </p> <p style="color:#666666;"> <span style="font-size:14px;">在本案例中,最大的亮点在于前后端做了分离,真正理解前后端的各自承担的工作。前端如何和后端交互</span> </p> <p style="color:#666666;"> <span style="font-size:14px;"> </span> </p> <p style="color:#666666;"> <span style="color:#FF0000;font-size:14px;"><strong>适合人群:</strong></span> </p> <p style="color:#666666;"> <span style="font-size:14px;">1、有Python语言基础、web前端基础,想要深入学习Python Web框架的朋友;</span> </p> <p style="color:#666666;"> <span style="font-size:14px;">2、有Django基础,但是想学习企业级项目实战的朋友;</span> </p> <p style="color:#666666;"> <span style="font-size:14px;">3、有MySQL数据库基础的朋友</span> </p> <p style="color:#666666;"> <span style="font-size:14px;"> </span> </p> <p style="color:#666666;"> <span style="font-size:14px;"><img alt="" src="https://img-bss.csdnimg.cn/202009070752197496.png" /><br /> </span> </p> <p style="color:#666666;"> <span style="font-size:14px;"><br /> </span> </p>
©️2020 CSDN 皮肤主题: 像素格子 设计师:CSDN官方博客 返回首页