JS前台分分页打印

最新推荐文章于 2023-08-08 10:09:58 发布
最新推荐文章于 2023-08-08 10:09:58 发布
阅读量485 收藏
点赞数
分类专栏： JavaScript JQuery 文章标签： JS分页打印
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/laizhixue/article/details/88661040
版权 
 //插件打印
        function Printing() {
            var all_length = KStarForm.koContentModel.MXList().length;//總長度--會改變
            var all_length_BB = KStarForm.koContentModel.MXList().length;//總長度--固定
            var pageSize = 27;                                        //頁面明細個數
            var count = Math.ceil(all_length / pageSize);             //页数（向上取整,有小数就整数部分加1）

            //校驗
            if (KStarForm.koContentModel.MXList().length == 0) {
                alert("无数据不可以打印！");
                return;
            } else {
                //校驗
                for (var i = 0; i < KStarForm.koContentModel.MXList().length; i++) {
                    if (KStarForm.koContentModel.MXList()[i].AccessoriesNumber() == null || KStarForm.koContentModel.MXList()[i].AccessoriesNumber() == "") {
                        KStar.Modaldialog.alert({ msg: "第" + (i + 1) + "行的配件編號為空，請刪除或者補充！" });
                        IndexToRed(i)
                        return false;
                    } else if (KStarForm.koContentModel.MXList()[i].MouldName_NumberAndName().trim() == null || KStarForm.koContentModel.MXList()[i].MouldName_NumberAndName().trim() == "") {
                        KStar.Modaldialog.alert({ msg: "第" + (i + 1) + "行模具名稱的不能為空！" });
                        IndexToRed(i)
                        return false;
                    } else if (KStarForm.koContentModel.MXList()[i].Customer_KJ() == null || KStarForm.koContentModel.MXList()[i].Customer_KJ() == "" || KStarForm.koContentModel.MXList()[i].Customer_KJ() == "[]") {
                        KStar.Modaldialog.alert({ msg: "第" + (i + 1) + "行的客戶不能為空！" });
                        IndexToRed(i)
                        return false;
                    } else if (KStarForm.koContentModel.MXList()[i].StandardNumber() == null || KStarForm.koContentModel.MXList()[i].StandardNumber() == "" || parseInt(KStarForm.koContentModel.MXList()[i].StandardNumber()) <= 0) {
                        KStar.Modaldialog.alert({ msg: "第" + (i + 1) + "行的標準套數需要大於0！" });
                        IndexToRed(i)
                        return false;
                    } else if (KStarForm.koContentModel.MXList()[i].StockNumber() == null || KStarForm.koContentModel.MXList()[i].StockNumber() == "" || parseInt(KStarForm.koContentModel.MXList()[i].StockNumber()) <= 0) {
                        KStar.Modaldialog.alert({ msg: "第" + (i + 1) + "行的入庫存數需要大於0！" });
                        IndexToRed(i)
                        return false;
                    } else if (KStarForm.koContentModel.MXList()[i].Unit().trim() == null || KStarForm.koContentModel.MXList()[i].Unit().trim() == "") {
                        KStar.Modaldialog.alert({ msg: "第" + (i + 1) + "行的單位不能為空！" });
                        IndexToRed(i)
                        return false;
                    }
                }

            }
            var showStr = '';
            var win;
            //分页打印
            for (var i = 0; i < count; i++) {
                //打印HTML
                showStr += '<body style="margin:0;padding:0;display:block;">';//解決打印多出一頁空白頁問題
                showStr += '<div style="page-break-after:always;width:750px;">';//強制分頁
                showStr += '<table style="border:1px solid #ddd;width:750px;border-collapse:collapse;border-spacing:0;padding:10px;">';
                showStr += '<caption>';
                showStr += '<b style="font-size:28px;">模具移交單</b>';
                showStr += '<div style="margin-top:30px;">';
                if (count == (i + 1)) {
                    //最後一頁
                    showStr += '<div style="float:left;">行數：' + all_length_BB + '-' + all_length + '</div>';
                } else {
                    showStr += '<div style="float:left;">行數：' + all_length_BB + '-' + 30 + '</div>';
                }
               
                showStr += '<div style="float:right;">頁數：' + count + '-' + (i + 1) + '</div>';
                showStr += '</div">';
                showStr += '</caption>';
                showStr += '<thead>';
                showStr += '<tr style="text-align:center;height:30px;">';
                showStr += '<td style="border: 1px solid;">配件編號</td>';
                showStr += '<td style="border: 1px solid;">客戶</td>';
                showStr += '<td style="border: 1px solid;width:160px;">備注</td>';
                showStr += '<td style="border: 1px solid;">模具名稱</td>';
                showStr += '<td style="border: 1px solid;">標準套數</td>';
                showStr += '<td style="border: 1px solid;">入庫存數</td>';
                showStr += '</tr>';
                showStr += '</thead>';
                showStr += '<tbody>';
                if (all_length < pageSize) {
                    for (var j = 0; j < all_length; j++) {
                        showStr += '<tr style="text-align:center;height:28px;">'
                        showStr += '<td style="border: 1px solid;">' + KStarForm.koContentModel.MXList()[i * pageSize + j].AccessoriesNumber() + '</td>'
                        showStr += '<td style="border: 1px solid;">' + JSON.parse(KStarForm.koContentModel.MXList()[i * pageSize + j].Customer_KJ())[0].id + '</td>'
                        showStr += '<td style="border: 1px solid;width:160px;">' + KStarForm.koContentModel.MXList()[i * pageSize + j].Remark() + '</td>'
                        showStr += '<td style="border: 1px solid;">' + KStarForm.koContentModel.MXList()[i * pageSize + j].MouldName_NumberAndName().substring(KStarForm.koContentModel.MXList()[i * pageSize + j].MouldName_NumberAndName().indexOf('-') + 1) + '</td>'
                        showStr += '<td style="border: 1px solid;">' + KStarForm.koContentModel.MXList()[i * pageSize + j].StandardNumber() + '</td>'
                        showStr += '<td style="border: 1px solid;">' + KStarForm.koContentModel.MXList()[i * pageSize + j].StockNumber() + '</td>'
                        showStr += '</tr>'
                    }
                } else {
                    for (var j = 0; j < pageSize; j++) {
                        showStr += '<tr style="text-align:center;height:28px;">'
                        showStr += '<td style="border: 1px solid;">' + KStarForm.koContentModel.MXList()[i * pageSize + j].AccessoriesNumber() + '</td>'
                        showStr += '<td style="border: 1px solid;">' + JSON.parse(KStarForm.koContentModel.MXList()[i * pageSize + j].Customer_KJ())[0].id + '</td>'
                        showStr += '<td style="border: 1px solid;">' + KStarForm.koContentModel.MXList()[i * pageSize + j].Remark() + '</td>'
                        showStr += '<td style="border: 1px solid;">' + KStarForm.koContentModel.MXList()[i * pageSize + j].MouldName_NumberAndName().substring(KStarForm.koContentModel.MXList()[i * pageSize + j].MouldName_NumberAndName().indexOf('-') + 1) + '</td>'
                        showStr += '<td style="border: 1px solid;">' + KStarForm.koContentModel.MXList()[i * pageSize + j].StandardNumber() + '</td>'
                        showStr += '<td style="border: 1px solid;">' + KStarForm.koContentModel.MXList()[i * pageSize + j].StockNumber() + '</td>'
                        showStr += '</tr>'
                    }
                    all_length -= pageSize;
                }

                showStr += '</tbody>'
                showStr += '</table>'
                showStr += '<div style="text-align:center;font-size:20px;width:750px;margin-top:40px;height:30px;">'
                showStr += '<div style="width:25%;float:left;"><b>移交人：&nbsp;</b></div>'
                showStr += '<div style="width:25%;float:left;"><b>移交日期：&nbsp;</b></div>'
                showStr += '<div style="width:25%;float:left;"><b>簽收人：&nbsp;</b></div>'
                showStr += '<div style="width:25%;float:left;"><b>簽收日期：&nbsp;</b></div>'
                showStr += '</div>'
                showStr += '</div>';
            }
            showStr += '</body>';
            win = window.open('打印.html');
            //输出
            win.document.write(showStr);
            //调用浏览器打印 Ctrl + P
            win.print();

        }

 

 

laizhixue
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
jquery打印html页面自动分页,前端实现指定位置分页、多页打印功能（jquery.print.js）...
weixin_33458486的博客
05-31 1948
1. 分类原生打印，window.print() 实现插件实现，很多种，我这里选择的是 jquery.print.js优缺点原生打印的好处就不多说了，简单方便，全屏打印，如果对打印功能没有什么特殊要求可以直接使用即可；使用插件的好处可以很方便的实现局部打印以及对各种功能的配置项目需求打印医院报告单，单子上的内容比较多，且会有 echarts 图表；在表单的地步会展示列表数据表示图表中标注点的信息。...
JS实现分页打印
三岁打酱油的博客
03-21 2869
使用网上的打印插件会有一些无法分页和样式丢失的问题，本文章记录使用window.print()实现打印，需要加入css控制打印内容显示。 分页 打印强制分页，父节点不能有overflow:hidden属性，打印分页模块使用display:inline-block; <div style="page-break-before:always;"></div> 实现 首先需要...
前端打印时js分页实现共几页和第几页
08-06
js前端打印s分页实现共几页和第几页功能，触底自动换页，并每页表头新增固定部分，包括金额大写转换和当前时间获取
前端实现分页打印(一)
我是渣渣
12-16 4685
实现页面为结算单，也页面由固定头部，订单信息，产品列表，金额汇总，订单明细 其中产品列表需要动态计算分压，订单明细由于存在多个子单，订单收费项目可配置化，导致也存在多个分页需要处理
前端实现打印1 - 使用 iframe 实现 并 分页打印
工作中遇到问题记录
08-03 986
借助 iframe 实现打印并分页打印
前端页面打印分页
weixin_44997513的博客
07-25 910
前端打印
分分钟玩转Vue.js组件
10-21
教大家如何分分钟玩转Vue.js组件,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019微信H5分分猜游戏源码.rar
08-12
2019微信H5分分猜游戏源码，完整源码。可部署。
分分钟玩转Vue.js组件（二）
12-03
.btn-demo { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background-color: #19b586; text-decoration: none; border: none; border-radius: 4px;... font-fami
前端 打印 分页显示
xiaosi1413的博客
03-22 1487
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!-- saved from url=(0051)http://localhost:8080/MDITIP/printOutContent.action --> <html xmlns="http://www.w3.org/1999/
前端打印界面分页问题，以及当一个表格数据过多自动分页时，出现断行问题即一行数据被切割在两页纸上
D浩DzD的博客
11-24 5895
在做一个打印功能时，当一个表格数据过多而不能显示时，浏览器会自动进行分页处理，但是当一页显示不下一个表格时，自动分页会把一行数据暴力的切割显示在两页纸上。问题如下图： 可以使用page-break-inside 属性用于设置是否在指定元素中插入分页符。 有三个参数 值 描述 auto 默认。如果必要则在元素内部插入分页符。 avoid 避免在元素内部插入分页符。 inherit 规定应该从父元素继承 page-break-inside 属性的设置。 注意： 您不能对绝对定位的元
js控制分页打印、打印分页示例
12-02
代码如下: <%@ page language=”java” contentType=”text/html; charset=UTF-8″ pageEncoding=”UTF-8″%> <!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”> <HTML> <HEAD> <TITLE>javascript打印-打印页面设置-打印预览代码</TITLE> <META http-equiv=Content-Type content=”text/html
window.print() 前端实现网页打印详解
qq_43248623的博客
08-21 2222
前言 print作为浏览已经比较成熟的技术可以经常被用来打印页面的部分内容，我们可以在MDN上查看到相关的简单介绍。 一、print()方法 print() 方法用于打印当前窗口的内容。调用 print() 方法会产生一个打印预览弹框，让用户可以设置打印请求。最简单的打印就是直接调用window.print()，当然用 document.execCommand(‘print’) 也可以达到同样的效果。默认打印页面中body里的所有内容。 <!DOCTYPE html> <html lang
Vue使用print.js连续打印多页A4表单
qq_39691676的博客
01-14 7336
父组件 <el-dialog :visible.sync="printDialog" class="printDialog"> <div ref="print"> <section class="print-page page-a4"> <acceptance-form :reg-id="printTabl...
print.js分页,铺满纸张打印
GoldenLegs的博客
11-23 5735
问题 打印A和B两个区域, 高度大于一张A4纸高度, 如何保证两个区域分别铺满在A4纸上 A4纸宽度: 210mm; 高度:297mm; 普通打印: 思路: 打印内容超出一张纸高度时,根据纸张大小,设置打印区域的zoom,按比例缩小打印 依赖函数 Print.js,采用iframe绘制并打印 (复制调用即可) /***** iframe打印 * @param dom 打印区域的class, id * @param options.margin 控制页眉页脚, 默认 4
前端打印功能、js打印功能、vue打印功能、vue-print-nb 打印table，数据很多，打印不全
热门推荐
12-30 2万+
今天做了一个发票打印的功能，我使用了vue，整理网上的资料，都逃不过window.print();的， 不多说，先上vue的打印方式： 插件： 1、print-js 优点：活跃度高，插件体积小 缺点：我没看怎么使用，哈哈哈哈 2、vue-print-nb 优点：我看配置后可以多页打印， 缺点：活跃度低，插件大小很大 3、vue-print-nb-jeecg 实不相瞒，我使用的人家集成的模板，哈哈哈哈哈哈哈，直接有这个，就很舒服 注意：上面这三个，不论怎么样使用都更改了很多配置，比如我安装了vue-print
vue使用printJs实现前端打印,以及打印分页实现
最新发布
Arcobaleno_1177的博客
08-08 4346
在web端可以直接使用原生调用方法调用打印,但是往往需要单独把需要打印的东西拎出来画一个单独的html,而使用printJs则可选中你需要打印的代码块,进行页面局部打印。
Print.js实现打印pdf，HTML，图片(可设置样式可分页)
Ghmin的博客
12-28 1万+
Print.js四种打印类型：'pdf'、'html'、'image'、'json'一文搞懂
JS 前端打印功能--原生写法（分页处理、样式调整、隐藏打印滚动条）
词不达意难知的博客
05-29 1241
JS 前端打印功能--原生写法
安卓用户界面的搭建分分动态两种方式
06-13
是的，安卓用户界面的搭建可以分为静态和动态两种方式。 静态界面是指通过XML文件来描述用户界面的布局和控件的位置、大小、颜色等属性，然后在代码中加载该XML文件来生成用户界面，这种方式适用于界面比较简单、稳定的情况。 动态界面是指通过Java代码来动态地创建和修改控件和布局，使得用户界面更加灵活和可定制。这种方式适用于界面比较复杂、交互性比较强的情况。在动态界面中，可以使用诸如LinearLayout、RelativeLayout等布局管理器，通过代码来添加、移除、修改控件、设置控件的属性等。 总之，静态界面和动态界面都有各自的优缺点，具体使用哪种方式取决于具体的应用场景和需求。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

laizhixue

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值