window.print() 实现分页打印

最新推荐文章于 2024-08-22 16:00:34 发布

fmwind

最新推荐文章于 2024-08-22 16:00:34 发布

阅读量1w

点赞数

本文链接：https://blog.csdn.net/fmwind/article/details/88850340

版权

window.print() 实现分页打印主要通过样式来控制，样式如下：

style="page-break-after:always"

如果打印两页只需要给第一页加上该样式即可，不需要给第二页加上，否则第二页在打印时会多走一张空白纸，具体代码如下：

<div class="container a4-endwise" id="page1" style="page-break-after:always;">
    第一页被打印的内容
</div>

<div class="container a4-endwise" id="page2" >
    第二页被打印的内容
</div>

window.print() 实现打印可参考：window.print() 实现A4纸张打印及去掉页眉页脚及打印链接

page-break-after 属性介绍参考 CSS page-break-after 属性

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

fmwind

关注关注

0
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

window.print()打印表格并且分页时动态添加表头

weixin_54362826的博客

10-03

1644

方法一：获取当前表格内容高度，达到某一值后分页（失败）通过 offsetHeighet 获取到元素高度 let arr = document.getElementsByClassName("bodyDetail") let heightNum=0; //累加的高度 let onePage=1300; //第一页的高度 for(let i in arr){ heightNum+=arr[i].offsetHeight if(heightNum>onePage){ this.thead[i]=true;

window.print实现分页打印功能

LZW891967934的专栏

02-12

6589

1. 在要分页的那一条数据所属的 DOM 元素上增加样式：page-break-after: always 或 page-break-before: always，一个在这条数据前分页，一个在这条数据后分页。 2. //打印方法 function preview() { bdhtml = window.document.body.innerHTML; sprns

参与评论您还未登录，请先登录后发表或查看评论

JS 使用 window对象的print方法实现分页打印

最新发布

m0_60330187的博客

08-22

266

window.print() location.reload() // 重新刷新当前窗口, 很重要. 不刷新会导致除局部之外的全失效了 window.document.body.innerHTML = bdhtml // 重新给页面内容赋值；const jubuData = document.getElementById('myId').innerHTML // 把获取的局部div内容赋给body标签, 相当于重置了 body里的内容。// el-table 打印不全的问题。

window.print分页打印

04-19

NULL 博文链接：https://ctrain.iteye.com/blog/1864992

window.print()分页

qq_38935512的博客

02-05

732

详解window.print()，实现长列表打印分页

chenlim87的博客

09-22

5383

其实我们只要控制打印的行数就可以了。我们需要知道打印元素的高度和表格行的高度，算出一页纸可以打印多少行，超出的部分放到下一页打印。4、-webkit-print-color-adjust：是一个在浏览器中强制打印背景颜色和字体颜色的css属性，当打印出来的某些元素的背景颜色没有被显示时，可以使用。我们页面的样式和打印页面时的样式是两个不同的样式，打印时会默认携带页面的样式，同时呢我们也可以修改页面打印时的样式。1、先获取指定容器中的内容，将body的内容替换掉，调用了打印方法后，再把原来的body恢复。

关于window.print打印分页功能

qq_39966730的博客

05-18

1977

里面有个边距默认是默认值，修改为无后，就是一页了，可我不能一开始就让用户打印去改这个边距，这种体验是极其不人性化的，已是在打印样式设置里面增加 margin:0;经过不断尝试，发现，在最后一页的高度设置比平常页数低17px就可以解决，于是就针对最后一页进行样式设置减少17px，至此解决window.print打印分页问题。于是想着增加第二页打印看下效果，我滴乖乖，好了，结果两页的页面又多出了一页。但现在我想动态打印分页，至内容一页时打印一页，内容两页时打印两页。

JS 使用 window对象的print方法实现分页打印功能

10-18

在Web开发中，经常需要实现打印功能，尤其是当页面内容较多时，分页打印就显得尤为重要。JavaScript作为前端开发中的核心语言，提供了window对象，利用window对象的print方法可以实现Web内容的打印。此方法的优点是...

聊一聊浏览器打印 - window.print

郊眠寺

11-09

1万+

一般信息填写类的需求页面，都会增设「预览」和「打印」功能。我们会通过编写 DOM 及样式来绘制出预览视图，而打印则是基于预览来生成 PDF 文件。浏览器原生 API可以用于打印当前窗口（window.document）视图内容。调用此方法会产生一个打印预览弹框，用户可以根据具体设置来得到打印结果。接下来将从 code 层面带领大家熟悉「打印」的使用。为大家准备了一个前端资料包。包含54本，2.57G的前端相关电子书，《前端面试宝典（附答案和解析）》，难点、重点知识视频教程（全套）。

HTML print打印(分页,统计,排版)

11-21

方案一(适用于动态页面)分层结构方案二(适用于静态页面)独立结构 /** * 基于jquery的打印分页插件 * 方法API: * loadDate data,model,shownum(数据源[数组],模板页面,每页显示数) data 建议最大数据量不要超过500 * loadTABLE 利用模版创建TABLE代码 * insertTABLE 插入数据 * formwork 创建分页框架 * setAlign 设置排版样式右对齐 - 居中 * setWidth 设置宽度 * setLineHide 影藏一列数据 * rowspans 合并多列字段用,隔开注意:最好查询时使用排序后合并 * rowspan 合并一列字段注意:最好查询时使用排序后合并 * StringtoJSON 将JSON的String字符,转换成JS对象数据 * getalign 字符切换对应setAlign 方法 * SumTable 计算表的列("2,3,4") 对应层级TABLE **/

jqprint可分页打印页面内容

12-09

利用jquery插件jqprint打印当前页面的标签内容，自动换页，包含jar包，js，java代码。

JS 实现web分页打印功能

11-09

使用JS的Window对象的Print方法实现兼容性强的分页打印功能，可直接运行，代码直接复制即可用。

window.print打印时分页的问题

first_shun的博客

09-12

2914

window.print打印分页的解决方案

window.print()实现分页打印

Lily_Deng的博客

07-29

2310

第一种方法：字符串拼接的方式表头在style中填写样式 var printStr = "<html><head><meta http-equiv='Content-Type' content='text/html; charset=utf-8'>" + "<style media='print' type=\"text/css\">@page {size: auto; margin: 0mm; }</style>" +

window.print（）表格打印完美实现分页

qq_38935512的博客

03-05

7028

问题描述：采用js打印页面，表格过长会出现分页，表格就会被裁减（那种每行固定就一行展示的简单，每个分页给他多少条数据就完事了），这里的问题是数据从后台获取，而且每一列都可能出现换行，多的可能达到10几20行的。需要的效果思路：分页采用 <div style="page-break-after:always"></div> 一、整理思路 1.不同的分页中都要有...

window.print() 打印只有一张及分页问题

qq_47690349的博客

07-09

601

window.print, vue-easy-print, 打印只有一张，打印分页

window.print 自动分页

08-09

在使用`window.print`进行浏览器打印时，分页是由浏览器自动处理的，而不是由JavaScript代码控制。浏览器会根据内容和打印设置自动决定如何分页。然而，你可以通过调整页面的样式和布局来影响分页的结果。以下是一些可能有助于改善分页的技巧： 1. 控制页面大小和边距：使用CSS的`@page`规则可以控制页面的大小和边距，以便更好地适应打印纸张。例如： ```css @page { size: A4; margin: 1cm; } ``` 2. 避免强制分页：某些CSS属性（如`page-break-before`、`page-break-after`、`page-break-inside`等）可以用来控制元素的分页行为。避免在关键位置使用这些属性，以免导致不必要的分页。 3. 调整内容布局：通过调整元素的宽度、高度、间距等，可以尽量避免在不合适的位置发生分页。确保文本和图片能够在合适的位置避免出现截断或分割的情况。 4. 使用分栏布局：如果你希例如： ```css @media print { .content { column-count: 2;