导出table为Excel
1、HTML
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>table export</title>
</head>
<body>
<table id="table2">
<thead>
<tr>
<td>标题一</td>
<td>标题二</td>
<td>标题三</td>
</tr>
</thead>
<tbody>
<tr>
<td><a href="#" target="_blank">文字</a></td>
<td>咨询</td>
<td>测试</td>
</tr>
<tr>
<td><a href="#" target="_blank">文字</a></td>
<td>咨询</td>
<td>测试</td>
</tr>
<tr>
<td><a href="#" target="_blank">文字</a></td>
<td>咨询</td>
<td>测试</td>
</tr>
<tr>
<td><a href="#" target="_blank">文字</a></td>
<td>咨询</td>
<td>测试</td>
</tr>
<tr>
<td><a href="#" target="_blank">文字</a></td>
<td>咨询</td>
<td>测试</td>
</tr>
<tr>
<td><a href="#" target="_blank">文字</a></td>
<td>咨询</td>
<td>测试</td>
</tr>
</tbody>
</table>
<div id="export">
<a data-type="json" href="javascript:;">导出json</a>
<a data-type="txt" href="javascript:;">导出txt</a>
<a data-type="csv" href="javascript:;">导出csv</a>
<a data-type="xls" href="javascript:;">导出excel</a>
<a data-type="doc" href="javascript:;">导出word</a>
</div>
<script src="Blob.js"></script>
<script src="FileSaver.js"></script>
<script src="tableExport.js"></script>
<script>
var $exportLink = document.getElementById('export');
$exportLink.addEventListener('click', function(e){
e.preventDefault();
if(e.target.nodeName === "A"){
tableExport('table2', '测试测试', e.target.getAttribute('data-type'));
}
}, false);
</script>
</body>
</html>
2、Blob.js
/* Blob.js
* A Blob implementation.
* 2014-07-24
*
* By Eli Grey, http://eligrey.com
* By Devin Samarin, https://github.com/dsamarin
* License: X11/MIT
* See https://github.com/eligrey/Blob.js/blob/master/LICENSE.md
*/ /*global self, unescape */
/*jslint bitwise: true, regexp: true, confusion: true, es5: true, vars: true, white: true,
plusplus: true */ /*! @source http://purl.eligrey.com/github/Blob.js/blob/master/Blob.js */ (function (view) {
"use strict"; view.URL = view.URL || view.webkitURL; if (view.Blob && view.URL) {
try {
new Blob;
return;
} catch (e) {}
} // Internally we use a BlobBuilder implementation to base Blob off of
// in order to support older browsers that only have BlobBuilder
var BlobBuilder = view.BlobBuilder || view.WebKitBlobBuilder || view.MozBlobBuilder || (function(view) {
var
get_class = function(object) {
return Object.prototype.toString.call(object).match(/^\[object\s(.*)\]$/)[1];
}
, FakeBlobBuilder = function BlobBuilder() {
this.data = [];
}
, FakeBlob = function Blob(data, type, encoding) {
this.data = data;
this.size = data.length;
this.type = type;
this.encoding = encoding;
}
, FBB_proto = FakeBlobBuilder.prototype
, FB_proto = FakeBlob.prototype
, FileReaderSync = view.FileReaderSync
, FileException = function(type) {
this.code = this[this.name = type];
}
, file_ex_codes = (
"NOT_FOUND_ERR SECURITY_ERR ABORT_ERR NOT_READABLE_ERR ENCODING_ERR "
+ "NO_MODIFICATION_ALLOWED_ERR INVALID_STATE_ERR SYNTAX_ERR"
).split(" ")
, file_ex_code = file_ex_codes.length
, real_URL = view.URL || view.webkitURL || view
, real_create_object_URL = real_URL.createObjectURL
, real_revoke_object_URL = real_URL.revokeObjectURL
, URL = real_URL
, btoa = view.btoa
, atob = view.atob , ArrayBuffer = view.ArrayBuffer
, Uint8Array = view.Uint8Array , origin = /^[\w-]+:\/*\[?[\w\.:-]+\]?(?::[0-9]+)?/
;
FakeBlob.fake = FB_proto.fake = true;
while (file_ex_code--) {
FileException.prototype[file_ex_codes[file_ex_code]] = file_ex_code + 1;
}
// Polyfill URL
if (!real_URL.createObjectURL) {
URL = view.URL = function(uri) {
var
uri_info = document.createElementNS("http://www.w3.org/1999/xhtml", "a")
, uri_origin
;
uri_info.href = uri;
if (!("origin" in uri_info)) {
if (uri_info.protocol.toLowerCase() === "data:") {
uri_info.origin = null;
} else {
uri_origin = uri.match(origin);
uri_info.origin = uri_origin && uri_origin[1];
}
}
return uri_info;
};
}
URL.createObjectURL = function(blob) {
var
type = blob.type
, data_URI_header
;
if (type === null) {
type = "application/octet-stream";
}
if (blob instanceof FakeBlob) {
data_URI_header = "data:" + type;
if (blob.encoding === "base64") {
return data_URI_header + ";base64," + blob.data;
} else if (blob.encoding === "URI") {
return data_URI_header + "," + decodeURIComponent(blob.data);
} if (btoa) {
return data_URI_header + ";base64," + btoa(blob.data);
} else {
return data_URI_header + "," + encodeURIComponent(blob.data);
}
} else if (real_create_object_URL) {
return real_create_object_URL.call(real_URL, blob);
}
};
URL.revokeObjectURL = function(object_URL) {
if (object_URL.substring(0, 5) !== "data:" && real_revoke_object_URL) {
real_revoke_object_URL.call(real_URL, object_URL);
}
};
FBB_proto.append = function(data/*, endings*/) {
var bb = this.data;
// decode data to a binary string
if (Uint8Array && (data instanceof ArrayBuffer || data instanceof Uint8Array)) {
var
str = ""
, buf = new Uint8Array(data)
, i = 0
, buf_len = buf.length
;
for (; i < buf_len; i++) {
str += String.fromCharCode(buf[i]);
}
bb.push(str);
} else if (get_class(data) === "Blob" || get_class(data) === "File") {
if (FileReaderSync) {
var fr = new FileReaderSync;
bb.push(fr.readAsBinaryString(data));
} else {
// async FileReader won't work as BlobBuilder is sync
throw new FileException("NOT_READABLE_ERR");
}
} else if (data instanceof FakeBlob) {
if (data.encoding === "base64" && atob) {
bb.push(atob(data.data));
} else if (data.encoding === "URI") {
bb.push(decodeURIComponent(data.data));
} else if (data.encoding === "raw") {
bb.push(data.data);
}
} else {
if (typeof data !== "string") {
data += ""; // convert unsupported types to strings
}
// decode UTF-16 to binary string
bb.push(unescape(encodeURIComponent(data)));
}
};
FBB_proto.getBlob = function(type) {
if (!arguments.length) {
type = null;
}
return new FakeBlob(this.data.join(""), type, "raw");
};
FBB_proto.toString = function() {
return "[object BlobBuilder]";
};
FB_proto.slice = function(start, end, type) {
var args = arguments.length;
if (args < 3) {
type = null;
}
return new FakeBlob(
this.data.slice(start, args > 1 ? end : this.data.length)
, type
, this.encoding
);
};
FB_proto.toString = function() {
return "[object Blob]";
};
FB_proto.close = function() {
this.size = 0;
delete this.data;
};
return FakeBlobBuilder;
}(view)); view.Blob = function(blobParts, options) {
var type = options ? (options.type || "") : "";
var builder = new BlobBuilder();
if (blobParts) {
for (var i = 0, len = blobParts.length; i < len; i++) {
builder.append(blobParts[i]);
}
}
return builder.getBlob(type);
};
}(typeof self !== "undefined" && self || typeof window !== "undefined" && window || this.content || this));
3、FileSaver.js
/* FileSaver.js
* A saveAs() FileSaver implementation.
* 2014-08-29
*
* By Eli Grey, http://eligrey.com
* License: X11/MIT
* See https://github.com/eligrey/FileSaver.js/blob/master/LICENSE.md
*/ /*global self */
/*jslint bitwise: true, indent: 4, laxbreak: true, laxcomma: true, smarttabs: true, plusplus: true */ /*! @source http://purl.eligrey.com/github/FileSaver.js/blob/master/FileSaver.js */ var saveAs = saveAs
// IE 10+ (native saveAs)
|| (typeof navigator !== "undefined" &&
navigator.msSaveOrOpenBlob && navigator.msSaveOrOpenBlob.bind(navigator))
// Everyone else
|| (function(view) {
"use strict";
// IE <10 is explicitly unsupported
if (typeof navigator !== "undefined" &&
/MSIE [1-9]\./.test(navigator.userAgent)) {
return;
}
var
doc = view.document
// only get URL when necessary in case Blob.js hasn't overridden it yet
, get_URL = function() {
return view.URL || view.webkitURL || view;
}
, save_link = doc.createElementNS("http://www.w3.org/1999/xhtml", "a")
, can_use_save_link = "download" in save_link
, click = function(node) {
var event = doc.createEvent("MouseEvents");
event.initMouseEvent(
"click", true, false, view, 0, 0, 0, 0, 0
, false, false, false, false, 0, null
);
node.dispatchEvent(event);
}
, webkit_req_fs = view.webkitRequestFileSystem
, req_fs = view.requestFileSystem || webkit_req_fs || view.mozRequestFileSystem
, throw_outside = function(ex) {
(view.setImmediate || view.setTimeout)(function() {
throw ex;
}, 0);
}
, force_saveable_type = "application/octet-stream"
, fs_min_size = 0
// See https://code.google.com/p/chromium/issues/detail?id=375297#c7 for
// the reasoning behind the timeout and revocation flow
, arbitrary_revoke_timeout = 10
, revoke = function(file) {
var revoker = function() {
if (typeof file === "string") { // file is an object URL
get_URL().revokeObjectURL(file);
} else { // file is a File
file.remove();
}
};
if (view.chrome) {
revoker();
} else {
setTimeout(revoker, arbitrary_revoke_timeout);
}
}
, dispatch = function(filesaver, event_types, event) {
event_types = [].concat(event_types);
var i = event_types.length;
while (i--) {
var listener = filesaver["on" + event_types[i]];
if (typeof listener === "function") {
try {
listener.call(filesaver, event || filesaver);
} catch (ex) {
throw_outside(ex);
}
}
}
}
, FileSaver = function(blob, name) {
// First try a.download, then web filesystem, then object URLs
var
filesaver = this
, type = blob.type
, blob_changed = false
, object_url
, target_view
, dispatch_all = function() {
dispatch(filesaver, "writestart progress write writeend".split(" "));
}
// on any filesys errors revert to saving with object URLs
, fs_error = function() {
// don't create more object URLs than needed
if (blob_changed || !object_url) {
object_url = get_URL().createObjectURL(blob);
}
if (target_view) {
target_view.location.href = object_url;
} else {
var new_tab = view.open(object_url, "_blank");
if (new_tab == undefined && typeof safari !== "undefined") {
//Apple do not allow window.open, see http://bit.ly/1kZffRI
view.location.href = object_url
}
}
filesaver.readyState = filesaver.DONE;
dispatch_all();
revoke(object_url);
}
, abortable = function(func) {
return function() {
if (filesaver.readyState !== filesaver.DONE) {
return func.apply(this, arguments);
}
};
}
, create_if_not_found = {create: true, exclusive: false}
, slice
;
filesaver.readyState = filesaver.INIT;
if (!name) {
name = "download";
}
if (can_use_save_link) {
object_url = get_URL().createObjectURL(blob);
save_link.href = object_url;
save_link.download = name;
click(save_link);
filesaver.readyState = filesaver.DONE;
dispatch_all();
revoke(object_url);
return;
}
// Object and web filesystem URLs have a problem saving in Google Chrome when
// viewed in a tab, so I force save with application/octet-stream
// http://code.google.com/p/chromium/issues/detail?id=91158
// Update: Google errantly closed 91158, I submitted it again:
// https://code.google.com/p/chromium/issues/detail?id=389642
if (view.chrome && type && type !== force_saveable_type) {
slice = blob.slice || blob.webkitSlice;
blob = slice.call(blob, 0, blob.size, force_saveable_type);
blob_changed = true;
}
// Since I can't be sure that the guessed media type will trigger a download
// in WebKit, I append .download to the filename.
// https://bugs.webkit.org/show_bug.cgi?id=65440
if (webkit_req_fs && name !== "download") {
name += ".download";
}
if (type === force_saveable_type || webkit_req_fs) {
target_view = view;
}
if (!req_fs) {
fs_error();
return;
}
fs_min_size += blob.size;
req_fs(view.TEMPORARY, fs_min_size, abortable(function(fs) {
fs.root.getDirectory("saved", create_if_not_found, abortable(function(dir) {
var save = function() {
dir.getFile(name, create_if_not_found, abortable(function(file) {
file.createWriter(abortable(function(writer) {
writer.onwriteend = function(event) {
target_view.location.href = file.toURL();
filesaver.readyState = filesaver.DONE;
dispatch(filesaver, "writeend", event);
revoke(file);
};
writer.onerror = function() {
var error = writer.error;
if (error.code !== error.ABORT_ERR) {
fs_error();
}
};
"writestart progress write abort".split(" ").forEach(function(event) {
writer["on" + event] = filesaver["on" + event];
});
writer.write(blob);
filesaver.abort = function() {
writer.abort();
filesaver.readyState = filesaver.DONE;
};
filesaver.readyState = filesaver.WRITING;
}), fs_error);
}), fs_error);
};
dir.getFile(name, {create: false}, abortable(function(file) {
// delete file if it already exists
file.remove();
save();
}), abortable(function(ex) {
if (ex.code === ex.NOT_FOUND_ERR) {
save();
} else {
fs_error();
}
}));
}), fs_error);
}), fs_error);
}
, FS_proto = FileSaver.prototype
, saveAs = function(blob, name) {
return new FileSaver(blob, name);
}
;
FS_proto.abort = function() {
var filesaver = this;
filesaver.readyState = filesaver.DONE;
dispatch(filesaver, "abort");
};
FS_proto.readyState = FS_proto.INIT = 0;
FS_proto.WRITING = 1;
FS_proto.DONE = 2; FS_proto.error =
FS_proto.onwritestart =
FS_proto.onprogress =
FS_proto.onwrite =
FS_proto.onabort =
FS_proto.onerror =
FS_proto.onwriteend =
null; return saveAs;
}(
typeof self !== "undefined" && self
|| typeof window !== "undefined" && window
|| this.content
));
// `self` is undefined in Firefox for Android content script context
// while `this` is nsIContentFrameMessageManager
// with an attribute `content` that corresponds to the window if (typeof module !== "undefined" && module !== null) {
module.exports = saveAs;
} else if ((typeof define !== "undefined" && define !== null) && (define.amd != null)) {
define([], function() {
return saveAs;
});
}
4、tableExport.js
(function(view){
"use strict";
var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';
var fromCharCode = String.fromCharCode;
var INVALID_CHARACTER_ERR = ( function() {
// fabricate a suitable error object
try {
document.createElement('$');
} catch (error) {
return error;
}
}());
// encoder
var btoa = function(string) {
var a, b, b1, b2, b3, b4, c, i = 0, len = string.length, max = Math.max, result = '';
while (i < len) {
a = string.charCodeAt(i++) || 0;
b = string.charCodeAt(i++) || 0;
c = string.charCodeAt(i++) || 0;
if (max(a, b, c) > 0xFF) {
throw INVALID_CHARACTER_ERR;
}
b1 = (a >> 2) & 0x3F;
b2 = ((a & 0x3) << 4) | ((b >> 4) & 0xF);
b3 = ((b & 0xF) << 2) | ((c >> 6) & 0x3);
b4 = c & 0x3F;
if (!b) {
b3 = b4 = 64;
} else if (!c) {
b4 = 64;
}
result += characters.charAt(b1) + characters.charAt(b2) + characters.charAt(b3) + characters.charAt(b4);
}
return result;
};
//获取dom文本
var getText = function( el ){
var s = el.textContent || el.innerText;
return s == null ? "" : s.replace( /^\s*(.*?)\s+$/, "$1");
};
view.tableExport = function(tableId, filename, type){
var doc = view.document,
table = doc.getElementById(tableId),
charSet = doc.characterSet
var uri = {
json: 'application/json;charset='+charSet,
txt: 'csv/txt;charset='+charSet,
csv: 'csv/txt;charset='+charSet,
doc: 'application/vnd.ms-doc',
excel: 'application/vnd.ms-excel'
};
var base64 = function(s) {
return btoa(unescape(encodeURIComponent(s)));
};
var template = function(s, c) {
return s.replace(/{(\w+)}/g, function(m, p) {
return c[p];
});
};
var get_blob = function() {
return view.Blob;
}
var fixCSVField = function(value) {
var fixedValue = value;
var addQuotes = (value.indexOf(',') !== -1) || (value.indexOf('\r') !== -1) || (value.indexOf('\n') !== -1);
var replaceDoubleQuotes = (value.indexOf('"') !== -1);
if (replaceDoubleQuotes) {
fixedValue = fixedValue.replace(/"/g, '""');
}
if (addQuotes || replaceDoubleQuotes) {
fixedValue = '"' + fixedValue + '"';
}
return fixedValue;
};
var saveData = function(data){
var BB = get_blob();
saveAs(new BB([data], {type: uri[type]}), filename + "."+type);
};
var toCSV = function(){
var data = "\ufeff";
for (var i = 0, row; row = table.rows[i]; i++) {
for (var j = 0, col; col = row.cells[j]; j++) {
data = data + (j ? ',' : '') + fixCSVField(getText(col));
}
data = data + "\r\n";
}
saveData(data);
};
var toJson = function(){
var jsonHeaderArray = [];
if(table.tHead){
for(var i =0,col; col = table.tHead.rows[0].cells[i]; i++){
jsonHeaderArray.push(getText(col));
}
}
var jsonArray = [];
if(table.tBodies){
for(var j=0,tbody; tbody = table.tBodies[j]; j++){
for(var k =0, rowb; rowb= tbody.rows[k]; k++){
var len = jsonArray.length;
jsonArray[len] = [];
for (var g = 0, colb; colb = rowb.cells[g]; g++) {
jsonArray[len].push(getText(colb));
}
}
}
}
var jsonExportArray = {
header: jsonHeaderArray,
data: jsonArray
};
saveData(JSON.stringify(jsonExportArray));
};
var toOffice = function(){
var tmpl = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:'+type+'" xmlns="http://www.w3.org/TR/REC-html40">';
tmpl += '<head><meta charset="'+charSet+'" /><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>';
tmpl += '{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]-->';
tmpl += '</head><body><table>{table}</table></body></html>';
var office = '',
maph = [['<thead><tr>', '</tr></thead>'], ['<tbody><tr>', '</tr></tbody>'], ['<tr>', '</tr>']],
mapb = [['<th>', '</th>'],['<td>', '</td>']],
flag = +!table.tHead,
com = 1 - flag;
for(var i=0, row; row = table.rows[i]; i++){
flag = i > com ? 2 : flag;
office += maph[flag][0];
for(var j =0, col; col = row.cells[j]; j++){
office += mapb[+!!flag][0]+ getText(col) +mapb[+!!flag][1];
}
office += maph[flag][1];
flag++;
}
saveData(template(tmpl, {worksheet: 'Worksheet', table: office}));
};
var typeMap = {
json : toJson,
txt: toCSV,
csv: toCSV,
doc: toOffice,
docx: toOffice,
xls: toOffice,
xlsx: toOffice
};
typeMap[type]();
};
})(window);
导出table为Excel的更多相关文章
- JS 导出Table为excel的三种可行方法
[html] view plain copy<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...
- jsp导出table数据excel表
<html> <head> <meta http-equiv="content-Type" content="text/html;chars ...
- 【JS】导出table到excel，同时兼容FF和IE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js导出table到excel，同时兼容FF和IE
前台调用(第一个参数是table的id): <input value="导出" type="button" /> function toExcel( ...
- Spring mvc 导出table到Excel
/** * * @Title: exportExcel * @Description: TODO(导出到excel) * @param Page page * @return ModelAndView ...
- 使用Open xml 操作Excel系列之二--从data table导出数据到Excel
由于Excel中提供了透视表PivotTable,许多项目都使用它来作为数据分析报表. 在有些情况下,我们需要在Excel中设计好模板,包括数据源表,透视表等, 当数据导入到数据源表时,自动更新透视表 ...
- 导出网页中的table到excel
导出网页中的table到excel的两种简便方法: 1. 纯 JavaScript 方法,缺点只支持IE浏览器 var elTable = document.getElementById(" ...
- js导出table中的EXCEL总结
导出EXCEL通常是用PHP做,可是项目中,有时候PHP后端project师返回的数据不是我们想要的,作为前端开发project师,把相应的数据编号转换为文字后,展示给用户.可是.需求要把数据同一时候 ...
- 【HTML5版】导出Table数据并保存为Excel
首发我的博客 http://blog.meathill.com/tech/js/export-table-data-into-a-excel-file.html 最近接到这么个需求,要把<tab ...
随机推荐
- ffmpeg函数介绍
本文对在使用ffmpeg进行音视频编解码时使用到的一些函数做一个简单介绍,我当前使用的ffmpeg版本为:0.8.5,因为本人发现在不同的版本中,有些函数名称会有点小改动,所以在此有必要说明下ffmp ...
- s3c6410存储器映射
1.引导镜像区 0x0000_0000~0x07FF_FFFF 2.内部存储区 (1) 内部ROM 0x0800_0000~0x0BFF_FFFF (2) 内部SRAM 0x0C00_0000~0x0 ...
- 《转》我的ARM学习经历
1.基础阶段 话说06年第一份工作从事的是PLC开发,用protel画原理图和PCB,写AVR单片机程序,焊焊板子,还去过华强北买器件,比较杂,但是接触面比较广,为进一步学ARM打下了基础. ...
- PHP数据结构之五 栈的PHP的实现和栈的基本操作
栈和队列是两种应用非常广泛的数据结构,它们都来自线性表数据结构,都是“操作受限”的线性表. 栈栈在计算机的实现有多种方式:硬堆栈:利用CPU中的某些寄存器组或类似的硬件或使用内存的特殊区域来实现.这类 ...
- 利用PHPExcel将数据导出到xls格式的excel文件
在开发某地的经营许可证管理系统的时候需要将数据导出打excel文件,虽然一年前做某集团的ERP的时候用到过一次导入和导出,但是那时候太忙没时间写博客,一年过去了我也忘的差不多了,所以趁着今天将此次的使 ...
- logistic growth model . 求解方法 （高斯牛顿法）
https://www.stat.tamu.edu/~jnewton/604/chap4.pdf http://www.metla.fi/silvafennica/full/sf33/sf334327 ...
- p2148 [SDOI2009]E&D
传送门 分析 https://www.luogu.org/blog/flashblog/solution-p2148 代码 #include<bits/stdc++.h> using na ...
- HDU 2829 Lawrence (斜率优化DP或四边形不等式优化DP)
题意:给定 n 个数,要你将其分成m + 1组,要求每组数必须是连续的而且要求得到的价值最小.一组数的价值定义为该组内任意两个数乘积之和,如果某组中仅有一个数,那么该组数的价值为0. 析:DP状态方程 ...
- （转）基于MVC4+EasyUI的Web开发框架形成之旅--界面控件的使用
原文地址:http://www.cnblogs.com/wuhuacong/p/3317223.html 在前面介绍了两篇关于我的基于MVC4+EasyUI技术的Web开发框架的随笔,本篇继续介绍其中 ...
- Server Sql 多表查询、子查询和分页
一.多表查询:根据特定的连接条件从不同的表中获取所需的数据 多表查询语法: SELECT table1.column, table2.column FROM table1, table2 WHERE ...