js 处理打印发票自动分页（包含表头等每页固定元素处理）

已于 2024-06-28 10:35:06 修改
阅读量240 收藏
点赞数 3
分类专栏： js自动分页 文章标签： javascript 前端 开发语言
于 2024-06-27 17:11:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/o_oppp/article/details/140018162
版权 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <link rel="stylesheet" href="./common.css" />
</head>
<style>
  body {
    box-sizing: border-box;
    color: rgb(0, 0, 0);
    font-family: SimSun SimHei !important;
    font-size: 3.5mm;
    width: 210mm;
    height: 140mm;
    /* margin-top: 10mm; */
    /* margin-top: 16mm; */
    /* border: 1px solid #000; */
  }

  #app {
    width: 200mm;
    margin: 0 auto;
    transform-origin: center top;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin: 0;
    padding: 0;
  }

  @page {
    margin: 0;
  }

  .hosname {
    text-align: center;
    margin-top: 2mm;
    font-size: 4mm;
    font-weight: 700;
    margin-bottom: 2mm;
  }

  .title {
    font-size: 5.5mm;
    text-align: center;
    margin-bottom: 2mm;
  }

  .info {
    font-size: 2.7mm;
  }

  .info_content {
    display: inline-block;
    min-width: 15mm;
    margin-right: 2mm;
  }
  .th_box,.tr_box{
    display: grid;
    grid-template-columns: 8mm 18mm auto 20mm 20mm 10mm 25mm 11mm 26mm;
    text-align: center;
    color: #000;
    font-size: 2.8mm;
    line-height: 3.2mm;
    word-break:break-all;
  }
  .sum_box{
    display: grid;
    grid-template-columns:  auto 26mm;
    text-align: center;
    color: #000;
    font-size: 2.8mm;
    line-height: 3.2mm;
    word-break:break-all;
  }
.jinjia_box>div:first-child{
  border-bottom: 1px solid #000;
}
  .jinjia_column{
    display: flex;
  }
  .jinjia_column>div{
    flex: 1;
  }
  .jinjia_column>div:not(:last-child){
    border-right: 1px solid #000;
  }
  .tr_box,.th_box,.sum_box{
    border-right: 1px solid #000;
  }
  .th_box{
    margin-top: 1mm;
  }
  .th_box>div:not(:last-child){
    line-height: 6.4mm;
  }
  .th_box>div{
    border:1px solid #000;
    border-right: 0;
    font-weight: bold;
  }
  .tr_box >div,.sum_box>div{
    border: 1px solid #000;
    border-right: none;
    border-top: none;
  }
  .no_border{
    border:none !important;
  }
  .testAll>.page_bottom_box:last-child{
    display: none;
  }
</style>

<body class="A5">
  <div id="app">
    <div style="page-break-after: always;" class="testAll" v-for="(v, i) in aLLPrintData.tableList" >
      <div class="page_top_box">
        <div class="hosname">{{aLLPrintData.deptName}}</div>
        <div class="title">{{aLLPrintData.title}}入库单</div>
        <div class="info">
          <span class="info_tab">单号</span>
          <span class="info_content">{{aLLPrintData.operationNo}}</span>
          <span class="info_tab">库房</span>
          <span class="info_content">{{aLLPrintData.warehouseName}}</span>
          <span class="info_tab">摘要</span>
          <span class="info_content" v-if="aLLPrintData.type == 1">{{aLLPrintData.supplierName}}</span>
          <span class="info_content" v-if="aLLPrintData.type == 2">{{aLLPrintData.keshi}}领用退回</span>
          <span class="info_content"
            v-if="aLLPrintData.type == 3 || aLLPrintData.type == 4">{{aLLPrintData.digest}}</span>
          <span class="info_tab">入库日期</span>
          <span class="info_content">{{aLLPrintData.operationTimeStr}}</span>
          <!-- pageNum分页计算页码唯一固定标识，勿动 -->
          <span style="float: right;" class="pageNum">1/1</span>
        </div>
          <div class="th_box">
            <div class="xuhao_box">序号</div>
            <div class="bianma_box">药品编码</div>
            <div class="pinming_box">品名</div>
            <div class="pihao_box">药品批号</div>
            <div class="guige_box">规格</div>
            <div class="danwei_box">单位</div>
            <div class="changshang_box">生产厂商</div>
            <div class="shuliang_box">数量</div>
            <div class="jinjia_box">
              <div>进价</div>
              <div class="jinjia_column"><div>单价</div><div>金额</div></div>
            </div>
          </div>
      </div>
      <!-- <div class="table_content"> -->
        <div class="tr_box testways" v-for="(item, index) in aLLPrintData.operationDetailList">
            <div class="xuhao_box">
              {{index + 1}}
            </div>
            <div class="bianma_box">
              {{item.materialCode}}
            </div>

            <div class="pinming_box">
              {{item.materialName}}
            </div>

            <div class="pihao_box">
              {{item.materialBatchNo}}
            </div>

            <div class="guige_box">
              {{item.materialSpec}}
            </div>
            <div class="danwei_box">
              {{item.materialUnitStr}}
            </div>
            <div class="changshang_box">
              {{item.materialSupplier}}
            </div>
            <div class="shuliang_box">
              {{item.operationNum}}
            </div>
            <div class="jinjia_column">
              <div>
                {{item.inboundAmount}}
              </div>
              <div>
                {{item.inboundAmountTotal}}
              </div>
            </div>
        <!-- </div> -->
      </div>
      <div class="page_bottom_box">
        <div class="tr_box">
            <div class="xuhao_box no_border">
            </div>
            <div class="bianma_box no_border">
            </div>
            <div class="pinming_box no_border">
            </div>
            <div class="pihao_box no_border">
            </div>
            <div class="guige_box no_border">
            </div>
            <div class="danwei_box no_border">
            </div>
            <div class="changshang_box no_border">
            </div>
            <div class="shuliang_box no_border">
            </div>
            <div class="jinjia_column">
              <div>
                小计
              </div>
              <!-- pageSum分页计算小计唯一固定标识，勿动 -->
              <div class="pageSum">
               0
              </div>
            </div>
        </div>
        <div class="sum_box">
          <div style="border-left: none; border-bottom: none;text-align: left;">
            <span class="info_tab">复核验收</span>
            <span class="info_content"></span>
            <span class="info_tab">制单</span>
            <span class="info_content">{{aLLPrintData.createBy}}</span>
            <span class="info_tab">审核</span>
            <span class="info_content"></span>
          </div>
          <div class="jinjia_column">
              <div>
                合计
              </div>
              <div>
                {{(allinboundAmountTotal - 0).toFixed(2)}}
              </div>
            </div>
        </div>
      </div>
    </div>
  </div>
</body>
<script src=".././vue.min.js"></script>
<script src="../printRuku.js"></script>
<script>
  function formatDate(cellValue) {
    if (cellValue == null || cellValue == "") return "";
    var date = new Date(cellValue);
    var year = date.getFullYear();
    var month =
      date.getMonth() + 1 < 10
        ? "0" + (date.getMonth() + 1)
        : date.getMonth() + 1;
    var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
    var hours =
      date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
    var minutes =
      date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
    var seconds =
      date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
    return (
      year +
      "-" +
      month +
      "-" +
      day +
      " " +
      hours +
      ":" +
      minutes +
      ":" +
      seconds
    );
  }
  const require = parent.window.require;

  //引入ipcRenderer对象（electron）
  const { ipcRenderer } = require("electron");
  // import { ipcRenderer } from 'electron';
  new Vue({
    el: "#app",
    data: {
      aLLPrintData: [],
      allinboundAmountTotal: 0,
      allsaleAmountTotal: 0,
      formatDate,
    },

    mounted() {
      ipcRenderer.on("print-edit", (event, data) => {
        console.log('打印入库单 ==:', data)
        data[0].tableList = []
        data[0].operationDetailList.forEach((item, index) => {
        //总合计
          this.allinboundAmountTotal += item.inboundAmountTotal - 0;
          if (!data[0].tableList[0]) {
            data[0].tableList[0] = {
              allinboundAmountTotal: 0,
              allsaleAmountTotal: 0
            }
          }
        });
        this.aLLPrintData = data[0];

        this.$nextTick(() => {
          printFun(this.print,data,110,{cloneElementTop:document.querySelectorAll('.page_top_box'),cloneElementBottom:document.querySelectorAll('.page_bottom_box')})
        });
      });
    },
    methods: {
      print(data){
        this.$nextTick(() => {
          ipcRenderer.send("start-print", data);
        });
      }
    },
  });
</script>

</html>

printRuku.js分页方法文件

//func回调方法；data回调方法参数（也用于页码处理）；height页面高度; cloneElementTop（相当于页眉）、cloneElementBottom（相当于页脚）要克隆的元素;
let pageSum = 0; //每页小计
let pageNum = 1; //总页码
function printFun(func, data, height, breakData = {}) {
  let cloneElementTop = breakData.cloneElementTop || '',
    cloneElementBottom = breakData.cloneElementBottom || '';
  console.log(cloneElementTop, cloneElementBottom);
  // 获取所有class为page的div元素
  const pages = document.querySelectorAll('.testAll');

  // 遍历每个page元素
  pages.forEach((page, index) => {
    // 获取该page元素中class为ways的div元素
    const waysDivs = page.querySelectorAll('.testways');
    const h = Math.floor(this.px2mm(height ? height : 208));
    // console.log(h, '毫米转px');
    // 遍历每个waysDiv元素
    waysDivs.forEach((waysDiv, i) => {
      const wayDivBreak = page.querySelectorAll('.page_break');
      let distance = 0;
      // console.log(wayDivBreak.length, '分页', i);
      // 计算waysDiv距离page顶部的垂直距离
      if (wayDivBreak.length > 0) {
        distance =
          waysDiv.getClientRects()[0].top +
          waysDiv.offsetHeight -
          (wayDivBreak[[wayDivBreak.length - 1]].getClientRects()[0].top + wayDivBreak[[wayDivBreak.length - 1]].offsetHeight);
      } else {
        distance = waysDiv.getClientRects()[0].top + waysDiv.offsetHeight - page.getClientRects()[0].top;
      }
      // 判断距离是否超过208mm
      if (distance > h) {
        console.log('距离超过一页waysDivs[i - 1]', waysDivs[i - 1]);
        // 添加page-break-after: always样式
        let div = document.createElement('div');
        div.style.pageBreakBefore = 'always';
        div.classList.add('page_break');
        //添加合计、分页、表头
        var parent = waysDivs[i].parentNode;
        let cloneNode = cloneElementBottom[0].cloneNode(true);
        //修改小计
        cloneNode.querySelector('.pageSum').textContent = pageSum.toFixed(2);
        parent.insertBefore(cloneNode, waysDivs[i]);
        parent.insertBefore(div, waysDivs[i]);
        //重置下一页小计和页码
        pageSum = data[0].operationDetailList[i].inboundAmountTotal;
        pageNum += 1;
      } else {
        pageSum += data[0].operationDetailList[i].inboundAmountTotal;
        // console.log(waysDiv, '当前分页', waysDivs[i - 1], '前一个', h - distance);
      }
      console.log(i, waysDivs.length - 1, '开始');
      if (i == waysDivs.length - 1) {
        //为最后一页添加小计
        var parent = waysDivs[i].parentNode;
        let cloneNode = cloneElementBottom[0].cloneNode(true);
        cloneNode.querySelector('.pageSum').textContent = pageSum.toFixed(2);
        let allBottom = document.querySelectorAll('.page_bottom_box');
        parent.insertBefore(cloneNode, allBottom[allBottom.length - 1]);
        //修改第一页页码
        document.querySelector('.page_top_box').querySelector('.pageNum').textContent = 1 + '/' + pageNum;
        //当前为最后一个分页，开始添加表头等，修改页码
        const allPageBreak = document.querySelectorAll('.page_break');
        allPageBreak.forEach((pageItem, pageIndex) => {
          cloneNode = cloneElementTop[0].cloneNode(true);
          cloneNode.querySelector('.pageNum').textContent = pageIndex + 2 + '/' + pageNum;
          parent.insertBefore(cloneNode, pageItem.nextElementSibling);
        });
      }
    });
  });
  setTimeout(() => {
  //调用传入方法，并传参
    func(data);
  }, 200);
}
function px2mm(mm) {
  // 创建一个1mm宽的元素插入到页面
  let div = document.createElement('div');
  div.id = 'mm';
  div.style.width = '1mm';
  document.querySelector('body').appendChild(div);
  // 原生方法获取浏览器对元素的计算值
  let mm1 = document.getElementById('mm').getBoundingClientRect();
  // console.log(mm1, '一厘米宽度');
  document.querySelector('body').removeChild(div);
  return mm * mm1.width;
}

common.css公共样式文件

body {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
    color: rgba(0, 0, 0, 0.85);
    font-size: 3.2mm;
}

html {
    width: 100%;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

a:focus,
a:active {
    outline: none;
}

a:focus,
a:hover {
    cursor: pointer;
    color: inherit;
    text-decoration: none;
}

div:focus {
    outline: none;
}

.fr {
    float: right;
}

.fl {
    float: left;
}

.block {
    display: block;
}

.pointer {
    cursor: pointer;
}

.inlineBlock {
    display: block;
}

@page {
    margin: 0;
}
body {
    margin: 0;
}
.sheet {
    margin: 0;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
    page-break-after: always;
}
h1 {
    color: #000;
    background: none;
}

nav,
aside {
    display: none;
}

body {
    width: 100%;
    margin: 0;
}

a {
    font-weight: bolder;
    text-decoration: none;
}

a[href^="http"]:after {
    content: " <" attr(href) "> ";
}
o_oppp
关注
专栏目录
html打印分页自带表头表尾
01-15
需要自己写打印程序时，会遇到打印分页都需有表头表尾的问题，html打印分页自带表头表尾，可以参考学习下
print.js如何实现分页行不被截断且每一页都有表头
weixin_48117629的博客
09-28 898
print.js分页不断行。
js打印时分页，每页都有表头和表尾
woshiweidanxia的专栏
04-30 9060
无标题文档 @media print{ INPUT {display:none} } 每页都有的表头 表格内容表格内容 表格内容表格内容 表格内容表格内容 表格内容表格内容 表格内容表格内容 表格内容表格内容 表格内容表格内容 表格内容表格内容 表格内容表格内容 表格内容表格内容 表格内容表格内容 表格内容表格内容 表格内容表格内容
jsp实现套打（发票打印）
weixin_30414155的博客
06-23 236
jsp普通打印很简单，有很多方式，可以用window.print()这种自带的方法，也可以用组件webBrowser，还可以用ScriptX这样的第三方组件来实现。这样的打印都是打印默认的A4，如果碰到到发票的打印要怎么实现呢？ 首先，我们要明白，实现网页套打，还是用我们现有的方法去实现。 其次，要知道发票的使用的纸张是不一样的，首先它用的是复写纸，要实...
vue使用printJs实现前端打印,以及打印分页实现
Arcobaleno_1177的博客
08-08 6704
在web端可以直接使用原生调用方法调用打印,但是往往需要单独把需要打印的东西拎出来画一个单独的html,而使用printJs则可选中你需要打印的代码块,进行页面局部打印。
js 页面打印，兼容单个打印和分页批量打印，自定义页眉和简单页脚
_修铁路的、的博客
12-10 5318
场景： 最近在公司做开发，有个需求需要页面打印功能，作为前端半桶水都不到，只会改页面的我，一脸懵逼，公司里也没人系统的做过，按照惯例，本着有事找度娘的心态(我一直认为我们现在遇到的70%-80%的问题，肯定前人有遇到过)，上百度搜索一圈，发现还是有大量的帖子，但很多都是重复的，且并不十分符合我当前的需求，但通过查阅大佬们的帖子，我对js打印的处理方向有个大致的了解。话不多说，开始进...
jQuery打印指定区域Html页面并自动分页
10-25
在这种情况下，`jQuery.PrintArea.js`插件提供了一个解决方案，它允许我们指定要打印的区域，并且能够自动进行分页。这个插件特别适用于那些内容较多、需要跨多页打印的场景。 使用`jQuery.PrintArea.js`的基本步骤...
Excel表格如何分页打印自动分页取消分页等技巧.doc
11-19
Excel表格如何分页打印自动分页取消分页等技巧 在Excel表格中，如何实现分页打印、自动分页、取消分页等技巧是一个非常重要的问题。特别是在制作多个表格时，我们希望将每个表格分别打印到每一张纸上面，每张纸上面...
前端打印时js分页实现共几页和第几页
08-06
本文将详细介绍如何使用JavaScript（js）在前端实现分页功能，包括显示总页数、当前页数，以及触底自动换页，并在每页表头增加固定部分，如金额大写转换和当前时间获取。 一、分页基础 1. 数据分块：分页的核心是...
VUE打印demo，自动分页
10-10
在实际应用中，你可能需要根据具体需求来定制分页逻辑，例如根据内容长度动态调整每页的行数或元素数量。此外，你还需要考虑跨浏览器兼容性，因为不同的浏览器对打印功能的支持可能存在差异。 总结来说，这个“VUE...
使用js实现打印分页的功能（包括页码，表头，表尾）
07-13
使用js实现打印分页的功能（包括页码，表头，表尾）
JS打印之指定元素分页，自动插入分页符
gyueh的博客
06-22 1481
<div style="height:794px; width:0 auto;page-break-after: always;"> </div> 注意： 加上page-break-after: always之后，该div后边的内容才会另起一页
通过控制css样式，实现打印自动分页
最新发布
o_oppp的博客
01-12 876
通过class属性区分：testAll病历，testways病历中可能需要分页的块级元素，page_break分页元素；获取每个病历（testAll）中的testways元素，遍历通过当前病历（testAll）中的最后一个page_break元素（没有page_break元素则获取当前病历（testAll）距顶部高度）计算当前元素是否需要添加分页样式。注意：page-break-after在样式为display: block;问题：有多个病历，每个病历是否需要分页，分多少页都不确定，计算高度实现手动分页。
js打印分页、加标题、每页控制条数
weixin_44430982的博客
12-21 2192
js打印分页、加标题、每页控制条数 1.js 2.标签内写入以下内容 <c:forEach items="${tjxx}" var="item" varStatus="status"> <c:if test="${ (status.index )%12==0}"> <table class="table table-striped table-str...
javascript打印发票
小影
09-28 5484
几个月前，公司的某一个项目需要连接到打印机打印订单发票，利用javascript的window.print()调用打印页面进行打印。随着时间的推移，客户那边每次打印发票都需要手动进行切割。一个订单的发票分为客户端和商家端，如果提交两个订单，那就需要打印四张发票，现在出现的问题是所有的发票都打印在一张发票上面，需要用户每次去手动撕下来。网上说用page-break-after: always，但是这...
JS+CSS 实现打印分页 每页都有表头和页尾
生活要快乐 - 魏言
08-19 6622
无标题文档@media print{INPUT {display:none}}每页都有的表头表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格内容表格
JS实现分页打印：保留表头和表尾的技巧
"JS分页打印技术允许在打印网页时保留表头和表尾，确保多页打印时数据的一致性和可读性。通过特定的CSS样式和JavaScript代码，可以实现这一功能。以下是一个简单的示例，展示了如何使用JS进行分页打印并保持表头的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值