Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/css/35.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Html CSS-在后续页面上剪切_Html_Css_Laravel - Fatal编程技术网

Html CSS-在后续页面上剪切

Html CSS-在后续页面上剪切,html,css,laravel,Html,Css,Laravel,大家好, 打印时出现pg2+上的AD被切断的问题。 我已经尝试了一切,但它仍然“切割”。 添加一个@page{margin top:16cm;}只会让它开始一半,但仍然被剪切。 我添加了一张打印预览的图像来显示正在发生的事情(机密信息已经模糊了) CSS代码: /* Reports */ .kt-reports{ border-top-left-radius:4px; border-top-right-radius:4px } .kt-reports .kt-reports__c

大家好, 打印时出现pg2+上的AD被切断的问题。 我已经尝试了一切,但它仍然“切割”。 添加一个@page{margin top:16cm;}只会让它开始一半,但仍然被剪切。 我添加了一张打印预览的图像来显示正在发生的事情(机密信息已经模糊了)

CSS代码:

/* Reports */
.kt-reports{
    border-top-left-radius:4px;
    border-top-right-radius:4px
}
.kt-reports .kt-reports__container{
    width:100%;
    margin:0;
    padding:0 30px
}
.kt-reports .kt-reports__head{
    border-top-left-radius:4px;
    border-top-right-radius:4px;
    background-size:cover;
    background-repeat:no-repeat;
    padding:80px 0 20px 0;
}
.kt-reports .kt-reports__head .kt-reports__container{
    border-top-left-radius:4px;
    border-top-right-radius:4px
}
.kt-reports .kt-reports__head .kt-reports__brand{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:justify;
    -ms-flex-pack:justify;
    justify-content:space-between;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap
}
.kt-reports .kt-reports__head .kt-reports__brand .kt-reports__title{
    font-weight:700;
    font-size:2.0rem;
    margin-right:10px;
    margin-top:5px;
    color:#595d6e;
    vertical-align:top;
}
.kt-reports .kt-reports__head .kt-reports__brand .kt-reports__logo{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -ms-flex-direction:column;
    flex-direction:column;
    margin-top:5px;
    text-align:right
}
.kt-reports .kt-reports__head .kt-reports__brand .kt-reports__logo img{
    margin-left: auto;
    height:64px;
}
.kt-reports .kt-reports__head .kt-reports__brand .kt-reports__logo .kt-reports__desc{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -ms-flex-direction:column;
    flex-direction:column;
    text-align:right;
    font-weight:400;
    padding:1rem 0 1rem 0;
    color:#74788d
}
.kt-reports .kt-reports__head .kt-reports__items{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
    margin-top:50px;
    width:100%;
    border-top:1px solid #ebedf2
}
.kt-reports .kt-reports__head .kt-reports__items .kt-reports__item{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -ms-flex-direction:column;
    flex-direction:column;
    -webkit-box-flex:1;
    -ms-flex:1;
    flex:1;
    color:#595d6e;
    margin-right:10px;
    margin-top:20px
}
.kt-reports .kt-reports__head .kt-reports__items .kt-reports__item:last-child{
    margin-right:0
}
.kt-reports .generated_date {
    font-size:11px;
    text-align:right;
}
.kt-reports .generated_date .subtitle {
    font-weight:500;
}
.kt-reports .kt-reports__head .kt-reports__items .kt-reports__item .kt-reports__subtitle{
    font-weight:500;
    padding-bottom:.5rem
}
.kt-reports .kt-reports__head .kt-reports__items .kt-reports__item .kt-reports__text{
    font-weight:400;
    color:#74788d
}
.kt-reports .kt-reports__body{
    padding:3rem 0
}
.kt-reports .kt-reports__body table{
    background-color:transparent
}
.kt-reports .kt-reports__body table thead tr th{
    background-color:transparent;
    padding:1rem 9px .5rem 9px;
    color:#74788d;
/*
    border-top:0;
    border-bottom:1px solid #ebedf2;
 */
    border:2px solid #595d6e;
    font-weight:700;
    font-size:13px;
    vertical-align: middle;
}
/*.kt-reports .kt-reports__body table thead tr th:not(:first-child){
    text-align:right
}
 */
.kt-reports .kt-reports__body table tr.totals_footer td:first-child {text-align:right !important;}
.kt-reports .kt-reports__body table tr.totals_footer td{
    text-align:right;
    padding: 1rem 9px 1rem 9px;
    font-weight:700;
}
.kt-reports .kt-reports__body .table .lrg, .kt-reports .kt-reports__body .subtable .lrg {
    width:60%;
}
.kt-reports .kt-reports__body .table .med, .kt-reports .kt-reports__body .subtable .med {
    width:40%;
}
.kt-reports .kt-reports__body .table .p30, .kt-reports .kt-reports__body .subtable .p30 {
    width:30%;
}
.kt-reports .kt-reports__body .table .sml, .kt-reports .kt-reports__body .subtable .sml {
    width:20%;
}
.kt-reports .kt-reports__body .table .vsml, .kt-reports .kt-reports__body .subtable .vsml {
    width:10%;
}
.kt-reports .kt-reports__body .table .tny, .kt-reports .kt-reports__body .subtable .tny {
    width:5%;
}
.kt-reports .kt-reports__body .table .f114, .kt-reports .kt-reports__body .subtable .f114 {
    width:114px;
    text-align:center;
}
.kt-reports .kt-reports__body .table .f50, .kt-reports .kt-reports__body .subtable .f50 {
    width:50px;
    text-align:center;
}
.kt-reports .kt-reports__body table tbody tr td{
    background-color:transparent;
    padding:1rem 9px 1rem 9px;
    border-top:none;
    font-size:12px;
    color:#595d6e
}
.kt-reports .kt-reports__body table thead tr td.ctal,
.kt-reports .kt-reports__body table tbody tr td.ctal,
.kt-reports .kt-reports__body table tbody tr td:first-child  {text-align:center;}

.kt-reports .kt-reports__body table.noctal tr td:first-child {text-align:initial;}

.kt-reports .kt-reports__body table thead tr td.rtal,
.kt-reports .kt-reports__body table tbody tr td.rtal {text-align:right !important;}

.kt-reports .kt-reports__body table thead tr td.ltal,
.kt-reports .kt-reports__body table tbody tr td.ltal {text-align:left;}

.kt-reports .subtable {
    width:100%;
}
.kt-reports .kt-reports__body table.subtable tbody tr td:first-child  {text-align:left;}
.kt-reports .kt-reports__body .subtable tbody tr td {
    padding:0px 10px 0px 10px;
}
.kt-reports .kt-reports__body .subtable tbody tr td:last-child {
    padding-right:0px;
}
.kt-reports .kt-reports__body .subtable tbody tr td.f114:last-child {
    width:104px;
    padding-right:0px;
}
.kt-reports .kt-reports__body .subtable tbody tr td:first-child {
    padding-left:0px;
}
.kt-reports .kt-reports__body table tbody tr:nth-child(even) {
    background-color:#f9f9f9;
}
.kt-reports .kt-reports__body table.alt_row_subdata tbody tr td{
    padding:1rem 1px 0.3rem 1px;
}
.kt-reports .kt-reports__body table.alt_row_subdata tbody tr:nth-child(even) td {
    padding:2px;
}
.kt-reports .kt-reports__body table tbody tr:nth-child(odd) {
    background-color:#fff;
}
.kt-reports .kt-reports__body .subtable tbody tr,.kt-reports .kt-reports__body .subtable tbody tr td {
    background-color: transparent !important;
}
/*
.kt-reports .kt-reports__body table tbody tr td:not(:first-child){
    text-align:right
}
*/
/*
.kt-reports .kt-reports__body table tbody tr:first-child td{
    padding-top:1.8rem
}
*/
.kt-reports .kt-reports__body .subtable tbody tr:first-child td{
    padding-top:0rem
}
.kt-reports .kt-reports__footer{
    padding:3rem 0;
    background-color:#f7f8fa
}
.kt-reports .kt-reports__footer .kt-reports__container{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient:horizontal;
    -webkit-box-direction:normal;
    -ms-flex-direction:row;
    flex-direction:row;
    -webkit-box-pack:justify;
    -ms-flex-pack:justify;
    justify-content:space-between;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap
}
.kt-reports .kt-reports__footer .table{
    background-color:transparent;
    padding:0
}
.kt-reports .kt-reports__footer .table th{
    font-size:1.1rem;
    text-transform:capitalize;
    font-weight:500;
    color:#74788d;
    border-top:0;
    border-bottom:1px solid #ebedf2;
    padding:10px 10px 10px 0;
    background-color:transparent
}
.kt-reports .kt-reports__footer .table th:last-child{
    padding-right:0
}
.kt-reports .kt-reports__footer .table td{
    font-size:1.1rem;
    text-transform:capitalize;
    background-color:transparent;
    font-weight:500;
    color:#595d6e;
    padding:10px 10px 10px 0
}
.kt-reports .kt-reports__footer .table td:last-child{
    padding-right:0
}
.kt-reports .kt-reports__actions{
    padding:2rem 0
}
.kt-reports .kt-reports__actions .kt-reports__container{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient:horizontal;
    -webkit-box-direction:normal;
    -ms-flex-direction:row;
    flex-direction:row;
    -webkit-box-pack:justify;
    -ms-flex-pack:justify;
    justify-content:space-between
}
@media (min-width:1025px){
    .kt-reports .kt-reports__container{
        width:100%;
        margin:0 auto
    }
    .kt-reports .kt-reports__head .kt-reports__brand .kt-reports__title{
        font-weight:700;
        font-size:2rem;
        margin-bottom:30px;
        max-width:540px;
    }
}
@media (max-width:1024px) {
    .kt-reports .kt-reports__head .kt-reports__brand .kt-reports__title{
        max-width:340px;
    }
}
@media (max-width:768px){
    .kt-reports .kt-reports__container{
        width:100%;
        margin:0;
        padding:0 20px
    }
    .kt-reports .kt-reports__head{
        padding:20px 0
    }
    .kt-reports .kt-reports__head .kt-reports__brand{
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex;
        -webkit-box-orient:vertical;
        -webkit-box-direction:normal;
        -ms-flex-direction:column;
        flex-direction:column
    }
    .kt-reports .kt-reports__head .kt-reports__brand .kt-reports__title{
        font-weight:700;
        font-size:2rem;
        margin-bottom:30px;
        max-width:240px;
    }
    .kt-reports .kt-reports__head .kt-reports__brand .kt-reports__logo{
        text-align:left
    }
    .kt-reports .kt-reports__head .kt-reports__brand .kt-reports__logo img{
        text-align:left
    }
    .kt-reports .kt-reports__head .kt-reports__brand .kt-reports__logo .kt-reports__desc{
        text-align:left
    }
    .kt-reports .kt-reports__head .kt-reports__items{
        margin-top:20px
    }
    .kt-reports .kt-reports__body{
        padding:2rem 0
    }
    .kt-reports .kt-reports__footer{
        padding:2rem 0
    }
}
@media print{
/*    @page {size: landscape} */
    .kt-reports{
        border-top-left-radius:0;
        border-top-right-radius:0
    }
    .kt-reports .kt-reports__head{
        padding:45px 0 20px 0;
        border-top-left-radius:0;
        border-top-right-radius:0
    }
    .kt-reports .kt-reports__head .kt-reports__brand .kt-reports__title{
        max-width:340px;
    }
    .kt-reports .kt-reports__head .kt-reports__container{
        border-top-left-radius:0;
        border-top-right-radius:0
    }
    .kt-reports .kt-reports__body {
        padding: 1rem 0;
    }
        .kt-reports .kt-reports__actions{
        display:none!important
    }
    .kt-reports .kt-reports__footer{
        background-color:transparent!important
    }
    .kt-reports .kt-reports__container{
        width:100%;
        padding:0 10px
    }
    .kt-header {
        display:none!important;
    }
    .kt_header_mobile {
        display:none!important;
    }
    .kt-subheader {
        display:none!important;
    }
    .kt-footer {
        display:none!important;
    }
    .kt-aside {
        display:none!important;
    }
    .kt-aside__brand-logo, .kt-header-mobile__logo {
        display:none !important;
    }
    .kt-content {
        padding: 0!important;
    }
    #kt_wrapper{
        padding: 0!important;
    }
}
HTML代码(Laravel/Blade):


{{{(报告标题)}
邮政:{{$bursary\u管理员->邮政地址}
物理:{{$bursary\u administrator->Physical\u address}
{{{(“生成的报告”)}:@php-echo-date('Y-m-dh:i:s')@endphp
{{{('Row')}
{{{(学生全名)}
{{{('Course')}
{{{(注册日期)}
{{{(“补贴美元”)}
@php($row\u count=0)
@如果(学生)
@foreach($student作为$student)
@php($row\u count++)
{{$row_count}}
{{$student->getStudentFullNameAttribute()}
@如果($学生->助学金)
@foreach($student->bursary作为$bursary)
@如果($bursary->Enrolment->count()>0)
@foreach($bursary->注册为$incorporation)
@如果($入学->课程->计数()>0)
@foreach($注册->课程为$课程)
{{$course->course}
@endforeach
@否则
@恩迪夫
@endforeach
@恩迪夫
{{$bursary->注册日期}
${{number\格式($bursary->补贴\津贴,2,“.”,“,”)}
@endforeach
@恩迪夫
@endforeach
@恩迪夫
下载报告
打印报告

最后再看一眼,找到了问题的症结所在。 为了将来的参考,发布此答案

发生这种情况的原因是其他一些层不会显示在桌面打印视图上。然而,我在chrome中切换到了带有“打印”渲染的移动/响应视图,并看到它们在较低分辨率下仍然处于活动/可见状态(打印就是这样)。我最初没有注意到这一点,因为我只是在模拟“打印”渲染,而是在全桌面视图中,而不是在低分辨率模式下

将这些图层设置为
显示:无!重要的
在我的css的
@media print
部分下完成了这个技巧

<div class="row">
    <div class="kt-container  kt-container--fluid  kt-grid__item kt-grid__item--fluid">
        <!--begin::Portlet-->
        <div class="kt-portlet" id="report-wrapper">
            <div class="kt-portlet__body kt-portlet__body--fit">
                <div class="kt-reports">
                    <div class="kt-reports__head">
                        <div class="kt-reports__container">
                            <div class="kt-reports__brand">
                                <h1 class="kt-reports__title">{{__($report_title)}}</h1>
                                <div href="#" class="kt-reports__logo">
                                    <img src="/images/setangol.png" alt="Logo" />
                                    <span class="kt-reports__desc">
                                        <span>Postal: {{$bursary_administrator->postal_address}}</span>
                                        <span>Physical: {{$bursary_administrator->physical_address}}</span>
                                    </span>
                                </div>
                            </div>
                            <div class="generated_date">
                                <span><span class="subtitle">{{__('Report Generated')}}:</span> @php echo date('Y-m-d H:i:s'); @endphp</span>
                            </div>
                        </div>
                    </div>
                    <div class="kt-reports__body">
                        <div class="kt-reports__container">
                            <div class="table-responsive">
    <table class="table">
        <thead>
            <tr>
                <th class="f50">{{__('Row')}}</th>
                <th class="med">{{__('Student Full Name')}}</th>
                <th>{{__('Course')}}</th>
                <th class="f114">{{__('Registration Date')}}</th>
                <th class="f114">{{__('Subsidy USD')}}</th>
            </tr>
        </thead>
        <tbody>
        @php($row_count=0)
        @if ($students)
            @foreach ($students as $student)
                @php($row_count++)
            <tr>
                <td>{{$row_count}}</td>
                <td>{{$student->getStudentFullNameAttribute()}}</td>
                <td colspan="3">
                    <table class="subtable">
                        <tbody>
                        @if ($student->bursaries)
                            @foreach ($student->bursaries as $bursary)
                                <tr>
                                @if ($bursary->enrolments->count()>0)
                                    @foreach ($bursary->enrolments as $enrolment)
                                        @if ($enrolment->courses->count()>0)
                                            @foreach ($enrolment->courses as $course)
                                                <td>{{$course->course}}</td>
                                            @endforeach
                                        @else
                                            <td>&nbsp;</td>
                                        @endif
                                    @endforeach
                                @endif
                                    <td class="f114">{{$bursary->registration_date}}</td>
                                    <td class="rtal f114">$ {{number_format($bursary->subsidy_allowance,2,".",",")}}</td>
                                </tr>
                            @endforeach
                        @endif
                        </tbody>
                    </table>
                </td>
            </tr>
            @endforeach
        @endif
        </tbody>
    </table>
                            </div>
                        </div>
                    </div>
                    <div class="kt-reports__actions">
                        <div class="kt-reports__container">
                            <button type="button" class="btn btn-label-brand btn-bold" onclick="pdfprint('#report-wrapper','summary_report');">Download Report</button>
                            <button type="button" class="btn btn-brand btn-bold" onclick="window.print();">Print Report</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--end::Portlet-->
    </div>
</div>