- 首先看一下需求吧
一个基于Jquey开发的管理系统需要新增需求
就是把这个表打印出来
试用了网上很多插件 但是要么表头样式丢失 要么就是图片丢失
在众多搬运工的博客里找到一个感觉最接近的插件jquery.table2excel.js - 再看看我打印的效果
- 目前唯一的遗憾就是图片不能调整大小 和居中 刚开始图片比较大
后来把服务器上面的图片直接改小后再导出的
因为这些图片都是固定 说以没有用代码去改变大小
如果大家有图片是用户上传的 那可能要用cavans去转换图片大小再使用
或者说大家有更好的方法调整图的样式 麻烦告诉我 感谢 哈哈哈哈 - 开始改造代码
这是代码的源地址
直接用这个插件 复杂表头可能并不会去合并单元格 - 我改造后的
有需要可以直接复制这段代码 引入jQuery去用
/*
* jQuery table2excel - v1.1.1
* jQuery plugin to export an .xls file in browser from an HTML table
* https://github.com/rainabba/jquery-table2excel
*
* Made by rainabba
* Under MIT License
*/
//table2excel.js
;(function ( $, window, document, undefined ) {
var pluginName = "table2excel",
defaults = {
exclude: ".noExl",
name: "Table2Excel",
filename: "table2excel",
fileext: ".xls",
exclude_img: true,
exclude_links: true,
exclude_inputs: true
};
// The actual plugin constructor
function Plugin ( element, options ) {
this.element = element;
// jQuery has an extend method which merges the contents of two or
// more objects, storing the result in the first object. The first object
// is generally empty as we don't want to alter the default options for
// future instances of the plugin
//
this.settings = $.extend( {}, defaults, options );
this._defaults = defaults;
this._name = pluginName;
this.init();
}
Plugin.prototype = {
init: function () {
var e = this;
var style = ' <style type="text/css">' +
'img {' +
'width: 30px;' +
'height: 30px;' +
' }'+
'table th {' +
'height: 35px;' +
' text-align: center;' +
' }' +
'table td {' +
'height: 35px;' +
' text-align: center;' +
' }'
+'</style>' ;
var utf8Heading = "<meta http-equiv=\"content-type\" content=\"application/vnd.ms-excel; charset=UTF-8\">";
e.template = {
head: "<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\">" + utf8Heading + "<head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets>",
sheet: {
head: "<x:ExcelWorksheet><x:Name>",
tail: "</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet>"
},
mid: "</x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]-->"+style+"</head><body>",
table: {
head: "<table>",
tail: "</table>"
},
foot: "</body></html>"
};
e.tableRows = [];
// get contents of table except for exclude
$(e.element).each( function(i,o) {
var tempRows = "";
$(o).find("tr").not(e.settings.exclude).each(function (i,p) {
tempRows += "<tr height='70px'>";
$(p).find("td,th").not(e.settings.exclude).each(function (i,q) { // p did not exist, I corrected
var rc = {
rows: $(this).attr("rowspan")||$(this).attr("rowSpan") ,
cols: $(this).attr("colspan") ||$(this).attr("colSpan"),
flag: $(q).find(e.settings.exclude),
localName:$(this).context.localName,
};
if($(this).context.childNodes.length){
rc.firstChild =$(this).context.childNodes[0].nodeName;
}
if( rc.flag.length > 0 ) {
tempRows += "<td> </td>"; // exclude it!!
} else {
tempRows += "<"+rc.localName;
if( rc.rows > 0) {
tempRows += " rowspan=\'" + rc.rows + "\' ";
}
if( rc.cols > 0) {
tempRows += " colspan=\'" + rc.cols + "\' align='center' valign='center' ";
}
tempRows += " width='70px' />" + $(q).html() + "</"+rc.localName+">";
tempRows += "</tr>";
});
// exclude img tags
if(e.settings.exclude_img) {
tempRows = exclude_img(tempRows);
}
// exclude link tags
if(e.settings.exclude_links) {
tempRows = exclude_links(tempRows);
}
// exclude input tags
if(e.settings.exclude_inputs) {
tempRows = exclude_inputs(tempRows);
}
e.tableRows.push(tempRows);
});
e.tableToExcel(e.tableRows, e.settings.name, e.settings.sheetName);
},
tableToExcel: function (table, name, sheetName) {
var e = this, fullTemplate="", i, link, a;
e.format = function (s, c) {
return s.replace(/{(\w+)}/g, function (m, p) {
return c[p];
});
};
sheetName = typeof sheetName === "undefined" ? "Sheet" : sheetName;
e.ctx = {
worksheet: name || "Worksheet",
table: table,
sheetName: sheetName
};
fullTemplate= e.template.head;
if ( $.isArray(table) ) {
for (i in table) {
//fullTemplate += e.template.sheet.head + "{worksheet" + i + "}" + e.template.sheet.tail;
fullTemplate += e.template.sheet.head + sheetName + i + e.template.sheet.tail;
}
}
fullTemplate += e.template.mid;
if ( $.isArray(table) ) {
for (i in table) {
fullTemplate += e.template.table.head + "{table" + i + "}" + e.template.table.tail;
}
}
fullTemplate += e.template.foot;
for (i in table) {
e.ctx["table" + i] = table[i];
}
delete e.ctx.table;
var isIE = /*@cc_on!@*/false || !!document.documentMode; // this works with IE10 and IE11 both :)
//if (typeof msie !== "undefined" && msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) // this works ONLY with IE 11!!!
if (isIE) {
if (typeof Blob !== "undefined") {
//use blobs if we can
fullTemplate = e.format(fullTemplate, e.ctx); // with this, works with IE
fullTemplate = [fullTemplate];
//convert to array
var blob1 = new Blob(fullTemplate, { type: "text/html" });
window.navigator.msSaveBlob(blob1, getFileName(e.settings)+".xls" );
} else {
//otherwise use the iframe and save
//requires a blank iframe on page called txtArea1
txtArea1.document.open("text/html", "replace");
txtArea1.document.write(e.format(fullTemplate, e.ctx));
txtArea1.document.close();
txtArea1.focus();
sa = txtArea1.document.execCommand("SaveAs", true, getFileName(e.settings) + ".xls" );
}
} else {
var blob = new Blob([e.format(fullTemplate, e.ctx)], {type: "application/vnd.ms-excel"});
window.URL = window.URL || window.webkitURL;
link = window.URL.createObjectURL(blob);
a = document.createElement("a");
a.download = getFileName(e.settings) + ".xls";
a.href = link;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
}
return true;
}
};
function getFileName(settings) {
return ( settings.filename ? settings.filename : "table2excel" );
}
// Removes all img tags
function exclude_img(string) {
var _patt = /(\s+alt\s*=\s*"([^"]*)"|\s+alt\s*=\s*'([^']*)')/i;
return string.replace(/<img[^>]*>/gi, function myFunction(x){
var res = _patt.exec(x);
if (res !== null && res.length >=2) {
return res[2];
} else {
return "";
}
});
}
// Removes all link tags
function exclude_links(string) {
return string.replace(/<a[^>]*>|<\/a>/gi, "");
}
// Removes input params
function exclude_inputs(string) {
var _patt = /(\s+value\s*=\s*"([^"]*)"|\s+value\s*=\s*'([^']*)')/i;
return string.replace(/<input[^>]*>|<\/input>/gi, function myFunction(x){
var res = _patt.exec(x);
if (res !== null && res.length >=2) {
return res[2];
} else {
return "";
}
});
}
$.fn[ pluginName ] = function ( options ) {
var e = this;
e.each(function() {
if ( !$.data( e, "plugin_" + pluginName ) ) {
$.data( e, "plugin_" + pluginName, new Plugin( this, options ) );
}
});
// chain jQuery functions
return e;
};
})( jQuery, window, document );
说明一些主要改的部分
主要的改造就是36行后 init
里面的东西
这一块 可以写一些样式 但是我试了 img 无效
其它还是可以简单的试试的 excel可以识别编译
然后下面就是一些规范吧
var style =
' <style type="text/css">' +
'img {' +
'width: 30px;' +
'height: 30px;' +
' }' +
'table th {' +
'height: 35px;' +
' text-align: center;' +
' }' +
'table td {' +
'height: 35px;' +
' text-align: center;' +
' }' +
'</style>'
var utf8Heading =
'<meta http-equiv="content-type" content="application/vnd.ms-excel; charset=UTF-8">'
e.template = {
head:
'<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">' +
utf8Heading +
'<head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets>',
sheet: {
head: '<x:ExcelWorksheet><x:Name>',
tail:
'</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet>',
},
mid:
'</x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]-->' +
style +
'</head><body>',
table: {
head: '<table>',
tail: '</table>',
},
foot: '</body></html>',
}
- 敲重点 主要就是对这改了
$(o)
.find('tr')
.not(e.settings.exclude)
.each(function (i, p) {
//这里 可以写行内的样式 我把行高设置了一下 让图片不显得那么拥挤
tempRows += "<tr height='70px'>"
$(p)
.find('td,th')
.not(e.settings.exclude)
.each(function (i, q) {
// p did not exist, I corrected
var rc = {
rows:
$(this).attr('rowspan') ||
$(this).attr('rowSpan'),
cols:
$(this).attr('colspan') ||
$(this).attr('colSpan'),
flag: $(q).find(e.settings.exclude),
localName: $(this).context.localName,
}
if ($(this).context.childNodes.length) {
rc.firstChild = $(
this
).context.childNodes[0].nodeName
}
if (rc.flag.length > 0) {
tempRows += '<td> </td>' // exclude it!!
} else {
//这里的部分 给全改了 目的为了 获取表格的跨行跨列
tempRows += '<' + rc.localName
if (rc.rows > 0) {
tempRows +=
" rowspan='" + rc.rows + "' "
}
if (rc.cols > 0) {
tempRows +=
" colspan='" +
rc.cols +
"' align='center' valign='center' "
//加行内样式 让文本居中
}
tempRows +=
" width='70px' />" +
$(q).html() +
'</' +
rc.localName +
'>'
tempRows += '</tr>'
})
- js的代码改了 接下来 要对html部分做要求
首先这里的跨行跨列要行内 不然js部分没办法获取到
因为我的表头含有中英文 且换行了
我用的<br
标签 如果需要换行生效
要在里面加mso-data-placement:same-cell
这个样式 - 目前的部分表头的样式是可以完整的导出
- 最重要的部分 是图片
必须使用服务器地址 也就是可以直接在浏览器上面访问的地址 - 使用
$('#ouput').on('click',function(){
$("#tab").table2excel({
// table2excel插件的可用配置参数有:
// exclude: ".noExl",// exclude:不被导出的表格行的CSS class类。
name: "导出的Excel文档的名称",// name:导出的Excel文档的名称
filename: "Excel文件的名称",// filename:Excel文件的名称。
exclude_img: false,// exclude_img:是否导出图片 设置false是导出。
exclude_links: false,// exclude_links:是否导出超链接
exclude_inputs: false// exclude_inputs:是否导出输入框中的内容
});
})
- 完结 有更好的方法记得告诉我 ~