前端GET/POST请求下载文件多种方式
创始人
2025-01-15 06:07:55
0

下载post

export const download = (data, projectId) => {   return request({     url: BaseUrl + '/xxx/xxx/xxx',     headers: {       "Project-Id": projectId,       httpWhite: true,     },     responseType: "blob",//文件流     method: 'post',     data   }) }
          下载数据模板  //点击下载 const downloadFile(row){   const params = {     需要传递的参数:'xxxx',     id:row.id,  //示例,   }     download(params, this.projectIds).then((res) => {     if (res.status === 200) {       this.downloadDataTemplate(res);     }   }); }  //下载数据模板 downloadDataTemplate(res) {   if (!res.data) {     return;   }   const fileName = decodeURIComponent(     res.headers["content-disposition"].split("filename=")[1]   );   const blob = new Blob([res.data], {     type: "application/vnd.openxmlformats-  officedocument.spreadsheetml.sheet;charset=utf-8",   });   const downloadElement = document.createElement("a");   const href = window.URL.createObjectURL(blob); // 创建下载的链接   downloadElement.href = href;   // 文件名中有中文 则对文件名进行转码   downloadElement.download = fileName; // 下载后文件名   document.body.appendChild(downloadElement);   downloadElement.click(); // 点击下载   document.body.removeChild(downloadElement); // 下载完成移除元素   window.URL.revokeObjectURL(href); // 释放blob对象 }, 

Get下载方法

通用get下载方法 99%可以使用
const downError = `BaseUrl+/xxx/xxx/xxxx?${this.tokenHeader}=${getToken()}&projectId=${this.projectId}&spaceId=${this.spaceId}`;  window.open(downError, "_self");//调用window方法
特殊get下载方法 1%才能用到 一般用不到 (仅用于个人记录)

这种使用于需要在hearder里面添加projecrt-Id等参数 一般的都不需要 主要看后端接口能不能使用

使用下面这种方法 最主要get下载的请求 是responseType:blob 文件流

export const exportPersonnel = (params) => request({   url: BaseUrl + '/exportxxx/xxxx',   headers: {     "Project-Id": params.projectId,   },   method: 'get',   responseType: 'blob',		//文件流方法   params, })
// 导出 exportcustomer() {   let downStr = { ...this.params };   exportPersonnel(downStr).then((r) => {     if (r.status === 200) {       //获取下载文件名        const fileName = decodeURIComponent(         r.headers["content-disposition"].split("filename=")[1]       );       // 创建 a 元素       const link = document.createElement('a');       const href = window.URL.createObjectURL(r.data)//创建下载链接       link.href = href;// 设置下载链接的 URL       link.style.display = "none";        link.download = fileName; // 下载后文件名       document.body.appendChild(link);       link.click(); // 点击下载       document.body.removeChild(link); // 下载完成移除元素       window.URL.revokeObjectURL(href); // 释放blob对象     }   }); },

相关内容

热门资讯

XML Schema 杂项数据... XML Schema 杂项数据类型XML Schema 提供了多种数据类型,用于定义 XML 文档中...
Html5前端基本知识整理与回... 今天我们继续结合发布的Html5基础知识点文档进行复习,希望对大家有所帮助。目录列表无...
数据结构练习 1.快速排序的非递归是通过栈来实现的,则前序与层次可以通过控制入栈的顺序来实现...
AJAX学习笔记上(学习自用) AJAX原生AJAX1.1AJAX简介AJAX全程为Asynchronous JavaScript ...
React 开发报错整理 1、'yield' expression implicitly results in an 'any...
LLaMA 模型 大模型LLaMA详解LLaMa系列模型详解(原理介绍、代码解读)...
LlamaFactory可视化... LlamaFactory 前言LLaMA Factory 是一个用于微调大型语言模型的强大工具,特别...
Ajax从零到实战   💝💝💝欢迎来到我的博客,很高兴能够...
基于泰坦尼克号生还数据进行 S... 基于泰坦尼克号生还数据进行 Spark 分析在这篇博客中,我们将展示如何使用 Apac...
在亚马逊云科技AWS上利用Sa... 项目简介:接下来,小李哥将会每天介绍一个基于亚马逊云科技AWS云计算平台...