Блог

Главная - Вопросы по программированию - Вывод меньше ожидаемого при преобразовании HTML / CSS в PDF с помощью Select.PDF или HiQPdf

Вывод меньше ожидаемого при преобразовании HTML / CSS в PDF с помощью Select.PDF или HiQPdf

#html #css #pdf

#HTML #css #PDF

Вопрос:

Я пытаюсь использовать HTML / CSS для создания формы, которая затем будет преобразована в PDF.

Проблема, с которой я сталкиваюсь, заключается в том, что я хочу, чтобы вывод был шириной ровно 8 дюймов. Результат, который я получаю, составляет примерно 5,125 дюйма в ширину.

Я впервые попробовал это с помощью Select.PDF. Когда я не смог заставить его работать правильно, я поискал другой вариант и нашел HiQPdf. Оба они генерируют одинаковый уменьшенный вывод.

Поскольку оба продукта дают мне одинаковый результат, это заставляет меня думать, что я что-то сделал неправильно. Однако, если я открою HTML в Chrome и распечатаю его в PDF, я получу ожидаемые результаты.

Вот HTML / CSS. Размеры измеряются в точках, предполагающих стандартные 72 точки на дюйм. Я также пробовал выполнять измерения в дюймах.

 <html>
    <head>
        <style>
            body {
                background-color: white;
                width: 576pt;
            }

            div {
                background-color: transparent;
                padding: 0;
                margin: 0;
                border: 0;
                border-style: solid;
                border-color: #231f20;
                color: #231f20;
            }



            #buyer {
                border-width: 1.5pt .5pt .5pt 1.5pt;
                width: 332pt;
                min-height: 18pt;
                clear: left;
                float: left;
            }

            #buyerLabel {
                color: #231f20;
                font-family: Verdana, Geneva, sans-serif;
                font-size: 6pt;
                position: relative;
                left: 4pt;
                top: 2pt;
            }

            #buyerData {
                color: black;
                font-family: "Times New Roman", Times, serif;
                font-size: 14pt;
                position: relative;
                left: 37pt;
                top: 0;
            }


            #phone {
                border-width: 1.5pt .5pt .5pt .5pt;
                width: 143pt;
                min-height: 18pt;
                float: left;
            }


            #phoneLabel {
                font-family: Verdana, Geneva, sans-serif;
                font-size: 6pt;
                position: relative;
                left: 4pt;
                top: 2pt;
            }

            #phoneData {
                color: black;
                font-family: "Times New Roman", Times, serif;
                font-size: 14pt;
                position: relative;
                left: 37pt;
                top: 0;
            }



            #date {
                border-width: 1.5pt 1.5pt .5pt .5pt;
                width: 96pt;
                min-height: 18pt;
                float: left;
                clear: right;
            }


            #dateLabel {
                font-family: Verdana, Geneva, sans-serif;
                font-size: 6pt;
                position: relative;
                left: 4pt;
                top: 2pt;
            }

            #dateData {
                color: black;
                font-family: "Times New Roman", Times, serif;
                font-size: 14pt;
                position: relative;
                left: 37pt;
                top: 0;
            }
        </style>
    </head>
    <body>
        <div id=buyer>
            <div id=buyerLabel>BUYER(S)</div>
            <div id=buyerData>Roger Rabbit</div>
        </div>
        <div id=phone>
            <div id=phoneLabel>PHONE</div>
            <div id=phoneData>(606) 555-5555</div>
        </div>
        <div id=date>
            <div id=dateLabel>DATE</div>
            <div id=dateData>2/28/2019</div>
        </div>
    </body>
</html>

Это пример кода C #, который я использую для его обработки. В этом примере я использую Select.PDF. Изначально я не задавал никаких параметров, кроме размера страницы. Я добавил другие позже, надеясь, что они смогут исправить проблему.

     HtmlToPdf converter = new HtmlToPdf();
    converter.Options.PdfPageSize = PdfPageSize.Letter;
    converter.Options.MarginLeft = 0;
    converter.Options.MarginRight = 0;
    converter.Options.AutoFitWidth = HtmlToPdfPageFitMode.AutoFit;
    converter.Options.CssMediaType = HtmlToPdfCssMediaType.Print;

    var html = Encoding.UTF8.GetString(File.ReadAllBytes("Sample.html"));

    PdfDocument doc = converter.ConvertHtmlString(html);
    doc.Save("Sample.pdf");

Комментарии:

1. Многие генераторы PDF создают PDF-файлы с разрешением 96 точек на дюйм, а не 72. Я знаю, что у меня была эта проблема с инструментом PDF, который я использовал, и у него была возможность изменить это значение с 96 на 72. Делает Select. В PDF есть такая опция? Я бы рекомендовал использовать дюймы ( in ) для размеров печати и точки ( pt ) для определения размера шрифта. вы также можете задать размер страницы в CSS с помощью @page объявления .. т.е. добавить @page { size: A4; } в свой CSS

2. Спасибо. Я действительно пытался использовать измерения в дюймах в какой-то момент и все равно получил тот же результат. Однако я просто попробовал использовать 96 точек на дюйм для измерения размера основного текста и расширил одну из ячеек настолько, чтобы получилась полная строка, и, похоже, это работает.