使 div 元素与 PDF 输出中的 A4 大小相同

Question

我正在使用 select.htmltopdf nuget 包 (selectpdf.com) 生成 PDF。

public static FileResult GetPdf(string html, string filename)
{

    HtmlToPdf htmlToPdf = new HtmlToPdf();
    htmlToPdf.Options.PdfPageSize = PdfPageSize.A4; 
    PdfDocument pdfDocument = htmlToPdf.ConvertHtmlString(html);

    // save pdf document 
    byte[] pdf = pdfDocument.Save();

    // close pdf document 
    pdfDocument.Close();

    // doc.Save("document.pdf");
    FileResult fileResult = new FileContentResult(pdf, "application/pdf");
    fileResult.FileDownloadName = $"{filename}.pdf";
    return fileResult;
}

html看起来像

<style>
    body {
        margin: 0;
        padding: 0;
    }

    .pageA4 {
        width: 210mm;
        height: 297mm;
    }
</style>
<html>
<head>
</head>
<body>
    <div class="pageA4" style="background-color:yellow"><h1>page 1</h1></div>
    <div class="pageA4" style="background-color:violet"><h1>page 2</h1></div>
    <div class="pageA4" style="background-color:yellow"><h1>page 3</h1></div>
    <div class="pageA4" style="background-color:violet"><h1>page 4</h1></div>
</body>
</html>

PDF 输出看起来像

为什么 div 不符合 A4 格式？我该如何解决这个问题？

Answer 1

在 CSS 中，您可以使用 @media print 指定打印时的格式。您可以更改 CSS 的任何部分以仅用于打印。但是，如果您只是将 body 更改为 A4 尺寸，那么让您的 divs 适应 100%。只需将其放入您的 CSS 即可解决问题：

@media print {
        body{
            width: 21cm;
            height: 29.7cm;
       } 
    }

一些浏览器可能不完全支持这个，我在我的例子中使用 chrome。完整 HTML 和 CSS:

<html>
<style>
@media print {
        body{
            width: 21cm;
            height: 29.7cm;
       } 
    }
    body {
        margin: 0;
        padding: 0;
    }

    .pageA4 {
        width: 210mm;
        height: 297mm;
    }
</style>
<html>
<head>
</head>
<body>
    <div class="pageA4" style="background-color:yellow"><h1>page 1</h1></div>
    <div class="pageA4" style="background-color:violet"><h1>page 2</h1></div>
    <div class="pageA4" style="background-color:yellow"><h1>page 3</h1></div>
    <div class="pageA4" style="background-color:violet"><h1>page 4</h1></div>
</body>
</html>

使 div 元素与 PDF 输出中的 A4 大小相同

Make div element the same size as A4 in PDF output

html

css

c#

selectpdf