Vue如何实现从response读取流下载

更新时间：2025年04月11日 15:45:09 作者：自不惘

这篇文章主要介绍了Vue如何实现从response读取流下载问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

Vue从response读取流下载

1、创建公共方法

/**
 * 从response读取流下载
 * @param response 响应体
 * @param suffix 文件后缀名
 */
function downloadBlob(response,suffix){

  let fileName = new Date().getTime()+"_"+suffix+'.xlsx'
  let blob = new Blob([response]);//response.data为后端传的流文件
  let url = window.URL.createObjectURL(blob);
  let downloadElement = document.createElement("a");
  downloadElement.style.display = "none";
  downloadElement.href = url;
  downloadElement.download = fileName;
  document.body.appendChild(downloadElement);
  downloadElement.click();
  document.body.removeChild(downloadElement);
  window.URL.revokeObjectURL(url);
}

export default {
  downloadBlob
}

2、挂载到Vue原型上

import blob from '@/utils/blob'
Vue.prototype.$blob = blob

3、使用

/** 导出按钮操作 */
    handleExport() {
      this.$confirm('是否导出所有数据?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return exportData();
        }).then(response => {
          this.$blob.downloadBlob(response,"数据表")
        }).catch(()=>{})
    }

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue3简易实现proxy代理实例详解
这篇文章主要为大家详细介绍了Python实现学生成绩管理系统，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2022-03-03
详解为element-ui的Select和Cascader添加弹层底部操作按钮
这篇文章主要介绍了详解为element-ui的Select和Cascader添加弹层底部操作按钮，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-02-02
VUE-ElementUI 时间区间选择器的使用
这篇文章主要介绍了VUE-ElementUI 时间区间选择器的使用，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-05-05
Vue和React响应式的区别及说明
React和Vue在响应式机制上各有特点：Vue通过Proxy或Object.defineProperty自动追踪依赖,支持细粒度更新；React基于不可变数据,通过setState显式触发更新,依赖虚拟DOM的Diff算法批量更新,Vue强调声明式和自动优化,React强调函数式编程和显式控制
2025-02-02
多个vue子路由文件自动化合并的方法
这篇文章主要给大家介绍了关于多个vue子路由文件自动化合并的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-09-09
vue3 内容过多出现滚动条时滚动条自动定位到末端的操作代码
这篇文章主要介绍了vue3 内容过多出现滚动条时滚动条自动定位到末端的操作代码,本文给大家介绍的非常详细,需要的朋友参考下吧
2024-05-05
vue-cli的index.html中使用环境变量方式
这篇文章主要介绍了vue-cli的index.html中使用环境变量方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10
关于vue.js弹窗组件的知识点总结
最近在开发过程对对于组件化的开发有一些感想，于是开始记录下这些。弹窗组件一直是 web 开发中必备的，使用频率相当高，最常见的莫过于 alert，confirm和prompt这些,不同的组件库对于弹窗的处理也是不一样的，下面来一起看看吧。
2016-09-09
详解Vue3如何优雅的加载大量图片
最近开发了一个功能,页面首页会加载大量的图片,初次进入页面时,会导致页面性能下降,于是乎,我改进了这个功能,可以让所有图片自动懒加载,文中有详细的代码示例,需要的朋友可以参考下
2023-09-09
vue实现分页的三种效果
这篇文章主要为大家详细介绍了vue实现分页的三种效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-06-06