Make div element the same size as A4 in PDF output

Question

I am using select.htmltopdf nuget package (selectpdf.com) to generate 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;
}

the html looks like

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

and the PDF output looks like

Why the div does not match A4 format ? How can I solve this issue ?

I get the exact same output as you. And using Tom Dee's code didn't help (although it looks fine in Chrome's print preview). Did it work for you and did you have to make any changes to the code that generates the pdf? I have added converter.Options.CssMediaType = HtmlToPdfCssMediaType.Print; — Björn, Oct 25 '19 at 09:39
I found out that by setting the WebPageWidth to 793 I will get the desired result. Found it in the docs: https://selectpdf.com/html-to-pdf/docs/html/ResizingContentDuringConversion.htm — Björn, Oct 25 '19 at 10:26

Tom Dee · Accepted Answer · 2019-09-02T10:40:42.333

2

In CSS you can use @media print to specify formatting when printed. You can change any part of the CSS just for printing. But if you just change body to A4 size then make your divs to fit into that 100%. Just putting this into your CSS should solve the problem:

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

Some browsers may not fully support this, I am using chrome in my example. Full HTML and 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>

edited Sep 02 '19 at 10:40

answered Aug 30 '19 at 15:33

Tom Dee

2,516
4
17
25

But, if I set div to 100% of body, how to render other pages ? I use `
PAGE-BREAK-AFTER
` now, which partly solve the problem. – Muflix Aug 30 '19 at 15:51
1

@Muflix you don't actually have to change the divs apparently. I just posted a screenshot of just putting the media CSS in. – Tom Dee Aug 30 '19 at 15:58
Interesting, than you – Muflix Aug 30 '19 at 16:06
what is your full html + css ? I still am not able to solve this :/ I add `@Html.Raw(@"@media print { body { width: 21cm; height: 29.7cm; } }")` and edited pageA4 class `.pageA4 { width: 100%; height: 100%; }` but the next div is still printed on actual page. – Muflix Aug 30 '19 at 17:20
1

@Muflix I've updated my answer to put my full code. Also said about browser differences, this could be your problem as well. – Tom Dee Sep 02 '19 at 10:41

Make div element the same size as A4 in PDF output

1 Answers1