响应式状态时的jqprint打印原

tianyawhl

发布于 2019-04-04 16:56:18

1.5K0

发布于 2019-04-04 16:56:18

最近需要打印，使用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种设置样式的详细例子如下：

<div id="printArea">
    <style type="text/css">
    .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
    }
    </style>
    
    <div class="orderTable">
        <table class="printTab" style="">
            <thead>
                <tr class="">
                    <th>终端客户</th>
                    <th>供货数量（吨）</th>
                    <th>价格（元/吨）</th>
                    <th>气源地</th>
                    <th>供货时间</th>
                </tr>
            </thead>
            <tbody>
                <tr class="">
                    <td>宜兴港华</td>
                    <td>500</td>
                    <td>4000</td>
                    <td></td>
                    <td>2018-8-9</td>
                </tr>
                <tr class="">
                    <td>徐州港华</td>
                    <td>500</td>
                    <td>4000</td>
                    <td></td>
                    <td>2018-8-9</td>
                </tr>
                <tr class="">
                    <td>泰州港华</td>
                    <td>500</td>
                    <td>4000</td>
                    <td></td>
                    <td>2018-8-9</td>
                </tr>
            </tbody>
        </table>
    </div>

或者

@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{}需要覆盖网页显示的样式

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2016/03/24 ，如有侵权请联系 cloudcommunity@tencent.com 删除

css

bootstrap

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

css

bootstrap

登录后参与评论

0 条评论

热度