前端下载导出Excel文件以及ie兼容问题

项目开发的时候需要导出功能，一般情况有两种方法，一种是后端把数据弄好然后前端只是访问个地址就能实现下载，代码如下：

var url="后端写好的访问地址";
window.location=url;

另外一种就是后端返回文件流，前端进行相关下载，这时候我们使用原生ajax进行下载，代码如下：

var filename="demo.xls";//filename是你要下载的文件名，一般是以xls结尾，如“demo.xls”
var url=yourUrl;//url是你要访问的地址，就是那个返回文件流的地址
var xhr = new XMLHttpRequest();
xhr.onload = function () {if (this.status == "200") {if('msSaveOrOpenBlob' in navigator){//兼容ievar data= this.response;//获取响应var blob = new Blob([data], {type: 'application/vnd.ms-excel'});window.navigator.msSaveOrOpenBlob(blob, filename);return;}else{//获取响应文件流var blob = this.response;var aElem = document.createElement('a');//将文件流保存到a标签aElem.href = window.URL.createObjectURL(blob);aElem.download = filename;document.body.appendChild(aElem);aElem.onload = function (e) {window.URL.revokeObjectURL(aElem.href);};aElem.click();document.body.removeChild(aElem); // 下载完成移除元素}}
}
xhr.open("post", url, true);
//设置响应类型为blob类型,这一行一定要放在open后面，不然ie会报错！
xhr.responseType = "blob";
xhr.send();

前端下载导出Excel文件以及ie兼容问题相关推荐

Vue前端表格导出Excel文件
前言分享一个Vue前端导出Excel文件的方法.记录学习! 功能需求:将表格的全部数据导出Excel格式的文件前端:Vue3+Element-Plus 这个导出方法全部为前端操作,后端只需要传入表 ...
js中文件流下载导出excel文件方法
需求:数据列表导出为excel文件,通过向后台请求接口,返回的结果一般有两种方式: 1. 后台返回excel文件http地址(后台会在服务器生成,前端请求url再下载一遍,浪费服务器资源,优点:前端处 ...
前端页面导出excel文件功能(导出)
方法一: 一.后台管理系统中常有导出excel功能,可定义一个函数,在其他.vue文件中导入即可用. 1.1定义函数 export function excelDown(res, name = &qu ...
批量下载/导出excel文件或音频文件（浏览器）
不适用批量的详细案例可以看这边:http://t.csdn.cn/vrjPf 以下都是随便弄个点击事件@clike给她触发即可实现导出.当然了. api的使用,接口带blod getAPI: func ...
vue前端下载本地excel文件
<a class="template-download" href="./存货周转率及存货金额目标录入模板.xlsx" download><i ...
vue 本地xlsx文件下载_前端vue下载导出excel和cvs文件
// 导出 exportData () { this.$confirm('确认导出XXXXXX?', { confirmButtonText: '导出', cancelButtonText: '取消' ...
如何使用JavaScript实现纯前端读取和导出excel文件（转）
转自小茗同学博客:https://www.cnblogs.com/liuxianan/p/js-excel.html js-xlsx 介绍由SheetJS出品的js-xlsx是一款非常方便的只需要纯 ...
h5页面如何预览excel文件_如何使用JavaScript实现前端导入和导出excel文件?(H5编辑器实战复盘)...
前言最近笔者终于把H5-Dooring的后台管理系统初步搭建完成, 有了初步的数据采集和数据分析能力, 接下来我们就复盘一下其中涉及的几个知识点,并一一阐述其在Dooring H5可视化编辑器中的解 ...
如何使用JavaScript实现前端导入和导出excel文件(H5编辑器实战复盘)
前言最近笔者终于把H5-Dooring的后台管理系统初步搭建完成, 有了初步的数据采集和数据分析能力, 接下来我们就复盘一下其中涉及的几个知识点,并一一阐述其在Dooring H5可视化编辑器中的解 ...

前端下载导出Excel文件以及ie兼容问题

前端下载导出Excel文件以及ie兼容问题相关推荐

最新文章

热门文章