مشكلات طباعة CSSMedia مع لون الخلفية ؛

StackOverflow https://stackoverflow.com/questions/3893986

  •  28-09-2019
  •  | 
  •  

سؤال

أنا جديد هنا في هذه الشركة ولدينا منتج يستخدم أميالًا من CSS. أحاول إنشاء ورقة أنماط قابلة للطباعة لتطبيقنا ولكني أواجه مشكلات معها background-color في @media print.

    @media print {
      #header{display:none;}
      #adwrapper{display:none;}
      td {
        border-bottom: solid; 
        border-right: solid; 
        background-color: #c0c0c0;
      }
    }

كل شيء آخر يعمل ، يمكنني تعديل الحدود وما شابه background-color لن تأتي في الطباعة. الآن أفهم أنكم قد لا تكون قادرًا على الإجابة على سؤالي دون مزيد من التفاصيل. كنت فضوليًا إذا كان لدى أي شخص هذه المشكلة ، أو شيء مشابه ، من قبل.

هل كانت مفيدة؟

المحلول

إذا تم إيقاف تشغيل المستخدم "ألوان وتصوير الخلفية" في إعدادات الطباعة الخاصة بهم ، فلن تتجاوز أي CSS ذلك ، لذلك دائمًا ما يفسر ذلك. هذا إعداد افتراضي.

بمجرد تعيين ذلك ، فإنه سيطبع ألوانًا وصورًا ، ما لديك هناك.

تم العثور عليها في مواقع مختلفة. في IE9BETA ، تم العثور عليها في خيارات الصفحة تحت خيارات الورق

في Firefox ، في إعداد الصفحة -> [Format & Options] علامة التبويب ضمن الخيارات.

نصائح أخرى

لتمكين طباعة الخلفية في الكروم:

body {
  -webkit-print-color-adjust: exact !important;
}

فهمتك - حتى لو كان السؤال "مغلق" منذ سنوات :)
CSS: Box-Shadow: Inset 0 0 0 1000px Gold ؛
يعمل لجميع الصناديق - بما في ذلك خلايا الجدول !!!
(إذا كان من المفترض تصديق ملف إخراج PDF-Printer ..؟)
- تم اختباره فقط في Chrome + Firefox على Ubuntu ...

جرب هذا ، لقد عملت بالنسبة لي على Google Chrome:

<style media="print" type="text/css">
    .page {
        background-color: white !important;
    }
</style>

-webkit-print-color-adjust: exact; وحده is Not enough عليك أن تستخدم !important مع السمة

هذا هو طباعة معاينة على الكروم بعد، بعدما أضفت !important لكل background-color و color التناوب في كل علامة

printing preview on chrome

وهذا هو طباعة معاينة على الكروم قبل مضيفا !important

enter image description here

الآن ، لمعرفة كيف inject !important لأسلوب Div ، تحقق من هذه الإجابة أنا غير قادر على ضخ نمط بقاعدة "! مهمة"

حلان يعملان (على الكروم الحديث على الأقل - لم يختبرهما بعد):

  1. ! مهم مهم في إعلان CSS العادي (ولا حتى في طباعة Media)
  2. استخدم SVG

هناك خدعة أخرى يمكنك القيام بها بدون تنشيط خيار الحدود المطبوعة المذكورة في الوظائف الأخرى. منذ الحدود نكون مطبوعة يمكنك محاكاة ألوان الخلفية الصلبة مع هذا الاختراق:

.your-background:before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: -1;
  border-bottom: 1000px solid #eee; /* Make it fit your needs */
}

قم بتفعيله بإضافة الفصل إلى عنصرك:

<table>
  <tr>
    <td class="your-background">&nbsp;</td>
    <td class="your-background">&nbsp;</td>
    <td class="your-background">&nbsp;</td>
  </tr>
</table>

على الرغم من أن هذا يحتاج إلى بعض التعليمات البرمجية الإضافية وبعض العناية الإضافية لجعل ألوان الخلفية مرئية ، إلا أنه الحل الوحيد المعروف لي.

لاحظ أن هذا الاختراق لن يعمل على عناصر أخرى غير display: block; أو display: table-cell;, ، على سبيل المثال <table class="your-background"> و <tr class="your-background"> لن تعمل.

نستخدم هذا للحصول على ألوان الخلفية في جميع المتصفحات (لا يزال ، IE9+ المطلوبة).

إذا كنت تتطلع إلى إنشاء صفحات "سهلة الطباعة" ، فإنني أوصي بإضافة "! مهم" إلى CSS Media Print. هذا يشجع معظم المتصفحات على طباعة صور الخلفية والألوان ، إلخ.

أمثلة:

background:#3F6CAF url('example.png') no-repeat top left !important;
background-color: #3F6CAF !important;

بالنسبة إلى Chrome ، لقد استخدمت شيئًا كهذا وقد نجحت بالنسبة لي.

داخل علامة الجسم ،

<body style="-webkit-print-color-adjust: exact;"> </body>

أو لعنصر معين ، دعنا نقول إذا كان لديك جدول وتريد ملء td أي خلية ،

<table><tr><td style="-webkit-print-color-adjust: exact;"></tr></table>

بالرغم من !important الاستخدام يجري عبثًا بشكل عام ، هذا هو الرمز المخالف في bootstrap.css الذي يمنع طباعة صفوف الجدول مع background-color.

.table td,
.table th {
    background-color: #fff !important;
}

لنفترض أنك تحاول تصميم HTML التالية:

<table class="table">
    <tr class="highlighted">
      <td>Name</td>
      <td>School</td>
      <td>Height</td>
      <td>Weight</td>
    </tr>
</table>

لتجاوز هذه CSS ، ضع القاعدة التالية (أكثر تحديداً) في ورقة الأنماط الخاصة بك:

@media print {
    table tr.highlighted > td {
        background-color: rgba(247, 202, 24, 0.3) !important;
    }
}

هذا يعمل لأن القاعدة أكثر تحديدا من الافتراضي bootstrap.

وجدت هذه المشكلة ، لأنني واجهت مشكلة مماثلة عند محاولة إنشاء ملف PDF من ناتج HTML في البرنامج النصي لتطبيقات Google حيث لا يتم طباعة ألوان الخلفية أيضًا.

ال -webkit-print-color-adjust:exact; و !important الحلول بالطبع لم تنجح ، ولكن box-shadow: inset 0 0 0 1000px gold; فعلت ... اختراق عظيم ، شكرا جزيلا لك :)

اعتقدت أنني سأضيف مساعدة حديثة و 2015 ذات الصلة من تجربة CSS المطبوعة الأخيرة.

كان قادرًا على طباعة الخلفيات والألوان بغض النظر عن إعدادات مربع الحوار.

للقيام بذلك ، اضطررت إلى استخدام مزيج من !مهم & -بكيت طباعة اللون للحصول على الخلفية والألوان للطباعة بشكل صحيح.

أيضًا ، عند إعلان الألوان ، وجدت أن أكثر المناطق العنيدة تحتاج إلى تعريف مباشرة إلى هدفك. فمثلا:

<div class="foo">
 <p class="red">Some text</p>
</div>

و CSS الخاص بك:

.red {color:red !important}
.foo {color:red !important} /* <-- This won't always paint the p */

تم اختباره والعمل فوق Chrome و Firefox و Opera و Edge بحلول 2016/10. يجب أن تعمل على أي متصفح ويجب أن تبدو دائمًا كما هو متوقع.

حسنًا ، لقد قمت بتجربة متصفح متقاطعة صغيرة لطباعة ألوان الخلفية. فقط نسخ ، لصق واستمتع!

هنا هي صفحة HTML قابلة للطباعة كاملة لـ Bootstrap:

<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style type="text/css">

    /* Both z-index are resolving recursive element containment */
    [background-color] {
        z-index: 0;
        position: relative;
        -webkit-print-color-adjust: exact !important;
    }

    [background-color] canvas {
        display: block;
        position:absolute;
        z-index: -1;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

</style>
</head>

<!-- CONTENT -->
<body>

    <!-- PRINT ROW BLOCK -->
    <div class="container">

    <div class="row">
        <div class="col-xs-6">
            <div background-color="#A400C1">
                <h4>
                Hey... this works !
                </h4>
                <div background-color="#0068C1">
                    <p>
                    Ohh... this works recursive too !!
                    <div background-color="green" style="width: 80px; height: 60px">
                        Any size !!
                    </div>
                    </p>
                </div>
            </div>
        </div>

        <div class="col-xs-6">
            <div background-color="#FFCB83" style="height: 200px">
                Some content...
            </div>
        </div>

    </div>


<script>
    var containers = document.querySelectorAll("[background-color]");

    for (i = 0; i < containers.length; i++)
    {
        // Element
        var container = containers[i];
        container.insertAdjacentHTML('beforeend', '<canvas id="canvas-' + i + '"></canvas>');

        // Color
        var color = container.getAttribute("background-color");
        container.style.backgroundColor = color;

        // Inner Canvas
        var canvas = document.getElementById("canvas-" + i);
        canvas.width = container.offsetWidth;
        canvas.height = container.offsetHeight;
        var ctx = canvas.getContext("2d");
        ctx.fillStyle = color;
        ctx.fillRect(0, 0, canvas.width, canvas.height);
    }

    window.print();
</script>


</body>

</html>

أفضل "حل" وجدته هو توفير زر "طباعة" بارز "يظهر مربع حوار صغير يشرح بجرأة وإيجاز ودقة أنهم بحاجة إلى ضبط إعدادات الطابعة (مع تعليمات نقطة الرصاص ABC 123) لتمكين الخلفية وطباعة الصور. لقد كان هذا ناجحًا جدًا بالنسبة لي.

في بعض الحالات (كتل دون أي محتوى ، ولكن مع الخلفية) ، يمكن تجاوزها باستخدام الحدود ، بشكل فردي لكل كتلة.

فمثلا:

.colored {
  background: #000;
  border: 1px solid #ccc;
  width: 8px;
  height: 8px;
}

@media print {
  .colored div {
    border: 4px solid #000;
    width: 0;
    height: 0;
  }
}

يمكنك استخدام العلامة canvas و "ارسم" الخلفية ، التي تعمل على IE9 و Gecko و WebKit.

إذا كنت لا تمانع في استخدام صورة بدلاً من لون الخلفية (أو ربما صورة بلون خلفيتك) ، فقد عمل الحل أدناه في Firefox و Chrome وحتى IE دون أي ركود مفرطة. اضبط الصورة في مكان ما على الصفحة وأخفها حتى يطبع المستخدم.

HTML على الصفحة مع صورة الخلفية

<img src="someImage.png" class="background-print-img">

CSS

.background-print-img{
    display: none;
}

@media print{
    .background-print-img{
        background:red;
        display: block;
        width:100%;
        height:100%;
        position:absolute;
        left:0;
        top:0;
        z-index:-10;
    }

}

يفعل ليس تعيين background-color داخل ورقة أنماط الطباعة. فقط قم بتعيين السمة في ملف CSS العادي وهو يعمل بشكل جيد :)

الخروج من هذا المثال: قالب HTML المطبوع النهائي مع رأس وتذييل

العرض التوضيحي: قالب HTML المطبوع النهائي مع عرض رأس وتذييل

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top