当前位置:首页 » 《关注互联网》 » 正文

前端GET/POST请求下载文件多种方式

2 人参与  2024年05月27日 13:22  分类 : 《关注互联网》  评论

点击全文阅读


下载post

export const download = (data, projectId) => {  return request({    url: BaseUrl + '/xxx/xxx/xxx',    headers: {      "Project-Id": projectId,      httpWhite: true,    },    responseType: "blob",//文件流    method: 'post',    data  })}
<el-button size="small" type="primary" class="downLoadTemplate" @click="downloadFile(row)">    <i class="iconfont yun-xiazai"></i>    <span class="first">下载数据模板</span></el-button>//点击下载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对象    }  });},

点击全文阅读


本文链接:http://m.zhangshiyu.com/post/114223.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

  • 衔棠夜烬照骨行:+后续+番外高分佳作(许安宁裴景行)_衔棠夜烬照骨行:+后续+番外高分佳作(许安宁裴景行)
  • 音音战痕:我死遁后,族长悔疯了:结局+番外列表_笔趣阁(我死遁后,族长悔疯了:音音战痕:结局+番外)
  • 陆尽年许墨璃(许墨璃陆尽年:结局+番外)_陆尽年许墨璃列表_笔趣阁(许墨璃陆尽年:结局+番外)
  • 穿越星海说爱你:结局+番外精心编著列表_穿越星海说爱你:结局+番外精心编著(林雪羽梁淮序)
  • 爱若有天意,兜转终可回:结局+番外爱恨纠葛(宋清澜萧沉)_爱若有天意,兜转终可回:结局+番外爱恨纠葛
  • 沈慈恩周珩:结局+番外(沈慈恩周珩)_沈慈恩周珩:结局+番外列表_笔趣阁(沈慈恩周珩)
  • (番外)+(全书)一念情深一念婚烬:全书+后续+结局(傅青青卢振庭)_(一念情深一念婚烬:全书+后续+结局)列表_笔趣阁(傅青青卢振庭)
  • 「丧失赚钱能力后,资助十年的贫困生把我网曝了!」大结局_「托关系丧失云贵川」小说节选试读
  • 完结文大叔娇宠哭包小作精许洛星正版列表_完结文大叔娇宠哭包小作精许洛星正版(薄璟邢)
  • (番外)+(全书)裴羡(改嫁御史帅夫后,新科状元悔疯了!)全书在线_裴羡免费列表_笔趣阁(改嫁御史帅夫后,新科状元悔疯了!)
  • 重逢后,高冷贺总红着眼拉我领证:结局+番外乔晚柠贺砚舟免费_(重逢后,高冷贺总红着眼拉我领证:结局+番外)乔晚柠贺砚舟列表_笔趣阁(重逢后,高冷贺总红着眼拉我领证:结局+番外)
  • 完结文不做她掌心的雏鸟在线列表_完结文不做她掌心的雏鸟在线(林靖驰)

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1