window.print()及动态创建数据并分页打印

最新推荐文章于 2024-05-08 14:12:05 发布
最新推荐文章于 2024-05-08 14:12:05 发布
阅读量1.7k 收藏 3
点赞数
分类专栏： 打印 文章标签： window.print()分页打印 打印
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41670104/article/details/83379322
版权
window.print()及动态创建数据并分页打印第一次写博客，只是想要分享以及记录；做得不到的请大牛们多多指点，不喜勿喷。这是一个双层循环来创建分页打印web页面的功能，比较容易看懂，直接上代码。HTML<body> <!--startprint1--> <div id="box"></div> &lt...
摘要由CSDN通过智能技术生成

window.print()及动态创建数据并分页打印

第一次写博客，只是想要分享以及记录；做得不到的请大牛们多多指点，不喜勿喷。
这是一个双层循环来创建分页打印web页面的功能，比较容易看懂，直接上代码。

HTML

<body>
      <!--startprint1-->
         <div id="box"></div>
			<div>打印的部分2</div>
      <!--endprint1-->
         <div>不被打印的部分</div>
         <button type="button" name="button" onclick="preview(1)">打印</button>
</body>

JS
//设置打印区域


function preview(oper){
            if (oper < 10){
               initialHtml=window.document.body.innerHTML;//获取当前页的html代码
               sprnstr="<!--startprint"+oper+"-->";//设置打印开始区域
               eprnstr="<!--endprint"+oper+"-->";//设置打印结束区域
               printHtml=initialH
最低0.47元/天 解锁文章
丶战火中的苏
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
JS实现浏览器打印、打印预览
chelflan's blog
05-10 1万+
JS实现浏览器打印、打印预览 1.JS实现打印的方式方式一：window.print()window.print();会弹出打印对话框，打印的是window.document.body.innerHTML中的内容，下面是从网上摘到的一个局部打印的例子，该例子的不足是打印会修改页面的内容。 <!DOCTYPE html> <htm...
window.print分页打印
04-19
NULL 博文链接：https://ctrain.iteye.com/blog/1864992
window.print()前端实现网页打印功能详解
最新发布
菜鸟教程
05-08 1777
print作为浏览已经比较成熟的技术可以经常被用来打印页面的部分内容，我们可以在MDN上查看到相关的简单介绍。到此这篇关于window.print()前端实现网页打印功能的文章就介绍到这了,更多相关window.print()前端网页打印内容请搜索网赚博客https://www.piaodoo.com/以前的文章或继续浏览下面的相关文章希望大家以后多多支持网赚博客https://www.piaodoo.com/！茂名一技http://www.szsyby.net/
window.print() 动态打印及封装, vue-print-nb
fengguanglu的博客
04-24 831
doPrint() { //判断iframe是否存在，不存在则创建iframe var iframe = document.getElementById('print-iframe'); if (!iframe) { var el = document.getElementById('basicPage'); iframe = document.createElement('IFRAME'); var d...
window.print 页面打印
热门推荐
coding...
06-15 5万+
定义和用法 print() 方法用于打印当前窗口的内容。 语法 window.print(); window.print()  实际上，是浏览器打印功能菜单的一种程序调用。与点击打印功能菜单一样，不能精确分页，不能设置纸型，套打的问题更加无从谈起，只不过，可以让用户不用去点菜单，直接点击网页中的一个按钮，或一个链接里面调用罢了。事实上，很多用户都是采用这种方式打印，但是这种方式最致
window.print()分页
qq_38935512的博客
02-05 698
<div style="page-break-after:always"></div>
jqprint可分页打印页面内容
12-09
解压并研究这些文件可以帮助我们更好地理解和使用jqPrint，实现定制化的分页打印功能。 总结起来，jqPrint是一个强大的工具，能够帮助开发者轻松实现网页内容的分页打印。通过合理的配置和使用，我们可以创建出符合...
打印自动分页.zip
06-21
例如，我们可以创建针对打印的CSS规则，通过`@media print`来控制打印时的样式，包括页面分页。 ```css @media print { /* 在这里定义打印样式，如分页控制 */ } ``` 接下来，我们讨论JS如何参与分页。JavaScript...
css之分页打印的示例代码
09-24
在实际项目中，当需要批量打印个人信息或其他复杂内容时，可能需要动态生成HTML并将其添加到一个单独的打印容器中，再使用CSS Print属性进行分页控制。此外，还需要考虑不同浏览器的兼容性，以及打印机的设置可能对...
一种Windows系统下连续不分页打印的方法
11-01
- 使用自定义纸张H及表头内容绘制表单并打印。 - 使用自定义纸张N及表体内容，逐页绘制表单并打印。 - 对于最后一页，使用Windows API自定义一份纸张，纸张长度按照计算出的尾页长度，先绘制表体剩余行内容，再...
layui的表格table选中数据后可打印本行数据
10-26
为了实现打印功能，可以利用HTML5的`window.print()`函数，但我们需要先创建一个临时的打印页面，只包含选中的行数据。这可以通过创建一个新的`<iframe>`，将数据插入其中，然后调用`print`方法实现： ```...
window.print() 分页
sundayluo的博客
12-03 244
打印 .Noprint{display:none;} .PageNext{page-break-after: always;} function printit(){ //将部分隐藏不打印 document.getElementById("no").style.display = "none"; window....
详解window.print()，实现长列表打印分页
chenlim87的博客
09-22 4141
其实我们只要控制打印的行数就可以了。我们需要知道打印元素的高度和表格行的高度，算出一页纸可以打印多少行，超出的部分放到下一页打印。4、-webkit-print-color-adjust：是一个在浏览器中强制打印背景颜色和字体颜色的css属性，当打印出来的某些元素的背景颜色没有被显示时，可以使用。我们页面的样式和打印页面时的样式是两个不同的样式，打印时会默认携带页面的样式，同时呢我们也可以修改页面打印时的样式。1、先获取指定容器中的内容，将body的内容替换掉，调用了打印方法后，再把原来的body恢复。
window.print() 实现分页打印
fmwind的专栏
03-27 9957
window.print() 实现分页打印主要通过样式来控制，样式如下： style="page-break-after:always" 如果打印两页只需要给第一页加上该样式即可，不需要给第二页加上，否则第二页在打印时会多走一张空白纸，具体代码如下： <div class="container a4-endwise" id="page1" style="page-break-aft...
window.print实现分页打印功能
LZW891967934的专栏
02-12 6558
1.  在要分页的那一条数据所属的 DOM 元素上增加样式：page-break-after: always 或 page-break-before: always，一个在这条数据前分页，一个在这条数据后分页。        2. //打印方法 function preview() {    bdhtml = window.document.body.innerHTML;    sprns
web使用window.print()实现分页批量打印。
weixin_41488294的博客
08-15 1万+
写了有关于web客户端打印物料条码的功能。想着以后可能会用到，就把他给写下来了。 主要参考了：https://blog.csdn.net/ww130929/article/details/71977187 https://www.jb51.net/article/117782.htm   功能描述： 打印可以给工厂使用的标签，用来扫描物料条码。里面除了包括物料信息（数量，编码，生产订...
window.print()方法设置分页
尘封的落叶的博客
11-15 2031
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <meta http-equiv="Content-Type" content="text/html...
window.print()打印表格并且分页时动态添加表头
weixin_54362826的博客
10-03 1582
方法一：获取当前表格内容高度，达到某一值后分页（失败） 通过 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 自动分页
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;
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值