当打印页面从顶部html给出div边距

时间:2018-01-30 12:25:30

标签: javascript jquery html css printing

我有html页面,div为head,并且该div的css位置是固定的 现在,当我打印多页时,潜水与身体内联,只是第一页给出填充 这是它的图像 enter image description here

在第二页中显示如下 enter image description here

现在我需要代码让表总是在div头之后 这是我的代码

    <!DOCTYPE html>
<html dir='rtl'>
<head>
<title>Print sample</title>
</head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
/*** Print sample ***/

/* defaults  for screen */
#print-head,
#print-foot {
    display: none;
}

/* print only */
@media print {



#print-head {
    display: block;
    position: fixed;
    top: 0pt;
    left:0pt;
    right: 0pt;
    text-align: center;
}

#print-foot,.head {
   display: block;


}

#print-foot:after {
    content: counter(page) "من " counter(page);
    counter-increment: page;
}
</style>
<body>
<div id="print-head">
    <span style='margin-right:50px;' class='pull-right thead'>شركة مصطفى الشرباتي وشركاه</span>
    <span style='margin-left:50px;' class='pull-left'>شركة مصطفى الشرباتي وشركاه</span>
    <br />
    <br />
    <span class='pull-right'><small> التاريخ 3-1-2018</small></span>
    <span  class='pull-left'>
        <small>
            <div id="print-foot">صحفة: </div>
        </small>
    </span>
    <br />
    <u>كشف الذمم العامة بالمجاميع</u>
    <u>اسم المنطقة {{$city->city_name}} رمز المنطقة {{$city->id}}</u>
    <br />
    <br />
    <span>من تاريخ {{$request->fromDate}} الى تاريخ {{$request->toDate}}</span>
</div>
<table style='margin-top:135px;' border='1'class='table head table-responsive'>
<thead>
    <tr>
        <td>اسم العميل</td>
        <td>رقم العميل</td>
        <td>الرصيد المدور</td>
        <td>مدين</td>
        <td>دائن</td>
        <td>الرصيد</td> 
    </tr>   
</thead>
<tbody>
    @php $total = 0;$first_total = 0; $debt_total= 0; $total_re =0 ;@endphp
    @foreach($customers as $customer)
        <tr>
            <td>{{$customer->customer_name}}</td>
            <td>{{$customer->id}}</td>
            <td>
                {{round($customer->getVouchers->where('voucher_date','<',$request->fromDate)->sum('voucher_amount'),3)}}
                @php $first_total+=  $customer->getVouchers->where('voucher_date','<',$request->fromDate)->sum('voucher_amount')@endphp
            </td>
            <td>
                {{
                    round($customer->getVouchers()->
                    where('voucher_amount','>',0)->
                    whereBetween('voucher_date',[$request->fromDate,$request->toDate])->
                    sum('voucher_amount'),3)
                }}
                @php $debt_total += $customer->getVouchers()->
                    where('voucher_amount','>',0)->
                    whereBetween('voucher_date',[$request->fromDate,$request->toDate])->
                    sum('voucher_amount') @endphp
            </td>
            <td>
                {{
                    round($customer->getVouchers()->
                    where('voucher_amount','<',0)->
                    whereBetween('voucher_date',[$request->fromDate,$request->toDate])->
                    sum('voucher_amount'),3) * -1
                }}
                @php $total_re += $customer->getVouchers()->
                    where('voucher_amount','<',0)->
                    whereBetween('voucher_date',[$request->fromDate,$request->toDate])->
                    sum('voucher_amount') @endphp
            </td>
            <td>
                @if($customer->getVouchers->where('voucher_date','<=',$request->toDate)->sum('voucher_amount') > 0)
                    {{round($customer->getVouchers->where('voucher_date','<=',$request->toDate)->sum('voucher_amount'),3)}} م
                    @php $total+= round($customer->getVouchers->where('voucher_date','<=',$request->toDate)->sum('voucher_amount'),3) @endphp
                @elseif($customer->getVouchers->where('voucher_date','<=',$request->toDate)->sum('voucher_amount') < 0)
                    {{round($customer->getVouchers->where('voucher_date','<=',$request->toDate)->sum('voucher_amount'),3) * -1}} د
                    @php $total+= round($customer->getVouchers->where('voucher_date','<=',$request->toDate)->sum('voucher_amount'),3) @endphp
                @elseif($customer->getVouchers->where('voucher_date','<=',$request->toDate)->sum('voucher_amount') == 0)
                    0 د
                @endif
            </td>
        </tr>
    @endforeach
    <tr>
        <td colspan='2'>المجموع</td>
        <td>{{round($first_total,3)}} م</td>
        <td>{{round($debt_total,3)}} م</td>
        <td>{{round($total_re,3) * -1}} د</td>
        <td>
            @if($total > 0)
                {{round($total,3)}} م
            @else
                {{round($total,3) * - 1}} د
            @endif
        </td>
    </tr>
</tbody>
</table>


</body>
</html>

非常感谢

1 个答案:

答案 0 :(得分:1)

相对于#print-head添加位置将起作用,

/ *仅打印* /

@media print {
    #print-head {
        position: relative;
    }
}