博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
前端下载二进制流文件
阅读量:5278 次
发布时间:2019-06-14

本文共 1377 字,大约阅读时间需要 4 分钟。

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

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

、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)})

在这里插入图片描述

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

转载于:https://www.cnblogs.com/woai3c/p/11262491.html

你可能感兴趣的文章
ajax跨域简单请求和复杂请求
查看>>
Java动态加载DLL方法
查看>>
无边框窗体及移动
查看>>
ls按时间排序输出文件列表
查看>>
ZendGuardLoader安装
查看>>
青云直上九宵天 功成名就把家还
查看>>
Mysql初识数据库《二》数据库管理软件的由来
查看>>
日期格式操作,在oracle和mysql中的实现
查看>>
CentOSx64 安装 Gearmand 和 Gearman php扩展
查看>>
linux:SUID、SGID详解
查看>>
小哼买书
查看>>
angular学习之手动启动一个模块
查看>>
初识Tomcat系统架构
查看>>
CSS 三角形
查看>>
40个Java集合面试问题和答案
查看>>
Redis集群搭建与简单使用
查看>>
[Swift]LeetCode1096. 花括号展开 II | Brace Expansion II
查看>>
[Apple开发者帐户帮助]二、管理你的团队(1)邀请团队成员
查看>>
[Apple开发者帐户帮助]五、管理标识符(1)注册应用程序ID
查看>>
javascript中for...in和for...of的区别
查看>>