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

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

下面是整个demo的代码:

<html>
<head>
            <script src="./js/jquery-1.7.2.min.js">script>
head>
<script>
      //页面打开时就初始化第一页
      $(function (){
            $("body").append("
"
); }); //打开新页面的方法,在body中插入新的div,并且设置属性 page-break-after:always function newPage(){ $("body").append("
"
); } //向页面中插入内容,如果页面高度大于200,就换新的一页 function insert(){ if( $(".page:last").outerHeight()>200){ newPage() }else{ $(".page:last").append("

ertyuiopgehrtasbsdfghsfadhfdjadsfgh

"
); } } //点击打印时,替换innerHTML内容并调用浏览器打印方法 function printPage(){ $("body").append("");//打印之前添加结尾标志 bdhtml=window.document.body.innerHTML; //获取到页面html sprnstr=""; eprnstr=""; //找到两个标签 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="下一页"/> body> html>

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

  1. page-break-after:always
  2. window.print();
  3. 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;  //获取到页面html
            sprnstr="";
            eprnstr=""; //找到两个标签
            prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17);
            prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr)); //切除标签以外的东西
            window.document.body.innerHTML=prnhtml;

你可能感兴趣的:(pdf打印,分页)