javascript - C# Html Razor 页面使用颜色从 html 打印 pdf

Question

我正在尝试打印包含颜色的 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;
}

标签： javascriptcssasp.net-corerazor-pages

Answer 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>

结果：