Блог

Главная - Вопросы по программированию - Печать многостраничного HTML с абсолютными позициями

Печать многостраничного HTML с абсолютными позициями

#c# #html #css #printing #crystal-reports

#c# #HTML #css #печать #crystal-отчеты

Вопрос:

Мне было поручено преобразовать Crystal Report, который вместо этого печатал бы билеты выбора в отчет HTML (и / или PDF). Одной из причин является ад DLL, который является CR, и некоторые явные сложности в исходном отчете, которые нам не нужны.

Это не совсем прямой вопрос, хотя он может превратиться в один. Я завершил проект и заставил его работать таким образом, что он обрабатывает набор HTML для каждой страницы, заполняя поля данных, затем с помощью iText7 преобразует его в PDF и объединяет страницы в один большой файл. После завершения я использую Sumantra PDF для печати (таким образом, я могу управлять настройками принтера).

Шаблон, который я использую, был сгенерирован Crystal Reports и установил все элементы DIV в качестве абсолютных позиций.

     <div id="hdr_salesorder_title" class="std_div" nowrap="true" style="z-index:25;top:444px;left:19px;width:133px;height:16px;"><span class="hdr_bold_italic">Sales Order Number:</span></div>
    <div id="hdr_salesorder_data" class="std_div" nowrap="true" style="z-index:25;top:463px;left:19px;width:133px;height:17px;"><span class="hdr_std_text">@SALESORDER</span></div>
    <div id="hdr_shipdate_title" class="std_div" nowrap="true" style="z-index:25;top:444px;left:153px;width:67px;height:17px;"><span class="hdr_bold_italic">Ship Date</span></div>
    <div id="hdr_shipdate" class="std_div" nowrap="true" style="z-index:25;top:463px;left:153px;width:72px;height:17px;"><span class="hdr_std_text">@SHIPDATE</span></div>

Моя первоначальная идея состояла в том, чтобы сохранить каждую страницу в HTML-файл и, используя элемент управления webbrowser, распечатать весь набор страниц, но в абсолютном верхнем и левом положениях все страницы печатались друг над другом.

Я исследовал стиль медиа css

 @media print {
  .page-breaker { 
    page-break-before: always;
  }
}

но абсолют переопределил разрыв страницы. Если не считать очень сложного HTML-файла и замены top и left для каждой страницы, есть ли способ сообщить принтеру / браузеру, что каждый разрыв страницы является новым top? Меня беспокоит подход подстановки, если я не правильно распределяю смещения на странице.

То, над чем я сейчас работаю, это:

  • Откройте шаблон и разделите разделы
  • Получение данных
  • Перебирайте данные, заполняющие данные, для замены заполнителей.
    • конвертируйте HTML в PDF с помощью iText7
    • Объединить страницу с основным документом PDF с помощью iText7
  • Когда закончите со всеми данными
  • Сохраните документ
  • Откройте документ с помощью Sumantra PDF
  • распечатайте документ с помощью Sumantra PDF.

Меня беспокоит то, что когда я запускаю отчет CR и сохраняю PDF, размер файла почти на 2/3 меньше размера файла iText7. В процессе может потребоваться обработать более 1000 страниц заявок, и я обеспокоен тем, что могут возникнуть ограничения на сеть и принтер. Прямая печать HTML кажется более эффективным подходом, чем PDF, файл меньшего размера, меньшее влияние на системы, но я застрял на том, чтобы обойти абсолютную верхнюю и левую части.

Я также открыт для других идей, связанных с изменениями HTML. Я не эксперт по CSS или html, хотя я разбираюсь в этом. Crystal Reports — это ад, от которого я и моя компания хотели бы избавиться как из-за стоимости, так и из-за того, что мы используем его только для одного отчета. Я включаю шаблон html, который я использую для отчета. Строки сведений являются динамическими, и раздел нижнего колонтитула должен быть внизу каждой страницы, поэтому я беспокоюсь об относительном позиционировании.

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

 <HTML>
<HEAD>
    <META NAME="Author" CONTENT="Crystal Reports 14.0">
    <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">
    <link href='https://fonts.googleapis.com/css?family=Libre Barcode 39' rel='stylesheet'>
</HEAD>
<BODY>
    <style>
        div {
            position: absolute;
            z-index: 25
        }

        a {
            text-decoration: none
        }

            a img {
                border-style: none;
                border-width: 0
            }

        .relativeContainer {
            position: relative;
        }

        .block {
            height: 12px;
            width: 220px;
            display: block;
        }

        .relative {
            position: relative;
        }

        .std_text {
            font-size: 8pt;
            color: #000000;
            font-family: Arial;
            font-weight: normal;
        }

        .tote_text {
            font-size: 18pt;
            color: #000000;
            font-family: Arial;
            font-weight: bold;
        }

        .acc_text {
            font-size: 18pt;
            color: #000000;
            font-family: Arial;
            font-weight: bold;
        }

        .hdr_std_text {
            font-size: 9pt;
            color: #000000;
            font-family: Arial;
            font-weight: normal;
        }

        .hdr_bold_italic {
            font-size: 9pt;
            color: #000000;
            font-family: Arial;
            font-weight: bold;
            font-style: italic;
        }

        .hdr_title_text {
            font-size: 6pt;
            color: #000000;
            font-family: Arial;
            font-weight: normal;
        }

        .hdr_barcode {
            font-size: 30pt;
            color: #000000;
            font-family: 'Libre Barcode 39';
            font-weight: normal;
        }

        .hdr_non_barcode {
            font-size: 19pt;
            color: #000000;
            font-family: 'Century Schoolbook';
            font-weight: normal;
        }

        .hdr_special1 {
            font-size: 9pt;
            color: #ffffff;
            font-family: Arial;
            font-weight: normal;
        }

        .dtl_hdr_top {
            top: 574px;
        }

        .hdr_addr_top {
            top: 386px;
        }

        .itm_hdr_text {
            font-size: 7pt;
            color: #000000;
            font-family: Arial;
            font-weight: bold;
        }

        .item_bold_sm {
            font-size: 10pt;
            color: #000000;
            font-family: Arial;
            font-weight: bold;
        }

        .item_sm {
            font-size: 10pt;
            color: #000000;
            font-family: Arial;
            font-weight: normal;
        }

        .item_bold_lg {
            font-size: 11pt;
            color: #000000;
            font-family: Arial;
            font-weight: bold;
        }

        .std_div {
            border-color: #000000;
            border-left-width: 0;
            border-right-width: 0;
            border-top-width: 0;
            border-bottom-width: 0;
        }

        @page {
            margin-top: 0pt;
            margin-left: 0pt;
            margin-right: 0pt;
            margin-bottom: 0pt;
        }
    </style>
    <div id="hdr_second_page" class="std_div" nowrap="true" style="z-index:25;top:230px;left:200px;width:400px;height:32px;@HDRSHOW"><span class="item_bold_lg">THIS SECTION LEFT INTENTIONALLY BLANK</span></div>
    <div id="hdr_firstpage" style="z-index:3;top:0;left:0;@HDRCLEAR;">
        <div id="hdr_main" style="z-index:3;clip:rect(0px,768px,432px,0px);top:60px;left:15px;width:768px;height:432px;"></div>
        <div id="hdr_addressinfo_header" style="z-index:10;top:384px;left:224px;width:552px;height:17px;border-radius: 5px; border-color:#000000;border-style:solid;border-width:1px;background-color:#c0c0c0;layer-background-color:#c0c0c0;"></div>
        <!-- this section creates all the vertical lines for the grids -->
        <div id="hdr_spacer4" style="z-index:15;top:372px;left:23px;border-color:#000000;border-style:dotted;border-width:0px;border-top-width:1px;width:738px;"></div>
        <div id="hdr_spacer3" style="z-index:15;top:384px;left:407px;border-color:#000000;border-style:solid;border-width:0px;border-left-width:1px;clip:rect(0px,1px,94px,0px);height:94px;"></div>
        <div id="hdr_spacer2" style="z-index:15;top:384px;left:587px;border-color:#000000;border-style:solid;border-width:0px;border-left-width:1px;clip:rect(0px,1px,94px,0px);height:94px;"></div>
        <div id="hdr_spacer1" style="z-index:15;top:68px;left:400px;border-color:#000000;border-style:dotted;border-width:0px;border-left-width:1px;clip:rect(0px,1px,304px,0px);height:304px;"></div>
        <div id="middle_spacer2" style="z-index:15;top:492px;left:95px;border-color:#000000;border-style:solid;border-width:0px;border-left-width:1px;clip:rect(0px,1px,78px,0px);height:78px;"></div>
        <div id="middle_spacer1" style="z-index:15;top:492px;left:375px;border-color:#000000;border-style:solid;border-width:0px;border-left-width:1px;clip:rect(0px,1px,78px,0px);height:78px;"></div>
        <!-- end spacer section -->
        <div id="hdr_carousel" class="std_div" nowrap="true" style="z-index:25;top:64px;left:23px;width:50px;height:16px;"><span class="std_text">@ISCAROUSEL</span></div>
        <div id="hdr_weborderid_left_data" class="std_div" nowrap="true" style="z-index:25;top:132px;left:271px;width:114px;height:16px;"><span class="std_text">@CUSORDREF_0</span></div>
        <div id="hdr_weborderid_right_data" class="std_div" nowrap="true" style="z-index:25;top:132px;left:655px;width:114px;height:16px;"><span class="std_text">@CUSORDREF_0</span></div>
        <div id="hdr_soldto_data" class="std_div" nowrap="true" style="z-index:25;top:404px;left:231px;width:177px;height:75px;">
            @DIVBILLTOADDRESS
        </div>
        <div id="hdr_salesorder_title" class="std_div" nowrap="true" style="z-index:25;top:444px;left:19px;width:133px;height:16px;"><span class="hdr_bold_italic">Sales Order Number:</span></div>
        <div id="hdr_salesorder_data" class="std_div" nowrap="true" style="z-index:25;top:463px;left:19px;width:133px;height:17px;"><span class="hdr_std_text">@SALESORDER</span></div>
        <div id="hdr_shipdate_title" class="std_div" nowrap="true" style="z-index:25;top:444px;left:153px;width:67px;height:17px;"><span class="hdr_bold_italic">Ship Date</span></div>
        <div id="hdr_shipdate" class="std_div" nowrap="true" style="z-index:25;top:463px;left:153px;width:72px;height:17px;"><span class="hdr_std_text">@SHIPDATE</span></div>
        <div id="hdr_address_info" style="z-index:10;top:384px;left:224px;width:552px;height:92px;border-radius: 5px;border-color:#000000;border-style:solid;border-width:1px;"></div>
        <div id="hdr_Address_header1" class="std_div hdr_addr_top" nowrap="true" style="z-index:25;left:281px;width:82px;height:13px;"><span class="hdr_title_text">SOLD TO</span></div>
        <div id="hdr_Address_header2" class="std_div hdr_addr_top" nowrap="true" style="z-index:25;left:448px;width:82px;height:13px;"><span class="hdr_title_text">SHIP TO</span></div>
        <div id="hdr_Address_header3" class="std_div hdr_addr_top" nowrap="true" style="z-index:25;left:605px;width:82px;height:13px;"><span class="hdr_title_text">TOTE #</span></div>
        <div id="hdr_shipTo_right_data" class="std_div" nowrap="true" style="z-index:25;top:150px;left:550px;width:220px;height:83px;">
            @DIVSHIPTOADDRESS
        </div>
        <div id="hdr_shipid_barcode_left_data" class="std_div" nowrap="true" style="z-index:25;top:268px;left:167px;width:133px;height:12px;"><span class="hdr_title_text">@SHIPPINGID</span></div>
        <div id="hdr_shipid_barcode_right_data" class="std_div" nowrap="true" style="z-index:25;top:268px;left:551px;width:133px;height:12px;"><span class="hdr_title_text">@SHIPPINGID</span></div>
        <div id="hdr_custid_barcode_right_data" class="std_div" nowrap="true" style="z-index:25;top:268px;left:695px;width:80px;height:12px;"><span class="hdr_title_text">@CUSTOMERID</span></div>
        <div id="hdr_custid_barcode_left_data" class="std_div" nowrap="true" style="z-index:25;top:268px;left:319px;width:80px;height:12px;"><span class="hdr_title_text">@CUSTOMERID</span></div>
        <div id="hdr_operator_data" class="std_div" nowrap="true" style="z-index:25;top:459px;left:593px;width:75px;height:17px;"><span class="std_text">OPR = @OPR</span></div>
        <div id="hdr_pod_data" class="std_div" nowrap="true" style="z-index:25;top:459px;left:679px;width:75px;height:17px;"><span class="std_text">POD = @POD</span></div>
        <div id="hdr_tote_data" class="std_div" nowrap="true" style="z-index:25;top:425px;left:630px;width:100px;height:25px;"><span class="tote_text">@TOTE</span></div>
        <div id="hdr_barcode_left_data" class="std_div" nowrap="true" style="z-index:25;top:230px;left:167px;width:228px;height:32px;"><span class="hdr_@NONbarcode">@BARSHIPPINGID</span></div>
        <div id="hdr_barcode_right_data" class="std_div" nowrap="true" style="z-index:25;top:230px;left:551px;width:228px;height:32px;"><span class="hdr_@NONbarcode">@BARSHIPPINGID</span></div>
        <div id="hdr_shipTo_left_data" class="std_div relativeContainer" nowrap="true" style="z-index:25;top:150px;left:166px;width:220px;height:83px;">
            @DIVSHIPTOADDRESS
        </div>
        <div id="hdr_shipto_data" class="std_div" nowrap="true" style="z-index:25;top:403px;left:412px;width:172px;height:73px;">
            @DIVSHIPTOADDRESS
        </div>
        <div id="hdr_batchId_data" class="std_div" nowrap="true" style="z-index:25;top:409px;left:599px;width:167px;height:17px;"><span class="hdr_std_text">@BATCHID</span></div>
        <div id="logo_left" class="std_div" nowrap="true" style="z-index:25;top:@TOPTpx;left:@LEFTLpx;width:@TOPWpx;height:@TOPHpx;"><img src="C:tempPickTicketHTMLimageslogo_@LOGO.png" border="0" width="@TOPWpx" height="@TOPHpx"></div>
        <div id="logo_right" class="std_div" nowrap="true" style="z-index:25;top:@TOPTpx;left:@LEFTRpx;width:@TOPWpx;height:@TOPHpx;"><img src="C:tempPickTicketHTMLimageslogo_@LOGO.png" border="0" width="@TOPWpx" height="@TOPHpx"></div>
        <div id="logo_middle" class="std_div" nowrap="true" style="z-index:25;top:@TOPMpx;left:@LEFTMpx;width:@MIDWpx;height:@MIDHpx;"><img src="C:tempPickTicketHTMLimageslogo_@LOGO.png" border="0" width="@MIDWpx" height="@MIDHpx"></div>
        <div id="agro_left" class="std_div" nowrap="true" style="z-index:24;top:124px;left:111px;width:151px;height:21px; display:@DISPLAY;"><img src="C:tempPickTicketHTMLimagesagro_message.png" border="0" width="151px" height="21px"></div>
        <div id="agro_right" class="std_div" nowrap="true" style="z-index:24;top:124px;left:495px;width:147px;height:18px; display:@DISPLAY;"><img src="C:tempPickTicketHTMLimagesagro_message.png" border="0" width="147px" height="18px"></div>
        <div id="inspection_left" class="std_div" nowrap="true" style="z-index:-1;top:150px;left:23px;width:134px;height:134px; display:@DISPLAY;"><img src="C:tempPickTicketHTMLimagesinspection_sticker.png" border="0" width="134px" height="134px"></div>
        <div id="inspection_right" class="std_div" nowrap="true" style="z-index:-1;top:150px;left:407px;width:134px;height:134px; display:@DISPLAY;"><img src="C:tempPickTicketHTMLimagesinspection_sticker.png" border="0" width="134px" height="134px"></div>
        <div id="meets_left" class="std_div" nowrap="true" style="z-index:25;top:284px;left:19px;width:376px;height:82px; display:@DISPLAY;"><img src="C:tempPickTicketHTMLimagesmeets_standards.png" border="0" width="376px" height="82px"></div>
        <div id="meets_right" class="std_div" nowrap="true" style="z-index:25;top:284px;left:403px;width:376px;height:82px; display:@DISPLAY;"><img src="C:tempPickTicketHTMLimagesmeets_standards.png" border="0" width="376px" height="82px"></div>
        <div id="middle_main" style="z-index:10;top:492px;left:17px;width:758px;height:75px;border-radius: 5px;border-color:#000000;border-style:solid;border-width:1px;"></div>
        <div id="middle_space" style="z-index:3;clip:rect(0px,768px,77px,0px);top:492px;left:15px;width:768px;height:77px;"></div>
        <div id="middle_canada_data" class="std_div" nowrap="true" style="z-index:25;top:514px;left:25px;width:48px;height:16px;"><span class="hdr_special1">@CAN</span></div>
        <div id="middle_state_data" class="std_div" nowrap="true" style="z-index:25;top:547px;left:25px;width:48px;height:25px;"><span class="mid_special">@STATE</span></div>
        <div id="middle_acc_data" class="std_div" nowrap="true" style="z-index:25;top:495px;left:25px;width:48px;height:30px;"><span class="acc_text">@ACC</span></div>
        <div id="middle_text1_data" class="std_div" nowrap="true" style="z-index:25;top:495px;left:378px;width:390px;height:70px;"><span class="std_text">@SOH1TEXT</span></div>
        <div id="middle_text2_data" class="std_div" nowrap="true" style="z-index:25;top:495px;left:97px;width:390px;height:70px;"><span class="std_text">@SOH2TEXT</span></div>
    </div>
    <div id="detail_header_titles" style="z-index:10;top:569px;left:15px;width:759px;height:24px;border-radius: 5px;border-color:#000000;border-style:solid;border-width:1px;background-color:#c0c0c0;layer-background-color:#c0c0c0;"></div>
    <div id="detail_headers" style="z-index:3;clip:rect(0px,768px,28px,0px);top:569px;left:15px;width:768px;height:28px;"></div>
    <div id="detail_spacer5" style="z-index:15;top:569px;left:95px;border-color:#000000;border-style:solid;border-width:0px;border-left-width:1px;clip:rect(0px,1px,26px,0px);height:26px;" /></div>
    <div id="detail_space4" style="z-index:15;top:569px;left:167px;border-color:#000000;border-style:solid;border-width:0px;border-left-width:1px;clip:rect(0px,1px,26px,0px);height:26px;"></div>
    <div id="detail_space3" style="z-index:15;top:569px;left:247px;border-color:#000000;border-style:solid;border-width:0px;border-left-width:1px;clip:rect(0px,1px,26px,0px);height:26px;"></div>
    <div id="detail_space2" style="z-index:15;top:569px;left:375px;border-color:#000000;border-style:solid;border-width:0px;border-left-width:1px;clip:rect(0px,1px,26px,0px);height:26px;"></div>
    <div id="detail_space1" style="z-index:15;top:569px;left:695px;border-color:#000000;border-style:solid;border-width:0px;border-left-width:1px;clip:rect(0px,1px,26px,0px);height:26px;"></div>
    <div id="detail_hdr_location" class="std_div dtl_hdr_top" nowrap="true" style="z-index:25;left:27px;width:52px;height:16px;"><span class="itm_hdr_text">Location</span></div>
    <div id="detail_hdr_shipped" class="std_div dtl_hdr_top" nowrap="true" style="z-index:25;left:103px;width:49px;height:16px;"><span class="itm_hdr_text">Shipped</span></div>
    <div id="detail_hdr_backord" class="std_div dtl_hdr_top" nowrap="true" style="z-index:25;left:183px;width:45px;height:16px;"><span class="itm_hdr_text">Bckord</span></div>
    <div id="detail_hdr_itemnumber" class="std_div dtl_hdr_top" nowrap="true" style="z-index:25;left:255px;width:112px;height:16px;"><span class="itm_hdr_text">Itemamp;nbsp;Number</span></div>
    <div id="detail_hdr_description" class="std_div dtl_hdr_top" nowrap="true" style="z-index:25;left:431px;width:180px;height:16px;"><span class="itm_hdr_text">Description</span></div>
    <div id="detail_hdr_origin" class="std_div dtl_hdr_top" nowrap="true" style="z-index:25;left:703px;width:48px;height:16px;"><span class="itm_hdr_text">Origin</span></div>
    <!-- D1 Start of Detail template, do not remove these comments.  This section is removed and replaced by the program -->
    <div id="detail_line" style="z-index:3;clip:rect(0px,768px,17px,0px);top:@TOPDpx;left:15px;width:768px;height:17px;"></div>
    <div id="detail_location_data" class="std_div" nowrap="true" style="z-index:25;top:@TOPDpx;left:16px;width:79px;height:15px;"><span class="item_bold_lg">@LOCATION</span></div>
    <div id="detail_qty_shipped_data" class="std_div" nowrap="true" style="z-index:25;top:@TOPDpx;left:103px;width:64px;height:16px;text-align:center;"><span class="item_bold_lg">@QTYSHIP</span></div>
    <div id="detail_qty_backord_data" class="std_div" nowrap="true" style="z-index:25;top:@TOPDpx;left:175px;width:64px;height:16px;text-align:center;"><span class="item_bold_lg">@QTYBACKORD</span></div>
    <div id="detail_itemnumber_data" class="std_div" nowrap="true" style="z-index:25;top:@TOPDpx;left:263px;width:103px;height:16px;"><span class="item_bold_sm">@ITEMNUM</span></div>
    <div id="detail_description_data" class="std_div" nowrap="true" style="z-index:25;top:@TOPDpx;left:375px;width:320px;height:16px;"><span class="item_sm">@DESCRIPTION</span></div>
    <div id="detail_origin_data" class="std_div" nowrap="true" style="z-index:25;top:@TOPDpx;left:695px;width:80px;height:16px;"><span class="item_sm">@ORIGIN    @OSTATE</span></div>
    <!-- D1X End of Detail template -->
    <!-- D2 start of detail text line, do not remove these comments.  This section is removed and replaced by the program -->
    <div id="detail_line_text" style="z-index:3;clip:rect(0px,768px,17px,0px);top:@TOPDpx;left:15px;width:768px;height:17px;"></div>
    <div id="detail_text_data" class="std_div" nowrap="true" style="z-index:25;top:@TOPDpx;left:16px;width:760px;height:15px;"><span class="std_text">@DETTEXT</span></div>
    <!-- D2X End of Detail text line -->
    @DETAILLINE
    <div id="footer_main" style="z-index:3;clip:rect(0px,768px,77px,0px);top:1010px;left:15px;width:768px;height:96px;border-radius: 5px;border-color:#000000;border-style:solid;border-width:1px;"></div>
    <div id="footer_text_data" class="std_div" nowrap="true" style="z-index:25;top:1015px;left:31px;width:768px;height:15px;"><span class="std_text">@SOH2TEXT</span></div>
    <div id="footer_totalshipped_title" class="std_div" nowrap="true" style="z-index:25;top:1032px;left:31px;width:38px;height:15px;">
        <table width="38px" border="0" cellpadding="0" cellspacing="0">
            <td align="left"><span class="item_bold_sm">TSHP:</span></td>
        </table>
    </div>
    <div id="footer_weborderid_data" class="std_div" nowrap="true" style="z-index:25;top:1032px;left:127px;width:110px;height:15px;"><span class="std_text">@CUSORDREF_0</span></div>
    <div id="footer_timeprinted_data" class="std_div" nowrap="true" style="z-index:25;top:1032px;left:671px;width:64px;height:15px;"><span class="std_text">@TIMEPRINT</span></div>
    <div id="footer_dateprinted_data" class="std_div" nowrap="true" style="z-index:25;top:1032px;left:247px;width:68px;height:15px;"><span class="std_text">@DATEPRINT</span></div>
    <div id="footer_cusstomerid_data" class="std_div" nowrap="true" style="z-index:25;top:1032px;left:575px;width:74px;height:15px;"><span class="std_text">@CUSTOMERID</span></div>
    <div id="footer_totalshipped_data" class="std_div" nowrap="true" style="z-index:25;top:1032px;left:71px;width:42px;height:15px;text-align:right;"><span class="std_text">@TOTLINES</span></div>
    <div id="footer_bottom" style="z-index:3;clip:rect(0px,768px,16px,0px);top:1052px;left:15px;width:768px;height:16px;"></div>
    <div id="footer_shipid_data" class="std_div" nowrap="true" style="z-index:25;top:1052px;left:314px;width:92px;height:16px;"><span class="std_text">@SHIPPINGID</span></div>
    <div id="footer_batchid_data" class="std_div" nowrap="true" style="z-index:25;top:1052px;left:559px;width:200px;height:16px;"><span class="hdr_std_text">@BATCHID</span></div>
</BODY>
</HTML>

Ответ №1:

Этот шаблон — кошмар…
Примечание: вы должны перезаписать absolute — благодаря каскаду это должно сработать:

 <!DOCTYPE html><html lang="en">             <!-- here other meta's -->
<link rel="stylesheet" href=" ..."          <!-- basic css file -->

    <!-- for printer only, it must be the last one css to overwrite other css-->
<link media="print" rel="stylesheet" href="print.css">

print.css

 div{ position: static}      /* or relative - test, your css is too much complicated to guess what you need */

.never{ display: none}      /* for elements you never want to print */
.always{ position: fixed}   /* for elements you want to print on each page */

другой способ — поместите необходимые объявления внизу <style> ...</style> в head части страницы — это должно быть последнее объявление css.
Я использовал примеры классов, но вы можете закрыть div классы в 3 областях, например header, main, footer , или выбрать их напрямую по идентификатору, а затем в css (часть файла или стиля) задать им свойства для печати.
Вы можете установить свойства печати для любого элемента страницы, нет необходимости создавать «специальную» версию вручную, просто выполните полную печать.css для существующей страницы — исключить и т.д. С помощью css, выбрав класс или идентификатор. Этот файл CSS будет применяться только для печати и будет выполнять только то, что вы заказываете.
Page-break обычно работает, но просто разрывает страницу на выбранной строке, ничего больше.

… этот шаблон является кошмарным валидатором w3c