h5打印时如何控制打印区域(基于jquery.PrintArea.js实现) |
您所在的位置:网站首页 › js设置打印参数格式在哪找出来 › h5打印时如何控制打印区域(基于jquery.PrintArea.js实现) |
h5打印时如何控制打印区域(基于jquery.PrintArea.js实现)
javaSript 的 window.print() 打印时打印范围不可控制,而jquery.PrintArea.js可以实现打印范围的控制。
1.下载jquery.PrintArea.js jquery.PrintArea.js下载地址:点击下载 2.引入jq ,引入jquery.PrintArea.js(注意顺序问题) 3.link引入css样式 (css样式不要写在style中,不然打印预览的时候样式不生效,具体啥原因还未研究,link标签引入样式样式才会生效。) 4.html部分: //要打印的区域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在新的一页 打印 我是封面 我是目录,你不知道我的内容有多长 我是正文,我需要从一个新页面开始展示 function printFun() { window.print(); }这样,封面,目录和正文分别在打印预览的下一页了。 page-break-after:always; //设置在表格元素之后始终进行分页的分页行为: page-break-after:avoid; //避免在元素后插入分页符 page-break-before 和page-break-after一样的用法, 元素在指定元素前添加分页符。 菜鸟一枚,现学现记录吧。。。关于打印,看到过一篇不打错的博客,推荐给大家,有兴趣的可以看看 https://www.cnblogs.com/zoucaitou/p/4232388.html |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |