Question

我有一个使用一个css文件的html文件。在最底层的这个文件中，我将它用于需要仅应用于页面打印机版本的样式

@media print{
   ....print styles here...
}

当我调用wkhtmltopdf --print-media-type input.html output.pdf时，它会使用仅在@media打印机箱中的样式呈现pdf并忽略其余的样式 - 它们没有@media指定类型

这是正常的，或者我在这里做错了什么？我是否需要在@media print中指定所有打印样式？

Answer 1

wkhtmltopdf有一个你可以传递的参数--print-media-type。这是使用NReco的C＃代码示例（仅用于说明目的），但参数应以完全相同的方式工作：

        var converter = new NReco.PdfGenerator.HtmlToPdfConverter();
        converter.CustomWkHtmlArgs = "--print-media-type";
        var pdfBytes = converter.GeneratePdf(html);
        return pdfBytes;

这在C＃中使用NReco来使用打印媒体css时效果很好，它也会考虑任何不在@media块内的CSS，例如font-size的{{1}} 1}}。尝试更改文本或类似内容的大小，看看是否反映了更改。

Answer 2

默认情况下，您在不使用媒体查询的情况下定义的任何CSS规则都适用于所有媒体类型。

因此，wkhtmltopdf --print-media-type将明确使用@media print AND 任何其他通用规则。

如果您需要wkhtmltopdf --print-media-type不会使用的规则，则必须将媒体查询明确定义为print以外的其他内容，例如：

@media screen {
  /* will not be used */
  ...
}

@media print {
  /* will be used */
  ...
}

/* any rules outside specific media queries will also be used */
div.foo {
  ...
}

或者，在media="screen"属性的HTML中包含CSS文件不会与wkhtmltopdf --print-media-type一起使用：

<!-- will not be used -->
<link rel='stylesheet' href='foo.css' type='text/css' media='screen'>

wkhtmltopdf print-media-type仅使用@media print而忽略其余部分

2 个答案: