网页pdf打印——window.print()

浏览器内核是提供了打印功能的，只要在控制台调用window.print()方法就可以将网页打印成pdf文件到我们选择的路径，但是打印的内容和格式可能不是我们想要的。所以写这篇博客介绍一种通用的方法：

下面是整个demo的代码：

<html>
<head><script src="./js/jquery-1.7.2.min.js"></script>
</head>
<script>//页面打开时就初始化第一页$(function (){$("body").append("<div class='page'; style='page-break-after:always; background-color:red; width:700px'></div>");      });//打开新页面的方法，在body中插入新的div，并且设置属性 page-break-after:alwaysfunction newPage(){$("body").append("<br><div class='page'; style='page-break-after:always; background-color:red; width:700px'></div>"); }//向页面中插入内容，如果页面高度大于200，就换新的一页function insert(){if( $(".page:last").outerHeight()>200){newPage()}else{$(".page:last").append("<p>ertyuiopgehrtasbsdfghsfadhfdjadsfgh</p>");}}//点击打印时，替换innerHTML内容并调用浏览器打印方法function printPage(){$("body").append("<!--endprint-->");//打印之前添加结尾标志bdhtml=window.document.body.innerHTML;  //获取到页面htmlsprnstr="<!--startprint-->";eprnstr="<!--endprint-->"; //找到两个标签prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17);prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr)); //切除标签以外的东西window.document.body.innerHTML=prnhtml;window.print();window.document.body.innerHTML=bdhtml;//将页面重新改回原始样式window.location.href=window.location.href; //此处是业务需要 由于有动态生成数据 直接返回样式会乱 所以手动刷新了一下}</script>
<body>
<input type="button" onclick="printPage()" value="打印"/>
<input type="button" onclick="insert()" value="插入"/>
<input type="button" onclick="newPage()" value="下一页"/><!--startprint--></body>
</html>

这里有几个比较重要的地方

page-break-after:always
window.print();
sprnstr=”“;
eprnstr="“;

1、page-break-after:always

如果只是单纯调用window.print();这个方法的话，浏览器会把整个网页拿下来，从上到下渲染到pdf上面，如果一页不够会主动再起一页。page-break-after:always这个属性的作用就是告诉浏览器，看到这个属性的标签后请直接给我再起一页，不管上一页有没有排满。这个属性有利于我们控制自己的页面的样式。
所以我们每一页的开始应该要加上这个属性，这样就能按照我们的意愿去分页了

2、window.print();

这个是核心方法，没什么好说的。调用它就会将浏览器中innerHTML中的内容打印。

3、sprnstr=”``“; eprnstr=`"`“;

这两个是我们人为设置的节点，这两个节点之间就是点击打印按钮后要打印的内容，其他部分会被忽略。相当于是将网页中我们不需要打印的地方截取掉了。比如我这个deno中的按钮就是我不需要的。我将它放在这两个标签外面就可以了。具体实现方式如下：

            bdhtml=window.document.body.innerHTML;  //获取到页面htmlsprnstr="<!--startprint-->";eprnstr="<!--endprint-->"; //找到两个标签prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17);prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr)); //切除标签以外的东西window.document.body.innerHTML=prnhtml;

网页pdf打印——window.print()相关推荐

关于页面打印window.print()的样式问题
当我们打印网页的时候.有时候会发现.打印出来的.跟网页上看到的样式的差别有点大.这其中可能有的问题是.样式问题. 当调用打印(window.print())方法时.打印机会在网页的样式中查找 @med ...
web打印window.print
这几天一直在研究通过web程序打印条形码到标签上,由于打印机和显示器不同,碰到了各种坑,现一一列出来,给各位参考. web打印有很多的方式,比如生成pdf打印.JQuery插件.window.prin ...
js打印window.print()图片打印
1. 这里用的是A4纸,设置打印表格属性(width:100%,height:980px) 2.由于打印可能存在多页,所以heightt属性必须严格控制. 3.由于自己是先隐藏不需要打印的DIV,然后 ...
js使用页面打印window.print() 记录，并进行缩放打印
//打印print:function(){//获取打印的页面内容let subOutputRankPrint = document.getElementById('print-div');let ne ...
html打印页面设置缩放,js使用页面打印window.print() 记录，并进行缩放打印
//打印 print:function(){ //获取打印的页面内容 let subOutputRankPrint = document.getElementById('print-div'); le ...
Microsoft Edge (92.0.902.55 ) 打印(window.print) 卡死/无响应
版本号: 92.0.902.55 ,如下图所示.(2021.07.28) 今天调试项目的时候发现一调用打印接口,浏览器就卡死,我还以为我代码又出啥问题了-,结果是浏览器的bug 不过微软嘛,懂得都懂 ...
vue实现打印预览pdf（window.open）
打开接口地址,这个方法是后端已经写好打印window.print(); 前端就只需要打开这个网页地址即可,类型需要是html window.open(res.request.responseURL,& ...
Jquery生成条形码到网页以及打印条形码
背景最新一个项目上涉及到生成条形码,并打印出来,个人经常写java,但是用后端去处理这个反而挺麻烦的.使用js是比较方便的,这里就简单地介绍一下. 在网上查了很多关于生成条形码的内容,就属JsBar ...
window.print() 前端页面打印与预览PDF
window.print()打印是浏览器自带的打印,实现原理是将html转换为pdf可以在线预览打印或者导出pdf,在任何网页上可通过Ctil+p快捷键调出浏览器打印程序,它可将整个网页打印出来,在我 ...

网页pdf打印——window.print()

1、page-break-after:always

2、window.print();

3、sprnstr=”``“; eprnstr=`"`“;

网页pdf打印——window.print()相关推荐

最新文章

热门文章

网页pdf打印——window.print()

1、page-break-after:always

2、window.print();

3、sprnstr=”“; eprnstr="“;

网页pdf打印——window.print()相关推荐

最新文章

热门文章

3、sprnstr=”``“; eprnstr=`"`“;