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)}})}})

最后打印效果

layui打印自定义表格功能相关推荐

vue 批量打印功能打印自定义表格table
vue 批量打印功能打印自定义表格table 批量打印功能需求图 1.用excle先画出来 2.然后变为代码点击文件 - - 另存为 - - 浏览 - - 保存类型(网页) - - 保存然后在 ...
layui js 自定义打印功能实现
打印功能的实现往往是新建一个页面,然后在新建页面中画出你想要的效果,然后调用浏览器的打印功能进行打印项目依赖: layui jquery 记得换layui和jquery引入路径完整项目代码: &l ...
layui自定义查询条件html页面,Layui的数据表格+springmvc实现搜索功能的例子_飛雲_前端开发者...
如下所示: 主要在前端页面加: 搜索ID: userid content 搜索在 reload:function () { var keyWord=$("#keyWord").v ...
使用layui做数据表格使用下拉菜单并实现删除功能和时间选择器
一.再layui官网上查看数据表格的使用方式查看代码实例不使用 toolbar工具栏,分页功能之类的就不在创建渲染实例的声明二.根据你要完成表格设计稿完成数据表格中使用下拉菜单和时间选择器以图 ...
[实用][更新中]Java Apache POI 打印Word文档工具（含文本替换，动态表格功能）
[实用][更新中]Java Apache POI 打印Word文档工具(含文本替换,动态表格功能) 基于Apache POI对Word进行操作一.基于Apache POI封装的word文档工具V1. ...
php数据表格的重载,layui数据表格实现重载数据表格功能(搜索功能）
layui数据表格实现重载数据表格功能,以搜索功能为例加载数据表格实现搜索功能和数据表格重载全部代码加载数据表格按照layui官方文档示例 HTML部分 JavaScript部分 var t ...
layui数据表格接口_layui数据表格实现重载数据表格功能(搜索功能）
layui数据表格实现重载数据表格功能,以搜索功能为例加载数据表格实现搜索功能和数据表格重载全部代码加载数据表格按照layui官方文档示例 HTML部分 JavaScript部分 var t ...
layui数据表格实现重载数据表格功能(搜索功能）
这篇文章主要介绍了layui数据表格实现重载数据表格功能,以搜索功能为例进行讲解,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 layui数据表格实现重载数据表格功能,以搜索功能为例加载数据表格 ...
layui table数据表格中数据返回成功，但页面不显示数据内容问题
layui table数据表格中数据返回成功,但页面不显示数据内容问题. 这是我做毕业设计的时候自己遇到的问题,后来查看了网上的一些技术贴子而得到解决,所以便想总结一个大概的方法,供大家参考! 一般导 ...

layui打印自定义表格功能

layui打印自定义表格功能相关推荐

最新文章

热门文章