您的位置:

js导出excel实例,js导出excel文件

js导出excel实例,js导出excel文件

更新:

本文目录一览:

js如何导出excel

简单的办法:使用js生成一个table,可以直接复制到excel中,网上有很多表格插件

复杂的办法:js传递数据到服务器,服务器生成表格后返回一个下载链接

如何用js导出数据Excel

(function ($) {

Date.prototype.Format = function (fmt) {

var o = {

"M+": this.getMonth() + 1, //月份

"d+": this.getDate(), //日

"h+": this.getHours(), //小时

"m+": this.getMinutes(), //分

"s+": this.getSeconds(), //秒

"q+": Math.floor((this.getMonth() + 3) / 3), //季度

"S": this.getMilliseconds() //毫秒

};

if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));

for (var k in o)

if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));

return fmt;

}

$.fn.ExportExcel = function (thread_id,tab_id, options) {

var defaults = {

height: '24px',

'line-height': '24px',

margin: '0 5px',

padding: '0 11px',

color: '#000',

background: '#02bafa',

border: '1px #26bbdb solid',

'border-radius': '3px',

/*color: #fff;*/

display: 'inline-block',

'text-decoration': 'none',

'font-size': '12px',

outline: 'none',

cursor: 'pointer'

}

var options = $.extend(defaults, options);

return this.each(function () {

var currentObject = $(this); //获取当前对象

currentObject.css(defaults);

currentObject.onmouseover = function () {

$(this).css('cursor', 'hand');

};

currentObject.click(function () {

//From:jsfiddle.net/h42y4ke2/16/

var tab_text = 'html xmlns:x="urn:schemas-microsoft-com:office:excel"';

tab_text = tab_text + 'headxmlx:ExcelWorkbookx:ExcelWorksheetsx:ExcelWorksheet';

tab_text = tab_text + 'x:NameTest Sheet/x:Name';

tab_text = tab_text + 'x:WorksheetOptionsx:Panes/x:Panes/x:WorksheetOptions/x:ExcelWorksheet';

tab_text = tab_text + '/x:ExcelWorksheets/x:ExcelWorkbook/xml/headbody';

tab_text = tab_text + "table border='1px'";

tab_text = tab_text + $('#' + thread_id).html();

tab_text = tab_text + $('#' + tab_id).html();

tab_text = tab_text + '/table/body/html';

var data_type = 'data:application/vnd.ms-excel';

var timeStr = new Date().Format('yyyyMMddhhmmss');

$(this).attr('href', data_type + ', ' + encodeURIComponent(tab_text));

$(this).attr('download', '日常数据报表' + timeStr + '.xls');

});

})

}

})(jQuery);

html

a href="#" id="export"导出/a

table

thead id="theadDate"

tr

th姓名/th

th班级/th

th年龄/th

/tr

/thead

tbody id="tbodyDate"

tr  td张三/td

td高二/td

td18/td

/tr

tr

td李四/td

td高三/td

td20/td

/tr

/tbody

/table

script src="assets/javascripts/autotest/export-excel.js" /script!-- 引入js文件--

script type="text/javascript"

//导出 调用

$(function () {

$('#export').ExportExcel('theadDate','tbodyDate'); //tbodyDate为table的id,export为a标签。

});

/script

/html

js 导出大数据到excel

完整代码:

//导出excelfunction tableToExcel(){

var arrSor = ["sorttable10","sorttable30","sorttable60","sorttable120"]

let str = "";

for (var k = 0; k arrSor.length; k++) {

var tab=document.getElementById(arrSor[k]);

var rows=tab.rows;

const jsonData = [];

for(var i=2;irows.length;i++){ //遍历表格的行

var json = {};

for(var j=0;jrows[i].cells.length;j++){ //遍历每行的列

json[(i+1)+"-"+(j+1)] = rows[i].cells[j].innerHTML;

}

jsonData.push(json);

}

//列标题

let str1 = "trtd align='center' colspan='5'b最大"+arrSor[k].substring(9,arrSor[k].length)+"分钟雨量/b/td/tr";

let str2 = "tr align='center'th站点/thth站名/thth雨量最大值/thth降水时段/thth落入最大降水时段/th/tr";

//循环遍历,每行加入tr标签,每个单元格加td标签

for(let i = 0 ; i jsonData.length ; i++ ){

str2+='tr';

for(let item in jsonData[i]){

//增加\t为了不让表格显示科学计数法或者其他格式

var itemTem= jsonData[i][item];

if (itemTem == "暂无数据") {

str2+=`td colspan='5' align='center'${ itemTem + '\t'}/td`;

}else {

str2+=`td align='center'${ itemTem + '\t'}/td`;

}

}

str2+='/tr';

}

let str3 = "trtd colspan='5'/td/tr";

str += (str1 + str2 + str3);

}

let worksheet = '雨量最大值'

let uri = 'data:application/vnd.ms-excel;base64,';

//下载的表格模板数据

let template = `html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns=""headmeta charset='UTF-8'!--[if gte mso 9]xml

x:ExcelWorkbookx:ExcelWorksheetsx:ExcelWorksheet

x:Name${worksheet}/x:Namex:WorksheetOptionsx:DisplayGridlines//x:WorksheetOptions/x:ExcelWorksheet/x:ExcelWorksheets/x:ExcelWorkbook/xml![endif]--

style type="text/css"

table {border: 1px solid #000000;}

table tr td b {background:#FFFFFF;color:#3D3D3D;font-size:24px;border: 1px solid #000000;}

table th {background:#AEE1FE;color:#3D3D3D;font-size:20px;border: 1px solid #000000;}

table td {background:#FFFFFF;color:#3D3D3D;font-size:20px;border: 1px solid #000000;}/style

/headbodytable${str}/table/body/html`;

//下载模板

// window.location.href = uri + this.base64(template)

var link = document.createElement("a");

link.href = uri + this.base64(template);

link.download = "雨量最大值-" +new Date().format("yyyy年MM月dd日 h时")+ ".xls";

link.style = "visibility:hidden";

document.body.appendChild(link);

link.click();

document.body.removeChild(link);}//输出base64编码function base64 (template) {

return window.btoa(unescape(encodeURIComponent(template))) }

解析:

遍历取出表,顺序是行从上往下,列从左往右,将数据存进数组,下面再拼接成表。

image.png

参考文章:

第一种方法(大量数据导出)

//导出excelfunction tableToExcel() {

var arrSor = ["sorttable10","sorttable30","sorttable60","sorttable120"]

let str = "";

for (var k = 0; k arrSor.length; k++) {

var tab=document.getElementById(arrSor[k]);

var rows=tab.rows;

const jsonData = [];

for(var i=2;irows.length;i++){ //遍历表格的行

var json = {};

for(var j=0;jrows[i].cells.length;j++){ //遍历每行的列

if (rows[i].cells[j].outerHTML.indexOf("rgb(255, 255, 0)") != -1) {

json["yellow"+(i+1)+"-"+(j+1)] = rows[i].cells[j].innerHTML;

}else {

json[(i+1)+"-"+(j+1)] = rows[i].cells[j].innerHTML;

}

}

jsonData.push(json);

}

//列标题

let str1 = "trtd colspan='5' align='center' style='background-color:#FFFFFF;font-size:24px;border: 1px solid #000000;'b最大"

+arrSor[k].substring(9,arrSor[k].length)+"分钟雨量/b/td/tr";

let str2 = "tr" +

"th style='background-color:#AEE1FE;font-size:22px;border: 1px solid #000000;' align='center'站点/th" +

"th style='background-color:#AEE1FE;font-size:22px;border: 1px solid #000000;' align='center'站名/th" +

"th style='background-color:#AEE1FE;font-size:22px;border: 1px solid #000000;' align='center'雨量最大值/th" +

"th style='background-color:#AEE1FE;font-size:22px;border: 1px solid #000000;' align='center'降水时段/th" +

"th style='background-color:#AEE1FE;font-size:22px;border: 1px solid #000000;' align='center'落入最大降水时段/th/tr";

//循环遍历,每行加入tr标签,每个单元格加td标签

for(let i = 0 ; i jsonData.length ; i++ ){

str2+="tr align='center'";

for(let item in jsonData[i]){

if (item.indexOf("yellow") != -1) {//取列数等于3

//增加\t为了不让表格显示科学计数法或者其他格式

var itemTem= jsonData[i][item];

if (itemTem == "暂无数据") {

str2+=`td colspan='5' style='background-color:#FFFF00;font-size:22px;border: 1px solid #000000;' ${ itemTem + '\t'}/td`;

}else {

str2+=`td style='background-color:#FFFF00;font-size:22px;border: 1px solid #000000;' ${ itemTem + '\t'}/td`;

}

}else {

//增加\t为了不让表格显示科学计数法或者其他格式

var itemTem= jsonData[i][item];

if (itemTem == "暂无数据") {

str2+=`td colspan='5' style='background-color:#FFFFFF;font-size:22px;border: 1px solid #000000;' ${ itemTem + '\t'}/td`;

}else {

str2+=`td style='background-color:#FFFFFF;font-size:22px;border: 1px solid #000000;' ${ itemTem + '\t'}/td`;

}

}

}

str2+='/tr';

}

let str3 = "trtd colspan='5' style='background-color:#FFFFFF;border: 1px solid #000000;'/td/tr";

str += (str1 + str2 + str3);

}

var tableHtml="htmlheadmeta charset='UTF-8'/headbodytable"+str+"/body/html"

var excelBlob = new Blob([tableHtml], {type: 'application/vnd.ms-excel'});

var fileName = "雨量最大值-"+new Date().format("yyyy年MM月dd日 h时")+".xls";

if(isIE()){

window.navigator.msSaveOrOpenBlob(excelBlob,fileName);

}else{

var oa = document.createElement('a');

oa.href = URL.createObjectURL(excelBlob);

oa.download = fileName;

document.body.appendChild(oa);

oa.click();

}} //判断是否IE浏览器function isIE() {

if (!!window.ActiveXObject || "ActiveXObject" in window) {

return true;

} else {

return false;

}}

参考文章:

JS 下载/导出 csv、excel、txt 、img等文件的方法总结

1. 调用后端接口导出文件

示例下载接口url

1.1 window.open(url)

会打开一个新窗口,开始下载后会自动关闭新窗口。Safair 下载后没有关闭新窗口。

Chrome、IE、Safair支持,貌似火狐不支持

1.2 window.location=url

在当前窗口下载

Chrome、Safair支持

1.3 iframe

在HTML中,iframe 的属性用src,但在JS中,只有部份浏览器支持修改src(读是没问题),真正通用的是要修改对应框架的href值。

1.4 a href="url" download="filename"点击链接下载/a

HTML5中给a标签增加了一个download属性,只要有这个属性,点击这个链接时浏览器就不在打开链接指向的文件,而是改为下载,目前只有chrome、firefox、opera、Edge支持。常用此方法点击下载图片。

IE既不支持a标签的download属性也不允许js调用a 标签的click方法。

2. 前端直接导出文件到本地

2.1 将数据转成DataURI用a标签下载

a href="DataURI" download="filename"点击链接下载/a

Data URI Scheme

Data URI Scheme是指可以在Web 页面中包含图片但无需任何额外的HTTP 请求的一类URI。 Data URI Scheme一般用于将经过base64编码的数据嵌入网页中,从而减少请求资源的链接数。IE8 之前的版本都不支持 data URI scheme。

DataURI的格式:

生成DataURI的方式

1. encodeURIComponent

使用这种方式,当数据过多时,URI长度容易超出浏览器限制。 encodeURIComponent常用来转码接口参数,为了避免服务器收到不可预知的请求,对任何用户输入的作为URI部分的内容都需要用encodeURIComponent进行转义。

2. URL.createObjectURL

URL.createObjectURL的参数是File对象或者Blob对象

IE10以下不支持URL.createObjectURL

2.2 windows.navigator.msSaveBlob IE10~Edge 专用

msSaveBlob 是IE10~Edge 私有方法。

2.3 execCommand

有的资料有提到IE9可以使用execCommand方法来保存数据到本地文件,但是我自己没有验证过,不知道是否可行。而且MDN文档中execCommand没有查到SaveAs命令。这块只是做个小记录。

js数据直接导出/下载数据到本地到方法总结

本文转载自:

firefox浏览器下用JS的方式导出excel

firefox浏览器下用JS的方式导出excel,可以依照以下方法:

1、没有具体的代码,但是可以为您提供一个实现思路。我们知道js导出文件实际就是输出二进制文件(前提是您的浏览器权限足以让您的js脚本访问本地文件),您只需要按照excel(组建单的是csv的格式)进行文件输出即可,但是对于功能较为复杂的excel文件(如包含有函数、单元格锁定等)则仅仅用js是无法实现的,推荐考虑使用jxls等专用服务器端组件。

2、用下面这个方法来来导出excel

function exp() {

try{

windows.clipboardData.setData("Text",document.all('table1').outerHTML);

var ExApp = new ActiveXObject("Excel.Application")

var ExBk = ExApp.workbooks.add()

var ExWSh = ExWBk.worksheets(1)

ExApp.DisplayAlerts = false

ExApp.visible = true

}catch(e){

top.Dialog.alert("xxxxxxxxxxxxxxxx")

return false

}

ExWBk.worksheets(1).Paste;

3、也可以这样:

object style='display:none' classid="clsid:0002E559-0000-0000-C000-000000000046" id="EXPORT_OBJECT1"/object

script type="text/javascript"

EXPORT_OBJECT1. EXPORT_OBJECT1.Export([Filename],[Action],[Fromat]);

/script

js导出excel实例,js导出excel文件

本文目录一览: 1、js如何导出excel 2、如何用js导出数据Excel 3、js 导出大数据到excel 4、JS 下载/导出 csv、excel、txt 、img等文件的方法总结 5、fire

2023-12-08
js导入excel实例,js导入导出excel

2022-11-23
vue3导出excel文件详解

2023-05-19
导出csv文件js(导出csv文件 中文乱码)

本文目录一览: 1、使用angularJs的ng-csv导出CSV,能不能在导出CSV的时候里面有多个sheet? 2、JS 下载/导出 csv、excel、txt 、img等文件的方法总结 3、如何

2023-12-08
Vue前端导出Excel表格

2023-05-20
java导出文件,java导出文件到本地

2022-11-30
Vue导入导出Excel详细解析

2023-05-21
js怎么导入csv,js怎么导入Excel表

本文目录一览: 1、JS 下载/导出 csv、excel、txt 、img等文件的方法总结 2、前端js实现数据写csv文件,并下载 3、如何用JS或Ajax读取csv文件 4、javascript

2023-12-08
Vue导出Excel文件

2023-05-18
js网页文件导入导出(如何将网页文件导出)

本文目录一览: 1、怎么使用数据库筛选js文件的数据并导出到excel? 2、nodejs文件之间分别使用什么函数与对象进行导入导出的操作 3、Javascript实现把网页中table的内容导出到e

2023-12-08
Vue3中导出Excel表格

2023-05-18
javaexcel导出,java excel导出工具

2023-01-05
php导出表格到html,php导出大量数据到excel

2023-01-04
php导出excel中文乱码,文件导出excel是乱码

2022-12-02
SpringBoot导出Excel实现

2023-05-21
PHP导出Excel文件

2023-05-24
Postman导出Excel文件

2023-05-17
sxssfworkbook导出excel

2023-05-19
EasyExcel导出Excel详解

2023-05-21
java导出excel,java导出excel数据量大 优化

2023-01-07