vue element中axios下载文件(后端Python)

 更新时间:2019年05月10日 14:58:36   作者:binger0712  
这篇文章主要介绍了vue element中axios下载文件(后端Python)的实例代码,非常不错,具有一定的参考借鉴价值 ,需要的朋友可以参考下

•axios 接受文件流,需要设置 {responseType:'arraybuffer'}

axios.post(
  apiUrl,
  formdata, 
  {responseType:'arraybuffer'}
).then(res=> {
  if (res.status === 200) {
   let blob = new Blob([res.data], {
    type: res.headers['content-type']
    });

    const fileName = res.headers['content-disposition'];
   const title = fileName && (fileName.indexOf('filename=') !== -1) ? fileName.split('=')[1] : 'download';

    require('script-loader!file-saver');
   saveAs(blob, title);
} 
})
.catch();

注: axios 中 response 表示服务器响应的数据类型,可以是 arraybuffer , blob, document , json , text , stream . 默认为: json

•后端发送文件:Python

from flask import send_from_directory
@admin_bp.route('/tasksothers/download', methods=["GET", "POST"])
@auth.login_required
def api_tasksothers_download():
    root_path = ''
    src_name = "a.sql"
    upload_path = os.path.join(root_path, src_name)
    print("upload_path =", upload_path)
    if os.path.isfile(upload_path):
      response = send_from_directory(root_path, src_name, as_attachment=True)
      print("response: ",response)

      response.headers["Access-Control-Expose-Headers"] = "Content-disposition"
      print("response: ", response.headers)
      return response  

注: 如果 response.header 中没有添加  Access-Control-Expose-Headers 这个参数(代表:服务器允许浏览器访问的头(headers)的白名单),vue中就无法获取 content-disposition,即 res.headers['content-disposition'];无法找到

总结

以上所述是小编给大家给大家介绍的vue element中axios下载文件(后端Python),希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

相关文章

  • 浅析vue3的setup的使用和原理

    浅析vue3的setup的使用和原理

    setup是Vue3中引入的一个新的组件选项,是Vue3中函数式组件的核心部分,它提供了一种新的方式来编写组件逻辑,下面就来和大家讲讲它的使用和原理
    2023-08-08
  • iview-table组件嵌套input select数据无法双向绑定解决

    iview-table组件嵌套input select数据无法双向绑定解决

    这篇文章主要为大家介绍了iview-table组件嵌套input select数据无法双向绑定解决示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • Vuex3和Vuex4有哪些区别

    Vuex3和Vuex4有哪些区别

    本文主要介绍了Vuex3和Vuex4有哪些区别,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-04-04
  • Vue响应式原理与虚拟DOM实现步骤详细讲解

    Vue响应式原理与虚拟DOM实现步骤详细讲解

    在Vue中最重要、最核心的概念之一就是响应式系统。这个系统使得Vue能够自动追踪数据变化,并在数据发生变化时自动更新相关的DOM元素。本文将会探讨Vue响应式系统的实现原理及其底层实现
    2023-03-03
  • Vue+Vux项目实践完整代码

    Vue+Vux项目实践完整代码

    本文给大家分享一段详细的代码给大家介绍Vue+Vux项目实践思路,需要的朋友可以参考下
    2017-11-11
  • Vue CLI3 如何支持less的方法示例

    Vue CLI3 如何支持less的方法示例

    这篇文章主要介绍了Vue CLI3 如何支持less的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • vue 页面卡死,点击无反应的问题及解决

    vue 页面卡死,点击无反应的问题及解决

    这篇文章主要介绍了vue 页面卡死,点击无反应的问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • vue项目如何解决数字计算精度问题

    vue项目如何解决数字计算精度问题

    这篇文章主要介绍了vue项目如何解决数字计算精度问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • Vue3中进行二维码的生成与解码实现详解

    Vue3中进行二维码的生成与解码实现详解

    这篇文章主要为大家介绍了Vue3中进行二维码的生成与解码实现详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • vue-pdf实现pdf在线预览并实现自定义预览框高度

    vue-pdf实现pdf在线预览并实现自定义预览框高度

    这篇文章主要介绍了vue-pdf实现pdf在线预览并实现自定义预览框高度方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03

最新评论