前端实现打印，怎么可以让隐藏的多个表格打印在同一张纸上?

Question

我的页面有很多表格，每点一个只显示一个表格，其他表格隐藏。但是打印的时候，不管表格是否显示还是隐藏的，需要把所有表格都打印在一张纸上。我现在用的printArea.js这个插件，用@media来控制打印的样式，class="print_show"的表格都显示。但是还是只能打印出来第一个class="print_show"所对应的表格。
/2017.8.5新加/
改了一下午，又改回来这个最初的版本，又可以打印所有的表了，不管隐藏不隐藏，但是我把class加到外面的DIV上，希望应用表格样式。结果样式是有了，但是隐藏的表又不能打印出来了。。什么情况。。已疯

图片(点击左边的框来显示表格，隐藏其余表格):

HTML（我给每个table都加了class="print_show"）：

                <div id="table">
                    <!--个人月度绩效工资汇总-->
                    <div id="summary_table">
                        <div class="time">
                            年份:<select id="year1" name="year1"></select>&nbsp;
                            月份:<select id="month1" name="month1"></select>
                            <input type="button" id="summary_search" value="查询" />
                        </div>
                        <table style="width: 978px; display: block;" class="print_show">
                            <tr>
                                <th colspan="9" style="width: 978px;">个人绩效工资汇总</th>
                            </tr>
                            <tr>
                                <td class="th2">年月</td>
                                <td class="th2" width="120px">检验台量绩效+临时工作绩效</td>
                                <td class="th2">见习绩效</td>
                                <td class="th2">月度考核得分比</td>
                                <td class="th2">民主测评得分比</td>
                                <td class="th2">岗位职级系数</td>
                                <td class="th2">其他工作绩效</td>
                                <td class="th2">专项成果绩效</td>
                                <td class="th2" width="110px">个人月度绩效工资（元）</td>
                            </tr>
                            <tr>
                                <td>201705</td>
                                <td>2200.00</td>
                                <td>0.00</td>
                                <td></td>
                                <td>1.019</td>
                                <td>1</td>
                                <td>0.00</td>
                                <td>0</td>
                                <td>0.00</td>
                            </tr>
                        </table>
                    </div>
                    
                    <!--个人月度绩效工资汇总结束-->
                    
                    <!--检验台量绩效工资开始-->
                        <div id="workload_table">
                            <div class="time">
                                年份:<select id="year2" name="year2"></select>&nbsp;
                                月份:<select id="month2" name="month2"></select>
                                <input type="button" id="workload_search" value="查询" />
                               </div>
                            <table style="display: block;" class="print_show">
                                <tr>
                                    <th colspan="5">1、检验台量绩效工资 </th>
                                </tr>
                                <tr style="width: 978px;">
                                    <th class="th2" style="width: 112px;">序号</th>
                                    <th class="th2" style="width: 431px;">项目</th>
                                    <th class="th2" style="width: 130px;">台量</th>
                                    <th class="th2" style="width: 113px;">单价</th>
                                    <th class="th2" style="width: 187px;">金额</th>
                                </tr>
                                <tr>                                                       
                                    <td>1</td>
                                    <td></td>
                                    <td class="workload_Number">50.00</td>
                                    <td class="workload_Price">44.00</td>
                                    <td class="workload_Money">2200</td>
                                </tr>
                                <tr>
                                    <th colspan="4">检验台量绩效工资合计</th>
                                    <th id="checkOutNumberSumMoney">2200.00</th>
                                </tr>
                                <tr>
                                    <td colspan="5" class="an">注：台量核算以报告签发日期为统计节点。</td>
                                </tr>
                            </table>
                        </div>
                        
                        <!--检验台量绩效工资结束-->

css:

@media print{
    .print_show{
        display: block;
    }
}

JS:

    $("#print").click(function(){  
            $(".print_show").printArea();
    });

打印出来的样子（只显示第一个加了class="print_show"的table）：

Answer 1

最近也在用这个插件，源码只有一百多行，你可以自行研究一下，这个插件的原理是将你需要的内容HTML提取出来新建一个iframe隐藏窗口，调用iframe的print方法，正确的解决方案是在head标签里面加一个额外的打印样式<link href="css/print.css media="print">重点在于给link设置media属性，然后就可以在print.css里面设定你想要的打印效果。

Answer 2

好的办法是为打印单独做一个页面，不折腾。
一个页面中要做的话，那你普通样式要作媒体区分， @media screen 之类的。
更好的办法，是让后台生成 PDF。

Answer 3

您好，请问楼主问题解决了吗 我遇到了同样的问题，怎么打印多个table，可以给下源码不