h5打印时如何控制打印区域（基于jquery.PrintArea.js实现）

最新推荐文章于 2022-10-12 13:14:22 发布

原创最新推荐文章于 2022-10-12 13:14:22 发布 · 2.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #jquery #javascript #css #css3

h5打印时如何控制打印区域（基于jquery.PrintArea.js实现）

javaSript 的 window.print() 打印时打印范围不可控制，而jquery.PrintArea.js可以实现打印范围的控制。

1.下载jquery.PrintArea.js
jquery.PrintArea.js下载地址：点击下载
2.引入jq ，引入jquery.PrintArea.js（注意顺序问题）

<script language="javascript" src="jquery-1.7.1.min.js"></script> 
<script type="text/javascript" src="jquery.PrintArea.js"></script>

3.link引入css样式 (css样式不要写在style中,不然打印预览的时候样式不生效，具体啥原因还未研究，link标签引入样式样式才会生效。)
4.html部分：

<div id="printShow">
    
  //要打印的区域
 
</div>

<input type="button" id="printBtn"/>

5.js

$("#printBtn").click(function(){ 
        $(".printShow").printArea(); 
});

后期补充：

最近遇到好多打印页面，打印样式上调了好久，好多属性都是网上查找的，没记住，在此算是做个简单的笔记吧！
如果不想用上面介绍的jq的那个插件，那直接简单粗暴的用css控制打印的样式吧：

@media print {
	//这里是打印的样式，将不需要打印出来的盒子直接用display:none;隐藏就好了。
}

或者用link引入，后面加 media="print"属性打印样式就用这里面的css控制了。
最近打印碰到的的问题：

table表格打印，一页没放下，内容要到第二页去，不作处理会出现这种情况。

解决办法：

@media print {
	td,tr{ page-break-inside: avoid;}   
	 //用于设置是否在指定元素中插入分页，avoid 避免在元素内部插入分页符。
}

想让特定的某个div在新的一页

<button onclick="printFun()">打印</button>
    <div style="page-break-after:always">我是封面</div>
    <div style="page-break-after:always">我是目录，你不知道我的内容有多长</div>
    <div>我是正文，我需要从一个新页面开始展示</div>
<script>
       function printFun() {
            window.print();
        }
        
    </script>

这样，封面，目录和正文分别在打印预览的下一页了。
page-break-after:always; //设置在表格元素之后始终进行分页的分页行为：
page-break-after:avoid; //避免在元素后插入分页符
page-break-before 和page-break-after一样的用法，元素在指定元素前添加分页符。

菜鸟一枚，现学现记录吧。。。关于打印，看到过一篇不打错的博客，推荐给大家，有兴趣的可以看看
https://www.cnblogs.com/zoucaitou/p/4232388.html