layui打印自定义表格功能

最新推荐文章于 2024-08-15 11:09:11 发布
最新推荐文章于 2024-08-15 11:09:11 发布
阅读量1.5k 收藏 8
点赞数
文章标签： html ajax jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shuixiangtutou/article/details/120408904
版权

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_filename
                var basePath = 'http://192.168.62.209:85/upload/image-qr/'
                var viewpath = basePath + qrFilename
                var 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)

              }
            })
          }
        })

最后打印效果
在这里插入图片描述

挪威森林喵
关注
  • 0
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
layui单据打印_layer系列之table导出+打印功能总结
weixin_34274954的博客
12-23 4148
1.关于layui导出方式，直接使用layui(版本2.4.5及以上)自带的导出方法即可：layui--layui-table导出Excel立即转化为数据表格将数据转化为静态表格导出Excel昵称加入时间签名贤心12016-11-28人生就像是一场修行 A贤心22016-11-29人生就像是一场修行 B贤心32016-11-30人生就像是一场修行 CvarexportBillsData=[{'n...
layui单据打印_layui打印表格自定义函数
weixin_35647899的博客
12-23 3495
函数如下function print (tablelayid){var v = document.createElement("div");var f = ["", "", "body{font-size: 12px; color: #666;}", "table{width: 100%; border-collapse: collapse; border-spacing: 0;}", "th,t...
Layui+Ajax带打印功能的管理系统.zip
08-12
该系统包含了权限管理、模块管理、配置管理和页面打印功能，代码齐全，sql脚本也包含在内，可正常运行，三周的任务量，仅供大家学习，可作为项目设计使用
layui的表格table选中数据后可打印本行数据
10-26
layui的表格table选中数据后可打印本行数据,未打印时不显示，只在打印页面显示打印内容。只是做了一个简单的demo，页面需要自己去画，方法已实现。有具体的指导步骤
layui自定义打印
热门推荐
星银色飞行船的博客
03-29 1万+
目录 自带的打印功能的实现 自定义打印内容的实现 自定义打印table的实现 一、 自带的打印功能的实现 在layui官网下载新的layui的js文件，有些旧版本的不支持 在table数据赋值时，添加如下参数 toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板 二、 自定义打印内容的实现 三、 自定义打印table的实现 ......
layui 打印table表格某一行数据
weixin_43652106的博客
06-15 820
记录：layui 打印table表格某一行数据 $('body').on('click', '.print_apple', function () { $(this).removeAttr("data-open"); //禁止打开弹窗页面 var thisHang = $(this).parent().parent().parent(); var indexs = thisHang.attr('data-index'); console.log(indexs)
layui table动态生成表格及筛选列后打印
weixin_72003717的博客
03-13 786
<i class="layui-icon layui-icon-print"></i>打印</a><a class= "layui-btn layui-btn-sm" id="inStock" > <i class="layui-icon layui-icon-home"></i>入库
layui js 自定义打印功能实现
ITSM/ITIL/网络安全/IT运维
04-27 4530
꧁༺蓝冰༻꧂ 已于 2022-02-22 17:58:08 修改 655 收藏 1 分类专栏： 前端 文章标签： javascript layui 前端 版权 前端 专栏收录该内容 10 篇文章0 订阅 订阅专栏 打印功能的实现往往是新建一个页面，然后在新建页面中画出你想要的效果，然后调用浏览器的打印功能进行打印 项目依赖： layui jquery 记得换layui和jquery引入路径完整项目代码： <!DOCTYPE html> <html> <he...
layui自定义打印功能
qq_40750454的博客
09-24 1万+
html： <a style="float: right" onclick="print()" type="button" class="layui-btn layui-btn-primary layui-btn-sm"> <i class="layui-icon layui-icon-print"></i> </a> <table id="table_info"> <tr> <td>1</t...
layui--实现表格
LHH201016的博客
08-03 131
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metahttp-equiv="X-UA-Compatible"content="IE=edge"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <titl...
用于layui table 自定义列
07-06
总之，layui table的自定义列功能极大地扩展了表格组件的灵活性，使得数据展示和交互更加符合业务需求。结合保存和应用模板，我们可以提供用户友好的界面，让用户可以个性化地调整表格布局，提升用户体验。
layui自定义工具栏的方法
12-13
给大家分享的功能是layui自定义工具栏 功能效果：开启数据表格头部工具栏区域 关键参数：toolbar 参数类型：String/DOM/Boolean 参数说明： toolbar: ‘#toolbarDemo’ //指向自定义工具栏模板选择器 toolbar: ...
基于jQuery和layui的form表单自定义js动态生成
03-09
layui是一个轻量级且模块化的前端框架，它包括了丰富的组件，如表格、按钮、表单、弹窗等。layui的表单组件支持多种表单元素和验证规则，可以方便地创建和定制表单样式。 三、动态生成表单 1. 引入依赖：首先，在...
掌握layui.laydate的输出格式技术，轻松定制日期显示
奇妙的Bug之旅
11-06 2125
在Web开发中，日期时间的显示格式是非常重要的一部分。layui.laydate是一个非常流行的日期时间选择器插件，它提供了丰富的配置选项，可以满足各种日期时间显示的需求。本文将详细介绍如何修改layui.laydate的输出格式，并提供相关实例。这个函数接受一个日期对象作为参数，返回一个格式化后的字符串。要修改layui.laydate的输出格式，你需要在初始化日期时间选择器时，设置。在这个示例中，当你选择一个日期后，日期将以。是日期时间选择器的DOM元素的id，是你想要的日期格式。的格式显示在页面上。
Layui表格自定义表格字体样式
qq_33763877的博客
08-16 1万+
Layui表格中单元格样式可通过templet-自定义模板改变单元格内容样式： 在默认情况下，单元格的内容是完全按照数据接口返回的content原样输出的，如果你想对某列的单元格添加链接等其它元素，你可以借助templet参数来轻松实现。这是一个非常实用且强大的功能，你的表格内容会因此而丰富多样。 templet 提供了三种使用方式，请结合实际场景选择最合适的一种： (1)、如果自定...
layui 的数据表单的defaultToolbar参数中筛选列，图标，打印，三个功能，调用单独拿出使用
L_Augety的博客
08-11 1万+
layui 的数据表格的defaultToolbar参数中筛选列，图标，打印，三个功能，调用自己按钮，单独拿出使用
HTML静态网页成品作业(HTML+CSS)——自行车介绍网页设计制作(1个页面)
最新发布
2301_78945238的博客
08-15 482
HTML静态网页成品作业(HTML+CSS)——自行车介绍网页设计制作(1个页面)
layui table 自定义导出
05-16
在 layui table 中，可以通过使用 table.exportFile() 方法来实现导出表格数据。如果需要自定义导出内容，可以通过以下步骤实现： 1. 定义一个导出按钮，可以使用 layui 中的 button 组件。 ```html <button class="layui-btn layui-btn-sm" id="exportBtn">导出</button> ``` 2. 给按钮绑定点击事件，在点击事件中获取需要导出的数据，并进行处理。 ```javascript // 获取需要导出的数据 var data = table.cache.tableId; // 处理导出数据 var exportData = []; layui.each(data, function(index, item){ // 自定义处理逻辑 exportData.push({ id: item.id, name: item.name, age: item.age }); }); // 导出数据 table.exportFile(['ID', '姓名', '年龄'], exportData, 'xls'); ``` 在这里，我们可以通过对原始数据进行处理，生成需要导出的数据。这里的处理逻辑可以根据具体需求进行自定义。 3. 将处理后的数据导出为 Excel 文件，可以使用 table.exportFile() 方法。 ```javascript table.exportFile(['ID', '姓名', '年龄'], exportData, 'xls'); ``` 在这里，我们可以指定导出的字段名和文件类型。上述代码中，我们导出了一个名为“tableId”的表格数据，并且导出的文件类型为“xls”。 完整代码示例： ```html <button class="layui-btn layui-btn-sm" id="exportBtn">导出</button> <script> layui.use('table', function(){ var table = layui.table; // 绑定导出按钮点击事件 $('#exportBtn').on('click', function(){ // 获取需要导出的数据 var data = table.cache.tableId; // 处理导出数据 var exportData = []; layui.each(data, function(index, item){ // 自定义处理逻辑 exportData.push({ id: item.id, name: item.name, age: item.age }); }); // 导出数据 table.exportFile(['ID', '姓名', '年龄'], exportData, 'xls'); }); }); </script> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值