Axios和Ajax处理后台返回文件流实现文件下载（图片和Excel）

Axios

//定义公共方法，下载Excel
download(url,data,fileName) {return axios({method: 'post',url,// headers里面设置tokenheaders: {"token":getToken()},data,// 二进制流文件，一定要设置成blob，默认是jsonresponseType: 'blob'}).then(res => {const link = document.createElement('a')const blob = new Blob([res.data], { type: 'application/vnd.ms-excel' })link.style.display = 'none'link.href = URL.createObjectURL(blob)link.setAttribute('download',fileName)document.body.appendChild(link)link.click()document.body.removeChild(link)})}//直接调用
api.download("/mbfile/backstage/vipListDown",this.exportMenberData,'个人会员.xlsx')

Ajax

//定义公共方法，下载图片，其中还手动做了个防抖
function download(){document.getElementById('download').innerHTML = '正在下载，请稍后...'$("#download").attr("disabled","disabled")var url = setUrl+"memeber/mbfile/front/vipCertificateDown";var xhr = new XMLHttpRequest();xhr.open('GET', url, true);//get请求，请求地址，是否异步xhr.responseType = "blob"; // 返回类型blobxhr.setRequestHeader("token",window.localStorage.getItem("token"))xhr.onload = function(data, textStatus, request) {// 请求完成处理函数var blob = this.response;// 获取返回值var a = document.createElement('a');a.download = "会员证.jpg";a.href = URL.createObjectURL(blob);a.click();document.getElementById('download').innerHTML = '下载会员证'$("#download").removeAttr("disabled");};xhr.send();
}//前端Button
<button type="button" class="standardBtn backBtn" id="download" onclick="download()">下载会员证</button>

Axios和Ajax处理后台返回文件流实现文件下载（图片和Excel）相关推荐

PDF.js + Vue 浏览器以只读方式打开PDF,后台返回文件流，前端实现预览pdf
如果你想光前端完成 office(xls,doc,ppt) 文件的预览,只能提供你这些库来使用 PDF http://mozilla.github.com/pdf.js/ XLS https://gi ...
POI动态导出Excel，后台返回文件流，前端responseType格式下载
针对各个表的数据导出,实现的代码往往相似,出于这个目的,开启自己代码简略之旅.本文是针对.xls的excel文件. 1.思路描述 ①.确定各个模板的.xls文件格式 ②.定义模板的存在的参数,如第一行 ...
vue 后台返回的文件流进行预览_vue项目-pdf预览和下载，后台返回文件流形式
背景:正好最近碰到了这种需求,记录下来,方便以后查看. 后端返回的文件流数据如下图所示: 后台返回数据.png 一.pdf的预览一开始的时候百度了很多方法,有建议用pdfJs插件的,有iframe嵌 ...
ajax提交用流的方式,ajax 请求后台返回的文件流
download(url) { var xhr = new XMLHttpRequest(); xhr.open('GET', url, true); // 也可以使用POST方式,根据接口 xhr. ...
前端处理后台返回的流数据
1.接口请求的时候一定要加responseType: 'blob',否则生产的文件会是空白(PDF) 2.代码实现 const binaryData = []binaryData.push(res)/ ...
vue获取后台的文件流并且转换成图片
vue获取后台的文件流并且转换成图片 1.添加request的responseType export function addCode(Equip,data) { return request({ m ...
react前端下载后端返回文件流(文件流下载excel、csv)
以前用vue框架的时候,写过不少下载上传的东西,当然包括后端返回文件流供前端下载,现在用react,牵扯到这个功能,又提起来说,有两种下载类型,一种是Excel,一种是Csv. 首先后端返回这种: 或 ...
JAVA下载 PDF 到本地或返回文件流
@Slf4j public class PDFUtils {/**** @param fileUrl 文件路径* @param saveUrl 文件保存路径* @param fileName 文件名称 ...
Linux C语言 fileno(返回文件流所使用的文件描述词)
fileno(返回文件流所使用的文件描述词) 相关函数 open,fopen 表头文件 #include<stdio.h> 定义函数 int fileno(FILE * stream); ...

Axios和Ajax处理后台返回文件流实现文件下载（图片和Excel）

Axios

Ajax

Axios和Ajax处理后台返回文件流实现文件下载（图片和Excel）相关推荐

最新文章

热门文章