前端接受后端文件流并下载的几种方法

lifesimple 发布于2019-08-23 14:06 / 2033人阅读

摘要：前言项目中经常会遇到需要导出列表内容，或者下载文件之类的需求。结合各种情况，我总结了前端最常用的三种方法来接受后端传过来的文件流并下载，针对不同的情况可以使用不同的方法。如果后端提供的下载接口是类型，就必须要用方法二或者方法三了。

前言

项目中经常会遇到需要导出列表内容，或者下载文件之类的需求。结合各种情况，我总结了前端最常用的三种方法来接受后端传过来的文件流并下载，针对不同的情况可以使用不同的方法。

方法一 使用场景

针对后端的get请求

具体实现

下载文件

直接用个标签来接受后端的文件流

方法二 使用场景

针对后端的post请求
利用原生的XMLHttpRequest方法实现

具体实现

function request () {
    const req = new XMLHttpRequest();
    req.open("POST", "<接口地址>", true);
    req.responseType = "blob";
    req.setRequestHeader("Content-Type", "application/json");
    req.onload = function() {
      const data = req.response;
      const a = document.createElement("a");
      const blob = new Blob([data]);
      const blobUrl = window.URL.createObjectURL(blob);
      download(blobUrl) ;
    };
    req.send("<请求参数：json字符串>");
  };

function download(blobUrl) {
  const a = document.createElement("a");
  a.style.display = "none";
  a.download = "<文件名>";
  a.href = blobUrl;
  a.click();
  document.body.removeChild(a);
}

request();

方法三 使用场景

针对后端的post请求
利用原生的fetch方法实现

具体实现

function request() {
  fetch("<接口地址>", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: "<请求参数：json字符串>",
  })
    .then(res => res.blob())
    .then(data => {
      let blobUrl = window.URL.createObjectURL(data);
      download(blobUrl);
    });
}

function download(blobUrl) {
  const a = document.createElement("a");
  a.style.display = "none";
  a.download = "<文件名>";
  a.href = blobUrl;
  a.click();
  document.body.removeChild(a);
}

request();

总结

如果后端提供的下载接口是get类型，可以直接使用方法一，简单又便捷；当然如果想使用方法二、三也是可以的，不过感觉有点舍近求远了。

如果后端提供的下载接口是post类型，就必须要用方法二或者方法三了。

方法二和方法三怎么取舍？

当你的项目里的接口请求全是基于XMLHttpRequest实现的，这时方法二就更加适合，只要基于你原来项目中的接口请求工具类加以扩展就行了。

当你的项目里的接口请求全是基于fetch实现的，这时方法三就更加适合，比如我现在的做的一个项目就是基于ant design pro的后台管理系统，它里面的请求类就是基于fetch的，所以我就直接用的方法三，只要在它的request.js文件中稍作修改就行。

我这里讨论的是两种原生的请求方式，如果你项目中引用了第三方请求包来发送请求，比如axios之类的，那就要另当别论了。

云服务器 GPU云服务器 js缓存的几种方法最基本的几种 html的几种轮播 js的几种数据类型

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100079.html

实践解析：Electron实现跨平台视频会议的几种思路

摘要：而现在我们可以利用多种工具框架进行跨平台开发。实现视频会议的几种思路如何利用实现一个视频会议应用这主要取决于使用什么技术来实现作为业务核心的部分。通过与技术结合，实现了网页端多方音视频通讯，可以快速实现部分的开发。作者简介：张乾泽，声网 Agora Web 研发工程师对于在线教育、医疗、视频会议等场景来讲，开发面向 Windows、Mac 的跨平台客户端是必不可少的一步。在过去，每...

xi4oh4o 2019-08-22 15:32 评论0 收藏0
时间格式的转化-主要的几种单位转换

摘要：误会说明此时间不是指时间刻，而是时间段小时分钟秒，时间刻以及日期推荐此主要单位指常用的时，分，秒，时分秒，时分，分秒，无日期无毫秒此一个单位数值保留两位小数，多个单位不考虑小数目前需求暂时不多，只是一个小转换。还有很多需要学习，此生不用回头了。误会说明此时间不是指时间刻(12:00:00)，而是时间段(3小时10分钟45秒)，时间刻以及日期推荐 moment.js 此主要单...

mengera88 2019-08-20 18:37 评论0 收藏0
node实现文件下载不得不说的那些事儿

摘要：如果像本例中这样的场景会遇到这样一个问题，详见链接当请求参数过长或为了安全，就需要用到下载。写到这里自己都忍不住想锤自己，给自己挖坑不说，这样来回请求下载，流量，真的是败家。这几天一直在做远程文件下载的事，现在总算有了解决，特来记录一下踩过的坑和想揍自己的心需求应用场景是这样的，底层逻辑数据请求接口是由Java写的，也就是说原始文件存在Java服务端,返回时有加密措施由于工作...

Coly 2019-08-23 14:12 评论0 收藏0
js面向对象浅析---对象创建的几种常见方式

摘要：前言虽然使用构造函数或者使用对象字面量可以很方便的用来创建一个对象，但这种方式有一个明显的缺点使用一个接口创建多个对象会产生很多冗余的代码。即调用构造函数所创建的那个对象的原型对象好处是可以让所有对象的实例共享他的属性的方法。前言虽然使用Object构造函数或者使用对象字面量可以很方便的用来创建一个对象，但这种方式有一个明显的缺点：使用一个接口创建多个对象会产生很多冗余的代码。因此...

Invoker 2019-08-21 10:46 评论0 收藏0