<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ExportTablesToExcel</title>
<script src="js/echarts.js"></script>
<script src="js/jquery.js"></script>
</head>
<style>
#tabDiv1,#tabDiv2,#tabDiv3{border:1px solid pink;margin:10px auto;width:100%; }
button{width:100%;}
</style>
<body>
<div id="tablesDiv">
<table id="tabDiv1">
<tr>
<td>ID</td>
<td>姓名</td>
<td>年龄</td>
</tr>
<tr>
<td>0001</td>
<td>张三</td>
<td>24</td>
</tr>
</table>
<table id="tabDiv2">
<tr>
<td>ID</td>
<td>姓名</td>
<td>年龄</td>
</tr>
<tr>
<td>0002</td>
<td>李四</td>
<td>24</td>
</tr>
</table>
<table id="tabDiv3">
<tr>
<td>ID</td>
<td>姓名</td>
<td>年龄</td>
</tr>
<tr>
<td>0003</td>
<td>王五</td>
<td>24</td>
</tr>
</table>
<button onclick="exp();">export to excel...</button>
</div>
</body>
<script>
function exp(){
tablesToExcel(['tabDiv1','tabDiv2','tabDiv3'], ['sheet1','sheet2','sheet3'], "testExport.xls", "Excel");
}
//导出excel包含多个sheet
//tables:tableId的数组;wsbames:sheet的名字数组;wbname:工作簿名字;appname:Excel
function tablesToExcel(tables, wsnames, wbname, appname){
var uri = 'data:application/vnd.ms-excel;base64,'
, tmplWorkbookXML = '<?xml version="1.0"?><?mso-application progid="Excel.Sheet"?><Workbook xmlns="urn:schemas-microsoft-com:office:spreadsheet" xmlns:ss="urn:schemas-microsoft-com:office:spreadsheet">'
+ '<DocumentProperties xmlns="urn:schemas-microsoft-com:office:office"><Author>Axel Richter</Author><Created>{created}</Created></DocumentProperties>'
+ '<Styles>'
+ '<Style ss:ID="Currency"><NumberFormat ss:Format="Currency"></NumberFormat></Style>'
+ '<Style ss:ID="Date"><NumberFormat ss:Format="Medium Date"></NumberFormat></Style>'
+ '</Styles>'
+ '{worksheets}</Workbook>'
, tmplWorksheetXML = '<Worksheet ss:Name="{nameWS}"><Table>{rows}</Table></Worksheet>'
, tmplCellXML = '<Cell{attributeStyleID}{attributeFormula}><Data ss:Type="{nameType}">{data}</Data></Cell>'
, base64 = function(s) { return window.btoa(unescape(encodeURIComponent(s))) }
, format = function(s, c) { return s.replace(/{(\w+)}/g, function(m, p) { return c[p]; }) }
var ctx = "";
var workbookXML = "";
var worksheetsXML = "";
var rowsXML = "";
for (var i = 0; i < tables.length; i++) {
if (!tables[i].nodeType) tables[i] = document.getElementById(tables[i]);
// 控制要导出的行数
for (var j = 0; j < tables[i].rows.length; j++) {
rowsXML += '<Row>';
for (var k = 0; k < tables[i].rows[j].cells.length; k++) {
var dataType = tables[i].rows[j].cells[k].getAttribute("data-type");
var dataStyle = tables[i].rows[j].cells[k].getAttribute("data-style");
var dataValue = tables[i].rows[j].cells[k].getAttribute("data-value");
dataValue = (dataValue)?dataValue:tables[i].rows[j].cells[k].innerHTML;
var dataFormula = tables[i].rows[j].cells[k].getAttribute("data-formula");
dataFormula = (dataFormula)?dataFormula:(appname=='Calc' && dataType=='DateTime')?dataValue:null;
ctx = { attributeStyleID: (dataStyle=='Currency' || dataStyle=='Date')?' ss:StyleID="'+dataStyle+'"':''
, nameType: (dataType=='Number' || dataType=='DateTime' || dataType=='Boolean' || dataType=='Error')?dataType:'String'
, data: (dataFormula)?'':dataValue
, attributeFormula: (dataFormula)?' ss:Formula="'+dataFormula+'"':''
};
rowsXML += format(tmplCellXML, ctx);
}
rowsXML += '</Row>'
}
ctx = {rows: rowsXML, nameWS: wsnames[i] || 'Sheet' + i};
worksheetsXML += format(tmplWorksheetXML, ctx);
rowsXML = "";
}
ctx = {created: (new Date()).getTime(), worksheets: worksheetsXML};
workbookXML = format(tmplWorkbookXML, ctx);
// 查看后台的打印输出
//console.log(workbookXML);
var link = document.createElement("A");
link.href = uri + base64(workbookXML);
link.download = wbname || 'Workbook.xls';
link.target = '_blank';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
</script>
</html>
分享到:
相关推荐
js 导出table为excel/csv/png/txt/doc文件(支持中文),常用JavaScript方法
js导出table 可自定义导出文件名,可导出css样式,也是我在项目中用到的,希望可以帮助到大家,里面有注释讲解
纯JS将table表格导出到excel的方法 html <div > ('tableExcel','myDiv')">IE导出Excel方法</button> ('tableExcel')">Chrome导出Excel</button> </div> <div id="myDiv"> <table id="tableExcel" ...
资源提供js操作html、table导出生成excel文件,代码简介易懂
js导出table表格数据(包括excel,xml,json,csv等格式)
这是一个前端通过js导出页面的table生成并下载excel的demo
用于bootstrap数据表格的导出插件,在引入bootstrap其他主要js和css的前提下,再将bootstrap-table-export.js和tableExport.js引入。包里有两个版本的
加压后可以直接运行,主要包含1、table_export.html,内容:tableExport.js导出table成Excel (不支持IE) 2、new_file.html 内容:无插件、原生js导出table成Excel(支持IE\谷歌等主流浏览器)
javascript代码可以将HTML的table表格转换成excel表格。var table = document.getElementById("table")[removed]; export2Excel(table, '导出.xls');
如果后台不提供导出excel表格的接口,那么我们js有自己的方法可以支持。操作简单,可封装。完全抛弃后台,自己展示,自己导出,非常实用,资源内包含demo,一目了然。(原生js浏览器全兼容)
javascri实现将table中数据保存到excel中
该插件可以将Html的表格导出成为 JSON, XML, CSV, TSV, ...在项目上遇到pdf导出中文乱码问题,经过一天的研究修改了一些js代码解决了pdf导出中文乱码问题,随便融入了一个html打印功能的js,有需要的可以下载来看看。
导出生成excel,打印PDF等等,打印的话用的是浏览器的打印,不需要引用外部的文件。全部用js就可以完成。直接下载,直接运行。
代码如下:function ExportToExcel(tableId) //读取表格中每个单元到EXCEL中 { try{ var curTbl = document.getElementById(tableId); var oXL = new ActiveXObject(“Excel.Application”); //创建AX对象excel ...
里面包含了jquery.table2excel.js,用于table直接导出Excel文件,有例子可以参考
简单方便的jquery.table2excel.js 实现table导出到excel中,可以自行修改js代码
自从上次用bootstrap table就一直没有解决导出excel的关题,网上找到的那更改tableExport.js和jquery.base64.js的方法虽然可以正常导出,但中文依旧乱码... 解决方法终归是有的....现将文件分享给大家. 里面有table...
使用tableExport.js将table导出Excel时,必须用的Bootstrap中的FileSaver.js文档
bootstraptable 可以直接导出的插件,导出内容自动居中处理 https://blog.csdn.net/qq_39087348/article/details/112970600
一个例子,实现导出HTML中的table数据到excel。 一个完整例子,实现导出HTML中的table数据到excel。