JavaScript 上万条数据 导出Excel文件（改装版）
最近项目要js实现将数据导出excel文件，网上很多插件实现~~那个开心呀，谁知道后面数据量达到上万条时出问题：浏览器不仅卡死，导出的excel文件一直提示网络失败。。。。
debug调试发现var excel拼接的table字符串，超出了var的长度限制；幸好网上有前辈的解决方案~~~膜拜ing
参考网址：https://blog.csdn.net/b7410852963/article/details/51197552
需要自己去理解下 JavaScript Blob对象
/***导出excel文件
//例子:
var data = [{ userName: 'lily', age: 28, job: "teacher", city: "广州" },{ userName: 'lucy', age: 19, job: "doctor", city: "深圳" }];
if (data == '')return;
var title = [{ userName: '姓名' }, { job: '工作' }, { age: '年龄' }, { city: '城市' }];
toExcel("dataExport", data, title);
***/ /***toExcel:
* FileName文件名
* JSONData导出的数据
* ShowLabel表头
*/
var DownloadEvt = null;
function toExcel(FileName, JSONData, ShowLabel) {
var arrData = typeof JSONData != 'object' ? JSON.parse(JSONData) : JSONData; var docData = new StringBuffer(); // Header
var innerHTML = new StringBuffer();
docData.append('<table><thead>');
for (var i = 0; i < ShowLabel.length; i++) {
for (var key in ShowLabel[i]) {
innerHTML.append('<td>' + ShowLabel[i][key] + '</td>\r');
}
}
docData.append('<tr>\r' + innerHTML.toString() + '</tr>');
docData.append('</thead><tbody>'); // Row Vs Column
for (var i = 0; i < arrData.length; i++) {
var tdRow = new StringBuffer();
for (var y = 0; y < ShowLabel.length; y++) {
for (var k in ShowLabel[y]) {
if (ShowLabel[y].hasOwnProperty(k)) {
tdRow.append('<td style="vnd.ms-excel.numberformat:@">' + (arrData[i][k] === null ? '' : arrData[i][k]) + '</td>\r');
}
}
}
docData.append('<tr>\r' + tdRow.toString() + '</tr>');
} docData.append('</tbody></table>'); console.log("docData:",docData); var docFile = new StringBuffer(); docFile.append('<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">');
docFile.append('<meta http-equiv="content-type" content="application/vnd.ms-excel; charset=UTF-8">');
docFile.append("<head>");
docFile.append("<!--[if gte mso 9]>");
docFile.append("<xml>");
docFile.append("<x:ExcelWorkbook>");
docFile.append("<x:ExcelWorksheets>");
docFile.append("<x:ExcelWorksheet>");
docFile.append("<x:Name>");
docFile.append("{worksheet}");
docFile.append("</x:Name>");
docFile.append("<x:WorksheetOptions>");
docFile.append("<x:DisplayGridlines/>");
docFile.append("</x:WorksheetOptions>");
docFile.append("</x:ExcelWorksheet>");
docFile.append("</x:ExcelWorksheets>");
docFile.append("</x:ExcelWorkbook>");
docFile.append("</xml>");
docFile.append("<![endif]-->");
docFile.append("</head>");
docFile.append("<body>");
for (var i = 0; i < docData.content.length; i++) {
docFile.append(docData.content[i].toString());
}
// docFile.append( docData.toString());
docFile.append("</body>");
docFile.append("</html>"); console.log('docFile:',docFile); try {
console.log('111111111')
var blob = new Blob(docFile.content, {
type: 'application/vnd.ms-excel;charset=UTF-8;'
});
console.log("blob.size===" + blob.size);
saveAs(blob, FileName + '.xlsx');
} catch (e) {
console.log('22222222222')
downloadFile(FileName + '.xlsx',
'data:application/vnd.ms-excel;base64,',
docFile.toString());
}
} function StringBuffer() {
this.content = new Array;
}
StringBuffer.prototype.append = function(str) {
this.content.push(str);
}
StringBuffer.prototype.prepend = function(str) {
this.content.unshift(str);
}
StringBuffer.prototype.toString = function() {
return this.content.join("");
} function saveAs(blob, filename) { var type = blob.type;
var force_saveable_type = 'application/octet-stream';
if (type && type != force_saveable_type) { // 强制下载，而非在浏览器中打开
var slice = blob.slice || blob.webkitSlice || blob.mozSlice;
blob = slice.call(blob, 0, blob.size, force_saveable_type);
} var url = URL.createObjectURL(blob);
var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
save_link.href = url;
save_link.download = filename; console.log('save_link:',save_link); var event = document.createEvent('MouseEvents');
event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
save_link.dispatchEvent(event);
URL.revokeObjectURL(url);
} function downloadFile(filename, header, data) { var ua = window.navigator.userAgent;
if (ua.indexOf("MSIE ") > 0 || !!ua.match(/Trident.*rv\:11\./)) {
// Internet Explorer (<= 9) workaround by Darryl (https://github.com/dawiong/tableExport.jquery.plugin)
// based on sampopes answer on http://stackoverflow.com/questions/22317951
// ! Not working for json and pdf format !
var frame = document.createElement("iframe"); if (frame) {
document.body.appendChild(frame);
frame.setAttribute("style", "display:none");
frame.contentDocument.open("txt/html", "replace");
frame.contentDocument.write(data);
frame.contentDocument.close();
frame.focus(); frame.contentDocument.execCommand("SaveAs", true, filename);
document.body.removeChild(frame);
}
}
else {
var DownloadLink = document.createElement('a'); if (DownloadLink) {
DownloadLink.style.display = 'none';
DownloadLink.download = filename; console.log((header + base64encode(data)).length); if (header.toLowerCase().indexOf("base64,") >= 0)
DownloadLink.href = header + base64encode(data); else
DownloadLink.href = encodeURIComponent(header + data); document.body.appendChild(DownloadLink); if (document.createEvent) {
if (DownloadEvt == null)
DownloadEvt = document.createEvent('MouseEvents'); DownloadEvt.initEvent('click', true, false);
DownloadLink.dispatchEvent(DownloadEvt);
}
else if (document.createEventObject)
DownloadLink.fireEvent('onclick');
else if (typeof DownloadLink.onclick == 'function') DownloadLink.onclick(); /*document.body.removeChild(DownloadLink);*/
}
}
} function base64encode(input) {
var keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
var output = "";
var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
var i = 0;
input = utf8Encode(input);
while (i < input.length) {
chr1 = input.charCodeAt(i++);
chr2 = input.charCodeAt(i++);
chr3 = input.charCodeAt(i++);
enc1 = chr1 >> 2;
enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
enc4 = chr3 & 63;
if (isNaN(chr2)) {
enc3 = enc4 = 64;
} else if (isNaN(chr3)) {
enc4 = 64;
}
output = output +
keyStr.charAt(enc1) + keyStr.charAt(enc2) +
keyStr.charAt(enc3) + keyStr.charAt(enc4);
}
return output;
} function utf8Encode(string) {
string = string.replace(/\x0d\x0a/g, "\x0a");
var utftext = "";
for (var n = 0; n < string.length; n++) {
var c = string.charCodeAt(n);
if (c < 128) {
utftext += String.fromCharCode(c);
}
else if ((c > 127) && (c < 2048)) {
utftext += String.fromCharCode((c >> 6) | 192);
utftext += String.fromCharCode((c & 63) | 128);
}
else {
utftext += String.fromCharCode((c >> 12) | 224);
utftext += String.fromCharCode(((c >> 6) & 63) | 128);
utftext += String.fromCharCode((c & 63) | 128);
}
}
return utftext;
}
JavaScript 上万条数据 导出Excel文件（改装版）的更多相关文章
- JavaScript 上万条数据 导出Excel文件 页面卡死
最近项目要js实现将数据导出excel文件,网上很多插件实现~~那个开心呀,谁知道后面数据量达到上万条时出问题:浏览器不仅卡死,导出的excel文件一直提示网络失败.... debug调试发现var ...
- 彻底理解使用JavaScript 将Json数据导出CSV文件
前言 将数据报表导出,是web数据报告展示常用的附带功能.通常这种功能都是用后端开发人员编写的.今天我们主要讲的是直接通过前端js将数据导出Excel的CSV格式的文件. 原理 首先在本地用Excel ...
- 纯前端实现数据导出excel文件
一 安装依赖 npm install -S file-saver xlsx npm install -D script-loader 二 新建文件夹 在网上百度引入即可 三 在main.js中引入 ...
- 前端 vue表格数据导出Excel 文件实现
实现思路 使用json2csv将后台json数据转化为csv格式数据 采用创建Blob(二进制大对象)的方式来存放缓存数据: 生成下载链接: 创建一个a标签,设置href和download属性 触发a ...
- 使用vue导出excel文件
今天再开发中遇到一件事情,就是怎样用已有数据导出excel文件,网上有许多方法,有说用数据流的方式,https://www.cnblogs.com/yeqrblog/p/9758981.html,但是 ...
- 如何使用JavaScript实现纯前端读取和导出excel文件
js-xlsx 介绍 由SheetJS出品的js-xlsx是一款非常方便的只需要纯JS即可读取和导出excel的工具库,功能强大,支持格式众多,支持xls.xlsx.ods(一种OpenOffice专 ...
- 如何使用JavaScript导入和导出Excel文件
本文由葡萄城技术团队于原创并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. JavaScript是一个涵盖多种框架.直译式.可以轻松自定义客户端的脚本 ...
- 如何使用JavaScript实现纯前端读取和导出excel文件（转）
转自小茗同学博客:https://www.cnblogs.com/liuxianan/p/js-excel.html js-xlsx 介绍 由SheetJS出品的js-xlsx是一款非常方便的只需要纯 ...
- 如何使用JavaScript实现前端导入和导出excel文件
一.SpreadJS 简介 SpreadJS 是一款基于 HTML5 的纯 JavaScript 电子表格和网格功能控件,以“高速低耗.纯前端.零依赖”为产品特色,可嵌入任何操作系统,同时满足 .NE ...
随机推荐
- Oracle AMERICAN改成简体中文
64位Oracle连接32位PLSQL_Developer时,在PLSQL_Developer安装的目录中新建了一个TXT文件,之后更名为start.bat,内容如下: @echo off set p ...
- 解决github网站打开慢的问题
一.前言 作为一名合格的程序员,github打开速度太慢怎么能容忍.但是可以通过修改hosts文件信息来解决这个问题.现在chrome访问github速度杠杠的! 二.macOS解决方法 打开host ...
- mysql 清空表——truncate 与delete的区别
清空表 truncate table [表名]: delete from [表名]: 注: truncate是整体删除(速度较快), delete是逐条删除(速度较慢). truncate不写服务器l ...
- 学习笔记6—pandas中ix,loc,iloc有什么区别？
直接看例子: >>> data = pd.Series(np.arange(10), index=[49,48,47,46,45, 1, 2, 3, 4, 5]) >>& ...
- Java从内存流中读取byte数组
Java中通过servlet接收二进制数据,然后将二进制数据流读取为byte数组.开始使用:byte[] bs = new byte[request.getContentLength()];reque ...
- 记录python接口自动化测试--简单总结一下学习过程(第十目)
至此,从excel文件中循环读取接口到把测试结果写进excel,一个简易的接口自动化测试框架就完成了.大概花了1周的时间,利用下班和周末的时间来理顺思路.编写调试代码,当然现在也还有很多不足,例如没有 ...
- python+selenium：点击页面元素时报错：WebDriverException: Message: Element is not clickable at point (1372.5, 9.5). Other element would receive the click: <li style="display: list-item;" id="tuanbox"></li>
遇到一个非常郁闷的问题,终于解决了, 问题是这样的,NN网站的价格计划,每一个价格计划需要三连击才能全部点开,第一个房型的价格计划是可以正确三连击打开的,可是第二个房弄就不行了,报错说不是可点击的 ...
- openstack中数据库连接数太多--pymysql.err.OperationalError，1040, u'Too many connections'
1.出现问题: openstack运行过程中出现如下问题: OperationalError: (pymysql.err.OperationalError) (1040, u'Too many con ...
- 20190104xlVBA_在课表里标记自己的课程
Sub TagMyCourses() Const HEAD_ROW = 3 With ActiveSheet endrow = .Cells.Find("*", .Cells(1, ...
- 发布web站点数据库环境的问题
今天在公司部署web站点的时候发现了一个比较低级的错误,公司映射的外网的IP我们内部人员是无法进行访问的,结果我把站点配置文件中的IP改成是外网的IP,站点一直无法访问到数据.后面发现问题是,当外网用 ...