printing - with - responsive bootstrap




طباعة صفحة مع bootstrap 3 (4)

لقد كنت أبحث عن الكثير من الأجوبة هنا حول Stackoverflow التي تغطي نصف ما أتساءل عنه ، ولكني لم أعثر على أي شيء يعمل لي.

أتفهم أن صفحة الطباعة تبلغ حوالي 550 بيكسل لـ A4 ، ومن ثَم سيستخدم bootstrap الأنماط والتخطيط المستخدم عادة للأجهزة المحمولة.

عندما أستخدم Ctrl + P لصفحة الويب الخاصة بي ، تبدو الصفحة القابلة للطباعة تمامًا مثل النسخة المحمولة من صفحتي. ولكن كيف يمكنني جعله يبدو مثل إصدار سطح المكتب؟ (media> 1024 px) هل هناك طريقة للقيام بذلك؟

وأنا أعلم أنني يمكن تغيير المغلق على وجه التحديد للطباعة. ولكن كيف لحل هذا الشيء مع نظام الشبكة bootstrap 3؟ يعتمد العرض على divs على ما أضفته لـ col-xs ، لكنني أرغب في الطباعة لاستخدام التنسيق (العرض) لـ col-md

تحرير: بعد أن كنت تعاني من هذا لساعات أخرى ، أدرك أنه قد يكون أكثر تعقيدًا مما توقعته في البداية. مجرد تغيير العرض لا يحل الأمر بالنسبة لي. كثير من بلدي divs له بناء الجملة

<div class="md-right sm-right xs-down col-md-1 col-sm-2 box"></div>

أو

<div class="col-md-4 col-sm-6 col-xs-12"></div>

تبدو الصفحة جيدة في XS للأجهزة الصغيرة ، ولكن الطباعة في XS تجعل العديد من العناصر تبدو عملاقة. لذلك يبقى السؤال. هل هناك طريقة لجعل صفحة الطباعة تبدو بنفس شكل التخطيط للأجهزة المتوسطة أو الكبيرة؟ أو هل يجب علي أن أقوم بعملية طباعة css بدون استخدام نظام شبكة bootstrap وإضافة عروض ثابتة في pt لجميع العناصر لإنجاز ذلك؟

شكرا مقدما


أضف هذا النمط css في ملف print.css الخاص بك

    @page {
    size: A4;
    margin: 40px;
}


    @media print {
    html,
    body {
        width: 210mm;
        height: 297mm;
    }
    @-moz-document url-prefix() {}
    .col-sm-1,
    .col-sm-2,
    .col-sm-3,
    .col-sm-4,
    .col-sm-5,
    .col-sm-6,
    .col-sm-7,
    .col-sm-8,
    .col-sm-9,
    .col-sm-10,
    .col-sm-11,
    .col-sm-12,
    .col-md-1,
    .col-md-2,
    .col-md-3,
    .col-md-4,
    .col-md-5,
    .col-md-6,
    .col-md-7,
    .col-md-8,
    .col-md-9,
    .col-md-10,
    .col-md-11,
    .col-smdm-12 {
        float: left;
    }
    .col-sm-12,
    .col-md-12 {
        width: 100%;
    }
    .col-sm-11,
    .col-md-11 {
        width: 91.66666667%;
    }
    .col-sm-10,
    .col-md-10 {
        width: 83.33333333%;
    }
    .col-sm-9,
    .col-md-9 {
        width: 75%;
    }
    .col-sm-8,
    .col-md-8 {
        width: 66.66666667%;
    }
    .col-sm-7,
    .col-md-7 {
        width: 58.33333333%;
    }
    .col-sm-6,
    .col-md-6 {
        width: 50%;
    }
    .col-sm-5,
    .col-md-5 {
        width: 41.66666667%;
    }
    .col-sm-4,
    .col-md-4 {
        width: 33.33333333%;
    }
    .col-sm-3,
    .col-md-3 {
        width: 25%;
    }
    .col-sm-2,
    .col-md-2 {
        width: 16.66666667%;
    }
    .col-sm-1,
    .col-md-1 {
        width: 8.33333333%;
    }
    .col-sm-pull-12 {
        right: 100%;
    }
    .col-sm-pull-11 {
        right: 91.66666667%;
    }
    .col-sm-pull-10 {
        right: 83.33333333%;
    }
    .col-sm-pull-9 {
        right: 75%;
    }
    .col-sm-pull-8 {
        right: 66.66666667%;
    }
    .col-sm-pull-7 {
        right: 58.33333333%;
    }
    .col-sm-pull-6 {
        right: 50%;
    }
    .col-sm-pull-5 {
        right: 41.66666667%;
    }
    .col-sm-pull-4 {
        right: 33.33333333%;
    }
    .col-sm-pull-3 {
        right: 25%;
    }
    .col-sm-pull-2 {
        right: 16.66666667%;
    }
    .col-sm-pull-1 {
        right: 8.33333333%;
    }
    .col-sm-pull-0 {
        right: auto;
    }
    .col-sm-push-12 {
        left: 100%;
    }
    .col-sm-push-11 {
        left: 91.66666667%;
    }
    .col-sm-push-10 {
        left: 83.33333333%;
    }
    .col-sm-push-9 {
        left: 75%;
    }
    .col-sm-push-8 {
        left: 66.66666667%;
    }
    .col-sm-push-7 {
        left: 58.33333333%;
    }
    .col-sm-push-6 {
        left: 50%;
    }
    .col-sm-push-5 {
        left: 41.66666667%;
    }
    .col-sm-push-4 {
        left: 33.33333333%;
    }
    .col-sm-push-3 {
        left: 25%;
    }
    .col-sm-push-2 {
        left: 16.66666667%;
    }
    .col-sm-push-1 {
        left: 8.33333333%;
    }
    .col-sm-push-0 {
        left: auto;
    }
    .col-sm-offset-12 {
        margin-left: 100%;
    }
    .col-sm-offset-11 {
        margin-left: 91.66666667%;
    }
    .col-sm-offset-10 {
        margin-left: 83.33333333%;
    }
    .col-sm-offset-9 {
        margin-left: 75%;
    }
    .col-sm-offset-8 {
        margin-left: 66.66666667%;
    }
    .col-sm-offset-7 {
        margin-left: 58.33333333%;
    }
    .col-sm-offset-6 {
        margin-left: 50%;
    }
    .col-sm-offset-5 {
        margin-left: 41.66666667%;
    }
    .col-sm-offset-4 {
        margin-left: 33.33333333%;
    }
    .col-sm-offset-3 {
        margin-left: 25%;
    }
    .col-sm-offset-2 {
        margin-left: 16.66666667%;
    }
    .col-sm-offset-1 {
        margin-left: 8.33333333%;
    }
    .col-sm-offset-0 {
        margin-left: 0%;
    }
    .visible-xs {
        display: none !important;
    }
    .hidden-xs {
        display: block !important;
    }
    table.hidden-xs {
        display: table;
    }
    tr.hidden-xs {
        display: table-row !important;
    }
    th.hidden-xs,
    td.hidden-xs {
        display: table-cell !important;
    }
    .hidden-xs.hidden-print {
        display: none !important;
    }
    .hidden-sm {
        display: none !important;
    }
    .visible-sm {
        display: block !important;
    }
    table.visible-sm {
        display: table;
    }
    tr.visible-sm {
        display: table-row !important;
    }
    th.visible-sm,
    td.visible-sm {
        display: table-cell !important;
    }
}

انتهى بي الأمر إلى حل المشكلة باستخدام ملف print.css الخاص بدون تضمين جميع عناصر التشغيل السريع المتوافقة. وشملت فقط بعض الأشياء التمهيدية اللازمة مع إظهار وإخفاء.


في الواقع ، كل ما تحتاج إلى إضافته (إلى user.css) هو:

@media print {

  @page {                
    size: A4;
    margin: 0mm;
  }

  html, body {
    width: 1024px;
  }

  body {
    margin: 0 auto;
  }
}

عندما تكون في ذلك ، فكر في استخدام كل هذه الإعدادات في Bootstrap 3

@media print {

  @page {                
    size: A4;
    margin: 0mm;
  }

  html, body {
    width: 1024px;
  }

  body {
    margin: 0 auto;
    line-height: 1em;
    word-spacing:1px;
    letter-spacing:0.2px;
    font: 14px "Times New Roman", Times, serif;
    background:white;
    color:black;
    width: 100%;
    float: none;
  }

  /* avoid page-breaks inside a listingContainer*/
  .listingContainer{
    page-break-inside: avoid;
  }

  h1 {
    font: 28px "Times New Roman", Times, serif;
  }

  h2 {
    font: 24px "Times New Roman", Times, serif;
  }

  h3 {
    font: 20px "Times New Roman", Times, serif;
  }

  /* Improve colour contrast of links */
  a:link, a:visited {
    color: #781351
  }

  /* URL */
  a:link, a:visited {
    background: transparent;
    color:#333;
    text-decoration:none;
  }

  a[href]:after {
    content: "" !important;
  }

  a[href^="http://"] {
    color:#000;
  }

  #header {
    height:75px;
    font-size: 24pt;
    color:black
  }
}

كان لدي مشكلة مماثلة. انتهى بي الأمر إلى استبدال كل col-md- * مع col-xs- * وعملت مثل السحر. هنا هو كود exmaple

<div class="container make-border" id="obaidrehman07">
  <div class="row make-border">
    <div class="col-md-9 text-center main-title col-md-offset-1">
      <h4 class="heading-white"><strong>CONTRACT ACTION REPORT</strong></h4>
    </div>
    <div class="col-md-0 pull-right"> <img class="img-responsive" src="<?=$base_url;?>assets/office_home/target/dd46a999e4f329f98e5b8df60e21e9ab.png" alt="" style="max-width: 110px;" /> </div>
  </div>
</div>

تحول الى

<div class="container make-border" id="obaidrehman07">
  <div class="row make-border">
    <div class="col-xs-9 text-center main-title col-xs-offset-1">
      <h4 class="heading-white"><strong>CONTRACT ACTION REPORT</strong></h4>
    </div>
    <div class="col-xs-0 pull-right"> <img class="img-responsive" src="<?=$base_url;?>assets/office_home/target/dd46a999e4f329f98e5b8df60e21e9ab.png" alt="" style="max-width: 110px;" /> </div>
  </div>
</div>