layui单据打印_layer系列之table导出+打印功能总结

时间：2025-04-07 07:04:06

1.关于layui导出方式，直接使用layui(版本2.4.5及以上)自带的导出方法即可：

layui--layui-table导出Excel

立即转化为数据表格

将数据转化为静态表格

导出Excel

昵称加入时间签名

贤心12016-11-28人生就像是一场修行 A贤心22016-11-29人生就像是一场修行 B贤心32016-11-30人生就像是一场修行 C

var exportBillsData=[{

'nos':1,

'CompanyId':1001,

'CompanyName':"携程",

'Sex':'男'

},{

'nos':2,

'CompanyId':1002,

'CompanyName':"携程1",

'Sex':'女'

}];

('table', function(){

var table = ;

});

//1.转化为静态表格-直接为layui-table绑定数据

function convertToTable(){

('table', function () {

var table = ;

({

elem: '#table_TravelagenceCheck'

, height: 480

, title: "协议贡献量明细"

, page: true

, size: 'sm'

, toolbar: "协议入住明细"

, defaultToolbar: ['filter', 'print', 'exports']

, limit: 200

, limits: [200]

//直接绑定data

, data: exportBillsData

, cols: [[ //表头

{ field: 'nos', title: "序号", width: '2%', type: 'numbers', unresize: true }

, { field: 'CompanyId', title: "协议编号", width: '10%', sort: true, unresize: true }

, { field: 'CompanyName', title: "协议名称", width: '12%', sort: true, unresize: true }

, { field: 'Sex', title: "性别", width: '12%', sort: true, unresize: true }

]]

});

});

}

//导出Excel-注明:方法是layui-table自带的,适用于2.4.5版本，2.3.0版本的没有这个方法

function exportToExcel(){

('table', function () {

var table = ;

(["昵称", "加入时间", "签名"],[

['贤心1','2016-11-28','人生就像是一场修行 A'],

['贤心2','2019-11-28','人生就像是一场修行 B'],

['贤心3','2016-10-28','人生就像是一场修行 C']

],'本日将到订单列表.xls');

});

}

//导出Excel1

function exportToExcel1(){

('table', function () {

var table = ;

(["#","账号", "类型", "姓名", "房型", "房号", "状态", "成交价",

"余额", "信用金额", "预付金额", "到达", "离开", "手机", "房数", "联房",

"VIP", "房价码", "市场码", "公司", "预订号", "备注"],[

['1','F1908090001','F','jackA302','三人房有窗 浪漫','A302','R','120','400','0','0','2019-08-09 09:33','2019-08-30 12:00','1734***2827','1','-','-','BASE','上门散客','-','R1908090001','-'],

['2','F1908210008','F','jackG202','双床房海景','G202','R','501','0','0','0','2019-08-22 09:16','2019-08-30 12:00','1734***2827','1','-','-','BASE','上门散客','-','R1908210003','-'],

['3','F1908210012','F','李先生/李先生','双床房海景','-','R','501','0','0','0','2019-08-22 12:00','2019-08-23 12:00','1777***3792','1','-','-','BASE','上门散客','-','R1908210004','-'],

['4','F1908210030','F','丁小帅','大床房1.5米床 有窗','-','R','31','0','0','0','2019-08-22 12:00','2019-08-23 14:00','1861***8299','1','-','-','VipGold','*推荐入住','-','190822021002062','【客人留言:测试结果】[使用电子代金券:第1晚30抵30] [AliAPP订单]不赠送早餐;每日房价:2019-08-22:31.00'],

['5','F1908220001','F','沙奥','单人房早餐测试','-','R','230','0','0','230','2019-08-22 12:00','2019-08-23 13:00','1317***1407','1','-','-','VipCard','*推荐入住','银联在线支付','190822021002069','[已支付成功](银联在线支付)[Android手机订单]不赠送早餐;每日房价:2019-08-22:230.00'],

['6','F1908220002','F','焦人杰','单人房早餐测试','D203','R','0','0','0','0','2019-08-22 16:43','2019-08-23 12:00','1363***7594','1','-','-','BASE','上门散客','-','R1908220001','自助机办理'],

['7','F1908220003','F','焦人杰','单人房早餐测试','D205','R','0','0','0','0','2019-08-22 16:43','2019-08-23 12:00','1363***7594','1','-','-','BASE','上门散客','-','R1908220002','自助机办理'],

['8','F1908220004','F','焦人杰','单人房早餐测试','D206','R','0','0','0','0','2019-08-22 16:43','2019-08-23 12:00','1363***7594','1','-','-','BASE','上门散客','-','R1908220003','自助机办理'],

['9','F1908210038','F','焦人杰','双床房海景','G208','R','0','0','0','0','2019-08-22 17:34','2019-08-23 17:34','1363***7594','1','-','-','BASE','上门散客','-','R1908210009','自助机办理'],

['10','F1908220010','F','test芬芳','单人房早餐测试','-','R','120','0','0','0','2019-08-23 10:28','2019-08-24 12:00','-','18','☆','-','BASE','上门散客','-','R1908220004','-'],

['11','F1908220011','F','test芬芳','单人房早餐测试','-','R','120','0','0','0','2019-08-23 10:28','2019-08-24 12:00','-','1','☆','-','BASE','上门散客','-','R1908220004','-'],

['12','F1908220012','F','test芬芳','单人房早餐测试','-','R','120','0','0','0','2019-08-23 10:28','2019-08-24 12:00','-','1','☆','-','BASE','上门散客','-','R1908220004','-'],

['13','F1908220008','F','沙奥','8.高级套房 2米床 有窗','-','R','430','0','0','430','2019-08-23 12:00','2019-08-24 13:00','1317***1407','1','-','☆','VipCard','*会员预定','银联在线支付','190823021002006','[已支付成功](银联在线支付)[Android手机订单][使用电子代金券:1间房第1晚30抵30]不赠送早餐;每日房价:2019-08-23:430.00'],

['14','F1908220009','F','沙奥','8.高级套房 2米床 有窗','-','R','430','0','0','430','2019-08-23 12:00','2019-08-24 13:00','1317***1407','1','-','-','VipCard','*推荐入住','银联在线支付','190823021002007']

],'本日将到订单列表.xls');

});

}

补充说明：

另外补充与：参考地址：/qq_38642674/article/details/88236045

layui这个框架虽然还有一些不足之处但是我觉得已经非常优秀了，对于和的区别，网上别人各执一词，我今天遇到个非常恶心令我难受的问题发表一下我对这两个的看法。首先我引入，今天调试发现layui对象的内容如下

大概只有这些模块，其中有很多常用的模块大家都熟悉的。

然后我换成，调试layui对象的内容如下

内容差不多，但是少了几个模块，多了几个我自己引入的外部模块。所以我似乎明白了很多关于这两者的区别。

首先，你引入这个之后，你的()将不生效，好处是你引用里面有的模块将不用用模块化的写法引入，在js文件中可以直接用这样用。

然后，你引入这个之后，你js所有的layui模块的引用都要用()来使用，不然将无法使用。

一句话就是：包含的模块较多，中包含的模块较少，前者包含后者的所有模块。

分析：通过以上比较看出如果想用layui-table的导出功能：

(1)直接引用 (会饮用其模块中的)直接导出：

方法如下：

//导出Excel

function exportToExcel(){

('table', function () {

var table = ;

(["昵称", "加入时间", "签名"],[

['贤心1','2016-11-28','人生就像是一场修行 A'],

['贤心2','2019-11-28','人生就像是一场修行 B'],

['贤心3','2016-10-28','人生就像是一场修行 C']

],'本日将到订单列表.xls');

});

}

(2)直接引用

方法如下：

源码如下：

layui--layui-table导出Excel

立即转化为数据表格

将数据转化为静态表格

导出Excel

昵称加入时间签名

贤心12016-11-28人生就像是一场修行 A贤心22016-11-29人生就像是一场修行 B贤心32016-11-30人生就像是一场修行 C

var exportBillsData=[{

'nos':1,

'CompanyId':1001,

'CompanyName':"携程",

'Sex':'男'

},{

'nos':2,

'CompanyId':1002,

'CompanyName':"携程1",

'Sex':'女'

}];

('table', function(){

var table = ;

});

//转化为静态表格

function convertToTable(){

('table', function () {

var table = ;

({

elem: '#table_TravelagenceCheck'

, height: 480

, title: "协议贡献量明细"

, page: true

, size: 'sm'

, toolbar: "协议入住明细"

, defaultToolbar: ['filter', 'print', 'exports']

, limit: 200

, limits: [200]

//直接绑定data

, data: exportBillsData

, cols: [[ //表头

{ field: 'nos', title: "序号", width: '2%', type: 'numbers', unresize: true }

, { field: 'CompanyId', title: "协议编号", width: '10%', sort: true, unresize: true }

, { field: 'CompanyName', title: "协议名称", width: '12%', sort: true, unresize: true }

, { field: 'Sex', title: "性别", width: '12%', sort: true, unresize: true }

]]

});

});

}

//导出Excel

function exportToExcels(){

//('table', function () {

var table = ;

(["昵称", "加入时间", "签名"],[

['贤心1','2016-11-28','人生就像是一场修行 A'],

['贤心2','2019-11-28','人生就像是一场修行 B'],

['贤心3','2016-10-28','人生就像是一场修行 C']

],'本日将到订单列表.xls');

// });

}

总结：通过上面直接引用导出excel可以看出不用，直接使用就可以导出，

注意点：引用2.4.5版本的时,其自带的layer.js是3.1.1版本的；引用2.4.5版本的时，其自带的是3.1.1版本的！

引用2.4.5版本的后其自带的版本与系统中已经引入的版本，如2.2版本的后，前者的可能会覆盖掉后者引入的版本，一些效果会不同。暂时不知道 3.1.1版本的是不是覆盖2.2版本的。。。。

最后附上：js原生方式的导出：

源码如下：

.btn_CacheExport{

display:block;

width:83px;

height:40px;

text-align: center;

position:center;

color:black;

background-color:#C0C0C0;

line-height: 26px;

border:1px solid #727373

}

使用table标签方式将json导出xls文件

导出

导出

导出30-300207房态报表

function tableToExcel(){

//要导出的json数据

const jsonData = [

{

name:'路人甲',

phone:'123456',

email:'123@'

},

{

name:'炮灰乙',

phone:'123456',

email:'123@'

},

{

name:'土匪丙',

phone:'123456',

email:'123@'

},

{

name:'流氓丁',

phone:'123456',

email:'123@'

},

]

//列标题

let str = '

姓名电话邮箱';

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

for(let i = 0 ; i < ; i++ ){

str+='

';

for(let item in jsonData[i]){

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

str+=`

${ jsonData[i][item] + '\t'}`;

}

str+='

';

}

//Worksheet名

let worksheet = '这是导出的Excel'

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

//下载的表格模板数据

let template = `

xmlns:x="urn:schemas-microsoft-com:office:excel"

xmlns="http:///TR/REC-html40">

`;

//下载导出1：使用button按钮

// = uri + base64(template);//这种方式导出的Excel文件没有指定文件名

//下载导出2：使用a标签，指定a标签的download属性后导出的Excel文件有文件名!!!

("excelOut2").download = "导出excel哦";//指定导出的Excel文件名称

("excelOut2").href = uri + base64(template);//使用a标签的download属性可以指定导出的Excel文件名

}

//输出base64编码

function base64 (s) { return (unescape(encodeURIComponent(s))) }

2. layui table打印功能

没有使用layui自带的打印功能，因为自带的打印功能感觉不好新增标题，所以使用自定义的打印函数：

可以新增报表页眉及页脚，

源码：

/*

* layui打印表格自定义函数

*/

function printReport(tablelayid) {

hotelData = hotelData[0];

let hotelName = ;//酒店名称

let businessDate = parseJsonDate();//营业日期

let printer = ;//打印人

let printerTime = formatDateTime(, 14);//打印时间

let reportName = "报表:27-030205-当日客房出租情况报表";

let v = ("div");

let f = [`

${hotelName}
${reportName}
营业日期:${businessDate}
`,

"

"th,td{line-height: 20px; padding: 9px 10px; border: 1px solid #ccc; text-align: center; font-size: 18px; color: #666;}",

"a{color: #666; text-decoration:none;}", "*.layui-hide{display: none}",

"", ""].join("");

$(v).append($(".layui-table-box").find(".layui-table-header").html());

$(v).find("tr").after($("[lay-id=\"" + tablelayid + "\"] .-table-main table").html()); $(v).find("-table-patch").remove();

$(v).find(".layui-table-col-special").remove();

//页脚展示打印人，打印时间

let footer = [`

打印人：${printer}
打印时间：${printerTime}
`].join("");

let h = ("打印窗口", "_blank");

(f + $(v).prop("outerHTML") + footer);

();

();

();

}

/**

* 导出Excel

*/

function exportToExcel() {

let item = new Array('客人姓名', '房号', '账号', '客人类型代码', '客人类型描述', '会员卡号', '会员卡类', '协议单位', '状态', '房型代码', '房型描述', '成交价', '门市价', '*预定', '到达日期', '离开日期', '同住');

let dateTime = getDay3(); //时间格式:2019-08-08

('table', function () {

var table = ;// `27-030205:当日客房出租情况报表${dateTime}

([item], exportReportData, `27-030205:当日客房出租情况报表${dateTime}.xls`);

});

}

效果如图：

上面自定义的打印方法：printReport()经过与layui自带的打印源码比较后发现一致,

V2.4.5 中的layui 的中 截取片段源码如下：

switch ((e), (""), (), c) {

case "LAYTABLE_COLS":

s({

list:

function() {

var e = [];

return (function(t, i) {

&& "normal" == && ('

')

}),

("")

} (),

done: function() {

("checkbox(LAY_TABLE_TOOL_COLS)",

function(e) {

var i = t(),

l = ,

n = ("key"),

r = ("parentkey");

(,

function(e, t) {

(t,

function(t, i) {

if (e + "-" + t === n) {

var d = ;

= !l,

('*[data-key="' + + "-" + n + '"]')[l ? "removeClass": "addClass"](y),

d != && (!l, r),

()

}

})

})

})

}

});

break;

case "LAYTABLE_EXPORT":

? ("导出功能不支持 IE，请用 Chrome 等高级浏览器导出", this, {

tips: 3

}) : s({

list: function() {

return ['

导出到 Csv 文件', '导出到 Excel 文件'].join("")

} (),

done: function(e, i) {

("click",

function() {

var e = t(this).data("type");

(, null, e)

})

}

});

break;

case "LAYTABLE_PRINT":

var h = ("打印窗口", "_blank"),

f = [""].join(""),

v = t(());

(("table").html()),

("-table-patch").remove(),

(".layui-table-col-special").remove(),

(f + ("outerHTML")),

(),

(),

()

}

相关文章