C# Html Razor page Print pdf from html with Colors

Question

我正在嘗試打印包含 colors 的 pdf。 我在這方面遇到了一些問題。 出於某種原因，打印屏幕忽略了一些樣式。 我不確定這是否是默認設置。

我將此包含在附加到頁面的 css 文件中：

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

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

由於 razor 頁面中的 @ 符號，我無法將 @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;
}

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>

結果：