在 Bootstrap 中打印页面时如何打印彩色?

iswrvxsc  于 2022-12-08  发布在  Bootstrap
关注(0)|答案(5)|浏览(170)

我试着在我的www.example.com网站上打印一个彩色页面asp.net。但是所有的颜色都是白色的。但是我的Highcharts颜色和图像是彩色的。我正在使用Bootstrap 3,不确定这是否会影响什么,我还选中了打印背景颜色的复选框。有人知道为什么我的颜色不能打印吗?

f45qwnt8

f45qwnt81#

您可以在CSS中使用类似下面的内容将Bootstrap的设置覆盖回“inherit”(请记住在 * Bootstrap之后包含CSS *):

@media print {
    * {
        color: inherit !important;
        background: inherit !important;
    }
}
kyxcudwk

kyxcudwk2#

在发布问题后不久就找到了解决方案。bootstrap.css中的以下行需要更改。

@media print{*{text-shadow:none !important;color:#000 !important;background:transparent !important;box-shadow:none !important;}

出于我的目的,我删除了color:background:属性。

sr4lhrrt

sr4lhrrt3#

@media print
{
    /* color:#000!important; */    
    text-shadow:none!important;
    /*  background:transparent!important; */
    box-shadow:none!important
 }

您可以从您的bootstrap.min.css或bootstrap.css中删除(或注解掉)颜色和背景样式@media print,无论您在您的站点(母版页)中引用了哪一个...
它对我起作用了!!它会用它的颜色格式打印网页。

wqsoz72f

wqsoz72f4#

我认为@乔纳森的解决方案是正确的,尽管对我来说并不奏效。
正如@pixelearth在评论中所说的,最好的解决方案可能是覆盖来自Bootstrap CSS的@media print。但在这种情况下不能使用inherit选项。
在我的例子中,如果我像在页面CSS中一样设置colorbackground这两个属性,则可以很好地覆盖@media print
如果你想覆盖Bootstrap的@media print CSS,你必须在Bootstrap的CSS之后包含一个新的CSS文件(无论是否缩小)。

<link href="/Content/bootstrap.css" rel="stylesheet">
<link href="/Content/printable-page.css" rel="stylesheet">

下面是我的printable-page.css CSS文件的内容:

@media print {
    *,
    *:before,
    *:after {
        color: #b01717 !important;
        background: transparent !important;
    }
}

正如我所说,两个值color: #b01717background: transparent来自网站的主CSS(来自bodypage部分)。
也许这对某些人来说是一个有限的解决方案,但在我的情况下,“可打印”页面有一个非常简单的样式,我也可以避免编辑bootstrap.css文件。

g2ieeal7

g2ieeal75#

修改bootstrap.css文件中的以下内容

@media print {
*, *:before, *:after {
background:transparent !important;
/*color:#000 !important;*/
-webkit-box-shadow:none !important;
box-shadow:none !important;
text-shadow:none !important
}

在css文件中添加以下代码

@media print {
    * :not(.printDefaultcolor *) {
        color: #000 !important;
    }
}

在html中作为

<div class="printDefaultcolor">
your html code
<span style="font-weight: bold;">bold </span>  <span class="text-success">color </span>  
</div>

相关问题