js实现前端导出大文件Excel
2024-09-01 12:53:55
//base64转换成blob
function dataURIToBlob(dataURI, callback) {
var binStr = atob(dataURI.split(",")[1]),
len = binStr.length,
arr = new Uint8Array(len); for (var i = 0; i < len; i++) {
arr[i] = binStr.charCodeAt(i);
} callback(new Blob([arr]));
} var callback = function(blob) {
var a = document.createElement("a");
a.download = "数据" + ".xls";
a.innerHTML = "download";
// the string representation of the object URL will be small enough to workaround the browser‘s limitations
a.href = URL.createObjectURL(blob);
// you must revoke the object URL,
// but since we can‘t know when the download occured, we have to attach it on the click handler..
a.click();
}; //下载导出
$(".down_box").click(function(e) {
$.axs(
host + "/digital/communication/exportData.action",
{},
function(data) {
$(".down_box").css({ "pointer-events": "", opacity: "1" });
var exportData = data.returnMap.exportData;
// console.log(data.returnMap.exportData);
//列标题
let str =
"<tr><td>数据时间</td><td>指标编号</td>" +
"<td>指标名称</td><td>机构号</td><td>机构名称</td><td>机构层级</td>" +
"<td>父机构号</td><td>父机构名称</td><td>实时完成值</td><td>实时目标值</td><td>实时完成比</td><td>实时目标值差值</td>" +
"<td>实时完成比排名</td><td>实时完成比红绿字</td><td>实时完成预警值</td><td>上周实时</td><td>同比上周实时差值</td>" +
"<td>同比上周实时</td><td>同比上周实时红绿字</td></tr>"; //循环遍历,每行加入tr标签,每个单元格加td标签
for (let i = 0; i < exportData.length; i++) {
str += "<tr>";
for (let item in exportData[i]) {
//增加\t为了不让表格显示科学计数法或者其他格式
str += `<td>${exportData[i][item] + "\t"}</td>`;
}
str += "</tr>";
}
//Worksheet名
let worksheet = "Sheet1";
let uri =
"data:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;base64,"; //下载的表格模板数据
let template = `<html xmlns:o="urn:schemas-microsoft-com:office:office"
xmlns:x="urn:schemas-microsoft-com:office:excel"
xmlns="http://www.w3.org/TR/REC-html40">
<head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>
<x:Name>${worksheet}</x:Name>
<x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet>
</x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]-->
</head><body><table>${str}</table></body></html>`;
//下载模板
var template1 = uri + btoa(unescape(encodeURIComponent(template)));
dataURIToBlob(template1, callback);
},
function() {
$(".down_box").css({ "pointer-events": "", opacity: "1" });
},
function() {
$(".down_box").css({ "pointer-events": "none", opacity: "0.5" });
}
);
});
HTML
<div class="down_box">下载<div/>
备注: ajax部分为封装的ajax 可以自行修改请求方式
数据格式:
最新文章
- h5曲线滑动确认
- 篇一:MySQL中case when then
- 腾讯QQ你的缓存策略应该改下了
- VisualStudio2010正则表达式查找和替换
- php 文件锁
- `cocos2dx非完整` 游戏架构缩影 添加启动流程
- VS2010关于WindowsService 制作安装程序包,无法自动install的问题解决方法
- BNU 51276 - 道路修建 Small (并查集)
- 什么是method swizzling
- [jumping to the gate] 娱乐向setjmp
- bzoj2301: [HAOI2011]Problem b懵逼乌斯反演
- Hadoop| MapperReduce02 框架原理
- 4.5《想成为黑客,不知道这些命令行可不行》(Learn Enough Command Line to Be Dangerous)—第四章小结
- 巧用CurrentThread.Name来统一标识日志记录(java-logback篇)
- 【C】——如何生成静态库和动态库
- Exp2 后门原理与实践 20164321 王君陶
- JavaScript函数的多种定义方法
- tensorflow函数解析:Session.run和Tensor.eval的区别
- 记一次Servlet中getAttribute的错误.
- java爬虫爬取网页内容前,对网页内容的编码格式进行判断的方式
热门文章
- go语言-关于文件的操作和解释
- 走进 thrift server
- [CSS] The :empty Pseudo Selector Gotchas
- / WebAPP开发与小程序 / 步骤一 &#183; 4-5 地图搜索与poi结合(2)
- 使用JS动态操作css的集中方法
- 十三.基础邮件服务、parted分区工具、交换分区、链路聚合
- Cashe的使用
- DOM操作1
- 代码 | 自适应大邻域搜索系列之(6) - 判断接受准则SimulatedAnnealing的代码解析
- HDU 6041 I Curse Myself ——(仙人掌图,tarjan,转化)