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

时间：2025-07-21 10:14:00|栏目：JavaScript|点击：次

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使用Signature Pad实现电子签名功能

栏目：JavaScript

下一篇：JavaScript双问号操作符(??)的惊人用法总结大全

本文标题：Vue如何实现从response读取流下载

本文地址：https://www.fushidao.cc/wangluobiancheng/23716.html

更多JavaScript

JavaScript

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

Vue从response读取流下载

1、创建公共方法

2、挂载到Vue原型上

3、使用

总结

您可能感兴趣的文章

阅读排行

推荐教程