最近需要打印,使用jqprint 进行打印,页面状态是电脑平板都能正常显示的响应式页面,打印时由于要打印在一个A4纸上,需要定义打印的宽度,并且点击打印的同时,需要修改页面的样式
从而保证页面内容打印在A4纸张的范围内(点击打印前是响应式的,打印时是固定的宽度),主要代码如下:
$("#printArea").css("width","295mm");
$(".row .col-md-6").removeClass("col-md-6").addClass("col-xs-6");
//Bootstrap栅格系统从原来中屏幕为2列,小于中屏幕为1列,点击打印时都为2列
$("#printArea").jqprint();
如果设置特定的位置分页,需要加下面的代码
假如要打印的页面中含有表格,我的是bootstrap框架的表格,打印预览时表格边框比较细,原因估计是bootstrap样式@media print {}设置的边框比较淡,我们可以不用bootstrap的样式,在打印区域中设置样式,或者在单独的css文件中定义样式,2种设置样式的详细例子如下:
.printTab {
width: 100%;
font-size: 22px;
border: 1px solid #333
}
.printTab>thead>tr>th,
.printTab>tbody>tr>th,
.printTab>thead>tr>td,
.printTab>tbody>tr>td {
border: 1px solid #333;
padding: 8px
}
终端客户供货数量(吨)价格(元/吨)气源地供货时间
宜兴港华5004000-8-9徐州港华5004000-8-9泰州港华5004000-8-9
或者
@media print {
.printTab{width:100%;font-size:22px;border:1px solid #333}
.printTab>thead>tr>th, .printTab>tbody>tr>th, .printTab>thead>tr>td, .printTab>tbody>tr>td{border: 1px solid #333;padding:8px}
}
注意:需要打印的css一定要外链形式,必要的时候加!important;往往@media print{}需要覆盖网页显示的样式
如有疑问请关注微信公众号:**前端之攻略,**我会详细解答,此公众号我也会定期更新前端有关知识