选择pPDF HtmlToPdf - 生成PDF证书,因为横向不居中

问题描述 投票:0回答:1

我正在尝试从 Html 生成 PDF 证书,但无法居中或使其宽度为 100%...在浏览器中一切看起来都正常,但当我生成 PDF 时与左侧边距右对齐.. 。 我的 html 看起来像这样:

   <STYLE type="text/css">
     html, body {
         margin: 0;
         padding: 0;
     }

     h1 {
         text-align: center;
         font-size: xx-large;
         margin-bottom: 20px;
     }

     p {
         font-size: 18px;
         line-height: 1.5;
         text-align: center;
         margin-bottom: 10px;
     }

     .background {
         background-image: url(https://localhost:44448/static/diploma-background.jpg);
         width: 1024px;
         height: 768px;
         margin: 0;
         padding: 0;
         background-position: center center;
         background-size: 100%;
         background-repeat: no-repeat;
         position: relative;
     }

     .diploma {
         position: absolute;
         top: 50%;
         left: 50%;
         -ms-transform: translate(-50%, -50%);
         transform: translate(-50%, -50%);
         margin: 0 auto;
         padding: 30px;
     }
</STYLE>
<html>
<body>
    <div class="background">
        <div class="diploma">
            <h1>Lorem ipsum dolor sit amet</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
    </div>
</body>
</html>

我的 C# 代码看起来是这样的:

   SelectPdf.HtmlToPdf converter = new SelectPdf.HtmlToPdf();
                // set converter options
                converter.Options.PdfPageSize = PdfPageSize.A4;
                converter.Options.PdfPageOrientation = PdfPageOrientation.Landscape;

                converter.Options.MarginLeft = 0;
                converter.Options.MarginRight = 0;
                converter.Options.MarginTop = 0;
                converter.Options.MarginBottom = 0;
                converter.Options.DisplayHeader = false;
                converter.Options.DisplayFooter = false;

                converter.Options.WebPageWidth = 1024;
                converter.Options.WebPageHeight = 768;
                converter.Options.WebPageFixedSize = true;
                converter.Options.AutoFitHeight = HtmlToPdfPageFitMode.AutoFit;
                converter.Options.AutoFitWidth = HtmlToPdfPageFitMode.AutoFit;
                // set css @media print
                converter.Options.CssMediaType = HtmlToPdfCssMediaType.Print;
                converter.Options.ViewerPreferences.CenterWindow = true;
                SelectPdf.PdfDocument doc = converter.ConvertHtmlString(diplomahtml);

生成的 PDF 如下所示:

HTML 在 Chrome 中看起来像这样:

我的背景图片是3508x2480

有什么想法/建议吗?

c# html .net html-to-pdf selectpdf
1个回答
0
投票

RTFM https://selectpdf.com/docs/ResizingContentDuringConversion.htm

内容调整大小

因为网页与普通网页相比通常具有不同的宽度 标准pdf页面,内容在网络上无法完美契合 页面内容呈现为 pdf。举个例子,大多数网站都是 针对页面宽度至少为 1024px 或 1280px 的浏览器进行了优化。 标准 A4 页面有 595 x 842 点。 1 磅为 1/72 英寸。 1 像素 是 1/96 英寸。这意味着 A4 页面宽度为 793 像素。因为 网页宽度(1024px或以上)大于此pdf页面宽度, 当内容呈现为 pdf 时,它会被截断或 它需要调整大小(缩小)以适应 pdf 页面宽度。

所以在c#中我改为:

   converter.Options.MarginBottom = 0;
   converter.Options.DisplayHeader = false;
   converter.Options.DisplayFooter = false;

   converter.Options.WebPageWidth = 842;
   converter.Options.WebPageHeight = 595;
   converter.Options.WebPageFixedSize = true;
   converter.Options.AutoFitHeight = HtmlToPdfPageFitMode.AutoFit;
   converter.Options.AutoFitWidth = HtmlToPdfPageFitMode.AutoFit;

在 html 中:

 .background {
     background-image: url(imgurl);
     width: 842px;
     height: 595px;
     margin: 0;
     padding: 0;
     background-position: center center;
     background-size: 100%;
     background-repeat: no-repeat;
     position: relative;
 }
© www.soinside.com 2019 - 2024. All rights reserved.