最近需要打印，使用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
}
终端客户供货数量(吨)价格(元/吨)气源地供货时间
宜兴港华-8-9徐州港华-8-9泰州港华-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{}需要覆盖网页显示的样式
如有疑问请关注微信公众号：前端之攻略，我会详细解答，此公众号我也会定期更新前端有关知识
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/225527.html原文链接：https://javaforall.net
