前端下载二进制流文件

lidashuang 发布于2019-08-26 10:25 / 3156人阅读

摘要：更多文章平时在前端下载文件有两种方式，一种是后台提供一个，然后用下载，另一种就是后台直接返回文件的二进制内容，然后前端转化一下再下载。假设是返回来的二进制数据这次没有问题，文件能正常打开，内容也是正常的，不再是乱码。

更多文章

平时在前端下载文件有两种方式，一种是后台提供一个 URL，然后用 window.open(URL) 下载，另一种就是后台直接返回文件的二进制内容，然后前端转化一下再下载。

由于第一种方式比较简单，在此不再叙述。接下来主要讲解一下第二种方式怎么实现。

Blob、ajax(axios)

mdn 上是这样介绍 Blob 的：

Blob 对象表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据

具体使用方法

axios({
  method: "post",
  url: "/export",
})
.then(res => {
  // 假设 data 是返回来的二进制数据
  const data = res.data
  const url = window.URL.createObjectURL(new Blob([data], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"}))
  const link = document.createElement("a")
  link.style.display = "none"
  link.href = url
  link.setAttribute("download", "excel.xlsx")
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
})

打开下载的文件，看看结果是否正确。

一堆乱码...

一定有哪里不对。

最后发现是参数 responseType 的问题，responseType 它表示服务器响应的数据类型，由于后台返回来的是二进制数据，所以我们要把它设为 arraybuffer，
接下来再看看结果是否正确。

axios({
  method: "post",
  url: "/export",
  responseType: "arraybuffer",
})
.then(res => {
  // 假设 data 是返回来的二进制数据
  const data = res.data
  const url = window.URL.createObjectURL(new Blob([data], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"}))
  const link = document.createElement("a")
  link.style.display = "none"
  link.href = url
  link.setAttribute("download", "excel.xlsx")
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
})

这次没有问题，文件能正常打开，内容也是正常的，不再是乱码。

云服务器私有云文件流二进制 ajax二进制流 asp读取二进制流二进制流读取 fread

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

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

关于前端实现文件下载功能

摘要：问题以上两种方式，当在下载格式，或者视频文件时，浏览器会直接播放该文件，而达不到直接下载的功能，此时，当下载音视频文件时无法使用以上两种方式。 1、通过window.open()打开新页面下载文件 window.open(`url`, _self) 使用场景：下载excel文件，后端提供接口，接口返回的是文件流，可以直接使用window.open()，最简单的方式。优点：最简洁；弊...

Arno 2019-08-23 17:54 评论0 收藏0
node实现文件下载不得不说的那些事儿

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

Coly 2019-08-23 14:12 评论0 收藏0
node实现文件下载不得不说的那些事儿

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

AnthonyHan 2019-08-05 15:49 评论0 收藏0
前端下载图片总结

摘要：这时候后台要提供一个请求的服务，并设置消息响应头，告诉浏览器该文件需要下载。前端下载图片总结前端下载图片分为两大类：一是服务端配合实现（即下载后台服务提供的资源）；二是纯前端下载 1、服务端配合实现这种情况对于前端开发非常简单，只需要一个a标签，如：下载图片当直接访问的某个文件时，如果该文件是二进制等浏览器无法解析的文件，浏览器才会下载该文件，但如果浏览器可以自己...

Freelander 2019-08-02 11:56 评论0 收藏0
前端下载图片总结

摘要：这时候后台要提供一个请求的服务，并设置消息响应头，告诉浏览器该文件需要下载。前端下载图片总结前端下载图片分为两大类：一是服务端配合实现（即下载后台服务提供的资源）；二是纯前端下载 1、服务端配合实现这种情况对于前端开发非常简单，只需要一个a标签，如：下载图片当直接访问的某个文件时，如果该文件是二进制等浏览器无法解析的文件，浏览器才会下载该文件，但如果浏览器可以自己...

cgspine 2019-08-23 12:53 评论0 收藏0