300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > layui打印自定义表格功能

layui打印自定义表格功能

时间:2020-04-18 20:52:09

相关推荐

layui打印自定义表格功能

打印预览表

按钮点击显示预览表,根据id获取数据,再绘制打印表

layer.open({type: 2,area: ['500px', '700px'],content: 'printSampleManager.html?'+ layui.data('version').v + '',btn: ['打印'],btnAlign: 'c',yes: function(layero, index){// 打印表获取数据$.ajax({url: '../../../../labctl/getSampleById?id=' + obj.data.id + '' ,success:function (data) {var res = JSON.parse(data)var qrFilename = res[0].qr_filenamevar basePath = 'http://192.168.62.209:85/upload/image-qr/'var viewpath = basePath + qrFilenamevar sampName = res[0].sampName;var sampType = res[0].sampType;var sampSn = res[0].sampSn;var sampCode = res[0].sampCode;var prolineName = res[0].prolineName;var oaId = res[0].oaId;var sampDate = res[0].sampDate;var v = document.createElement("div");var f = //绘制表格[`<head><br><table cellspacing="0" width="100%" style="border-collapse: separate; border-spacing: 0px;"><tbody><tr style="height:50px ; width: 700px;"><div hidden>${qrFilename}</div><td style="border:1px solid black;width:50px;" align="center" valign="middle"><img style='width: 200px; height: 200px; max-width: 80%; margin-top: 5px;' src=${viewpath}></td><td style="border:1px solid black;" colspan="2" align="center" valign="middle"><p style="font-size: 35px">样品标识卡</p></td></tr><tr style="height:50px; width: 700px;"><td style="border:1px solid black;width:50px;" align="center" valign="middle"><p>样品名称</p></td><td style="border:1px solid black;width:100px;" align="center" valign="middle"><div>${sampName}</div></td></tr><tr style="height:50px; width: 700px;"><td style="border:1px solid black;width:50px;" align="center" valign="middle"><p>规格型号</p></td><td style="border:1px solid black;width:100px;" align="center" valign="middle"><div>${sampType}</div></td></tr><tr style="height:50px ; width: 700px;"><td style="border:1px solid black;width:50px;" align="center" valign="middle"><p>序列号</p></td><td style="border:1px solid black;width:100px;" align="center" valign="middle"><div>${sampSn}</div></td></tr><tr style="height:50px ; width: 700px;"><td style="border:1px solid black;width:50px;" align="center" valign="middle"><p>样品编号</p></td><td style="border:1px solid black;width:100px;" align="center" valign="middle"><div>${sampCode}</div></td></tr><tr style="height:50px ; width: 700px;"><td style="border:1px solid black;width:50px;" align="center" valign="middle"><p>来样单位</p></td><td style="border:1px solid black;width:100px;" align="center" valign="middle"><div>${prolineName}</div></td></tr><tr style="height:50px ; width: 700px;"><td style="border:1px solid black;width:50px;" align="center" valign="middle"><p>委托编号</p></td><td style="border:1px solid black;width:100px;" align="center" valign="middle"><div>${oaId}</div></td></tr><tr style="height:50px ; width: 700px;"><td style="border:1px solid black;width:50px;" align="center" valign="middle"><p>来样日期</p></td><td style="border:1px solid black;width:100px;" align="center" valign="middle"><div>${sampDate}</div></td></tr></div></tbody></table>`,"</head>"].join("");$(v).find("th.layui-table-patch").remove();$(v).find(".layui-table-col-special").remove();= var h = window.open("打印窗口", "_blank");h.document.write(f + $(v).prop("outerHTML"));h.document.close();h.print();h.close();}})// 预览表获取数据success: function (layero, index) {var iframeWindow = window['layui-layer-iframe' + index];$.ajax({url: '../../../../labctl/getSampleById?id=' + obj.data.id + '' ,success:function (data){var res = JSON.parse(data)iframeWindow.layui.$('#id').append(res[0].id)iframeWindow.layui.$('#sampName').append(res[0].sampName)iframeWindow.layui.$('#qr_filename').append(res[0].qr_filename)iframeWindow.layui.$('#sampType').append(res[0].sampType)iframeWindow.layui.$('#sampCode').append(res[0].sampCode)iframeWindow.layui.$('#sampSn').append(res[0].sampSn)iframeWindow.layui.$('#prolineName').append(res[0].prolineName)iframeWindow.layui.$('#oaId').append(res[0].oaId)iframeWindow.layui.$('#sampDate').append(res[0].sampDate)}})}})

最后打印效果

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。