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

最新推荐文章于 2024-06-10 16:43:59 发布

要这头发有何用·

最新推荐文章于 2024-06-10 16:43:59 发布

阅读量6.8k

点赞数

文章标签： pdf打印分页

本文链接：https://blog.csdn.net/weixin_41202187/article/details/82221147

版权

浏览器内核是提供了打印功能的，只要在控制台调用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:always
      function 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;  //获取到页面html
            sprnstr="<!--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;  //获取到页面html
            sprnstr="<!--startprint-->";
            eprnstr="<!--endprint-->"; //找到两个标签
            prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17);
            prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr)); //切除标签以外的东西
            window.document.body.innerHTML=prnhtml;

要这头发有何用·

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
网页pdf打印——window.print()

浏览器内核是提供了打印功能的，只要在控制台调用window.print()方法就可以将网页打印成pdf文件到我们选择的路径，但是打印的内容和格式可能不是我们想要的。所以写这篇博客介绍一种通用的方法：下面是整个demo的代码：&lt;html&gt;&lt;head&gt; &lt;script src="./js/jquery-1.7.2.min.js"&gt...
复制链接

扫一扫