C# Html Razor 页面使用颜色从 html 打印 pdf答案

【问题标题】：C# Html Razor page Print pdf from html with ColorsC# Html Razor 页面使用颜色从 html 打印 pdf
【发布时间】：2021-03-19 01:18:10
【问题描述】：

我正在尝试打印包含颜色的 pdf。我在这方面遇到了一些问题。出于某种原因，打印屏幕忽略了一些样式。我不确定这是否是默认设置。

我将它包含在附加到页面的 css 文件中：

@media print {
#printdiv {
    -webkit-print-color-adjust: exact;
}

它似乎没有做任何事情..

由于剃须刀页面中的@符号，我无法将@media 放在页面本身上..

我将它添加到 javascript 中，它显示在页面的样式中，但它也没有做任何事情。

这是我在页面上的完整 Javascript。

    function printContent() {
    var printContents = document.getElementById('printdiv').innerHTML;
    var colors = document.getElementById('printdiv').style = '{ -webkit-print-color-adjust: exact; }';
    var originalContents = document.body.innerHTML;
    document.body.innerHTML = printContents;
    window.print();
    document.body.innerHTML = originalContents;
}

【问题讨论】：

标签： javascript css asp.net-core razor-pages

【解决方案1】：

如果你想在 razor 页面中使用 css 打印，你可以使用@@media print，这里有一个演示：

cshtml:

<div id="printdiv">
    <ul>
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
    </ul>
</div>    

<style>
   
    @@media print {
        #printdiv {
            background-color: #1a4567;
            -webkit-print-color-adjust: exact;
        }
    }
</style>

结果：

【讨论】：