请教一个html打印问题，困扰了好久？-灵析社区

需求：打印自提点订单面单。用的是window自带的print，但是发现细节很多。 主要的问题有。 1、第一步需要将需要打印的页面呈现出来，如何设置页面和打印的页面保持一比一呢？我百度了一下，a4纸的大小，px和cm都尝试了，但是还是和打印页面不一致。为什么要一比一还原呢？是因为在网页上面显示了10条数据，但是打印界面10条数据却放不下跑到第二页了。 2、如何确定每页的表格要显示多少条数据呢？因为有的数据占2行，有的占1行，有的占3行。 因为真实的情况，涉及到单元格的合并，打印指定的区域（下面代码已实现）等等需求。 所以，我需要先确定好每页展示多少条数据，不然的话，有可能这页的数据跑到了下一页，就变的很难看。有时候恰好最后一个数据是合并的数据就更麻烦了。 我的思路是先确定好每页显示多少条，然后才知道要分多少页。单独对每页的数据再做合并操作。 要确定多少条就要知道真实情况下a4纸的宽高，以及针对商品名称超长的时候，分多行显示，表格最多容纳多少条数据。 下面是多多的提货单   代码如下 .main { /*width: 800px ;*/ /* border: 1px solid red; */ margin: 0 auto; } .item { width: 595px; height: 842px; /*border: 1px solid gray;*/ margin-bottom: 5px; } table { font-size: 10px; } td { page-break-inside: avoid; } @page { size: A4 portrait; /*设置纸张及其方向 这里表示使用A4纸张，打印方向为纵向*/ margin: 0; /* 设定页边距 */ } .item { page-break-after: always; } 打印 幸福里超市 - 用户提货单 提货日期：2023-10-23 门店地址：xxxxxxxxxxxxxxxxxxx 订单按照手机号最后一位从小到大0~9排列 手机号 订单号 商品条码 商品名称 数量 15515656xxx 张三 20231004220109744001 15672657382 常规款-送亲果定制手提袋|约3斤/箱送亲果定制手提袋|约3斤/箱送亲果定制手提袋|约3斤/箱提袋|约3斤/箱送亲果定制手提袋|约3斤/箱 23 第1页，共3页 第二页 第三页 new Vue({ el: '#app', data: function () { return { } }, created() { }, methods: { print() { myPrint(document.getElementById('printDiv')) }, } }) const myPrint = (dom) => { writeIframe(dom); // 写入iframe function writeIframe(dom) { const iframe = document.createElement("iframe"); iframe.setAttribute("style", "position:absolute;width:0;height:0;top:-10px;left:-10px;"); document.body.appendChild(iframe); const doc = iframe.contentDocument; doc.open(); doc.write(getStyle() + getHtml(dom)); doc.close(); iframe.onload = function () { iframe.contentWindow.print(); setTimeout(() => { document.body.removeChild(iframe); }, 100); }; } // 获取样式 function getStyle() { const styles = document.querySelectorAll("style,link"); let str = ""; for (let i = 0; i ## 2023-20-09 01:25:00 补充 可能我表达的不是太清楚，目前其实只有一个问题，就是web页面和打印的页面 实现不了 一致性。 我目前能做到的这是这样的效果，也还能接受，每页显示30条的数据，下方留了大片的空白，就是为了防止商品名称不可控，万一这30条数据的名字都是占了两行，也不会超过这一页的高 你看同样的大小的页面，同样的数据，打印页面下面就有一大片的空白，但是web页面基本上就占满了。 我设置的.item的大小为A4纸的大小 .item { page-break-after: always; height: 297mm; width: 210mm; }    ## 2023-10-09 最新更新 上面的打印界面和真实的打印也有很大的差别。绝了。 1、下方空白地方太多了，打印界面 的空白地方占1/3,真实打印出来占了1/2 2、右侧少了一列数据