HTML打印方法总结
来源:互联网 发布:淘宝店运营计划书 编辑:程序博客网 时间:2024/04/30 08:24
如何打印网页置顶部分内容
方法一
var html;//可以使用模版引擎进行渲染//如html = template.render("today-task-list-print-template",data); //或使用Jquery或原生Js选取想要打印的部分//如html = $("#print-content").html();var newWin = window.open('', '_self', ''); //在当前页打开新的窗口newWin.document.write("<head><style>#print-content{font-size:14px}</style></head>"); //向新窗口添加css样式newWin.document.write(html);newWin.print();newWin.location.reload(); //重新加载使窗口恢复到打印前状态
优缺点:
- 不会产生新的标签页或弹出窗口
- reload时,页面会重新刷新,用户之前对页面的操作会被重置
方法二
var html;//do something to htmlvar newWin = window.open('', '', '');newWin.document.write("<head><style>#print-content{font-size:14px}</style></head>");newWin.document.write(html);newWin.print();newWin.close(); //关闭新产生的标签页
优缺点
- 会产生一个新的标签页,当用户在未选择打印或取消时直接关闭标签页会导致原页面无法刷新
- 当用户完成打印操作后,新页面关闭,回到打印前页面,不会有页面加载时间的等待。
方法三
@media print { .no-print{display:none;}}
使用css的媒体查询功能@media。将不需要的在打印页面中显示的隐藏,达到打印指定区域的效果。
优缺点
- 不需要额外的JS代码
- 当需要隐藏的部分较多时,比较繁琐。
打印中常用的css
- 设置打印纸张大小和边距
@page { margin: 14mm 18mm 10mm; size: 20.1cm 29.7cm;//也可以直接写国际标准尺寸 size: A4;}
- 防止元素被纸张割裂
page-break-inside: avoid;
- 保持元素在页面最顶端
page-break-before: always;
FAQ
Q: 对于使用bootstrap的页面,打印时为什么部分样式无法正常显示或变为了较为朴素的样式?
A:bootstrap中默认设置了针对打印的样式。对于bootstrap 3来说,可以到官网定制板块,将Print media styles
取消,得到定制的bootstrap文件。当需要改动的地方较少时,也可以直接在自己的css文件中添加print样式,以覆盖默认样式。
Q:待添加。。
0 0
- HTML打印方法总结
- 总结JS打印方法
- 总结JS打印方法
- JS打印方法总结
- 总结JS打印方法
- 总结JS打印方法
- 堆栈打印方法总结
- 总结JS打印方法
- HTML布局方法总结
- HTML 打印
- html 打印
- 关于web打印的一些方法总结
- 对JS的打印方法总结
- html或jsp实现打印三种方法
- HTML中获取对象的方法总结
- jquery+js+html常用方法总结
- jquery text(),val(),html()方法区别总结
- HTML插入CSS样式表方法总结
- 内存屏障
- Runtime实践
- #28 – DispatcherObject
- 我的编程笔记-asp.net批量上传图片
- 对红黑树的理解【增加节点篇】
- HTML打印方法总结
- c#的委托(2)之调用实例化方法
- HTTP协议头及错误码详解
- 001-终端操作OC代码
- numpy数据类型
- 霍夫曼编码
- Android中Glide(加载图片)的使用
- mysql自身运行日志文件详解
- Git学习笔记整理