从 div 的 innerHTML 优化 Javascript 打印

Question

我需要创建发票查询并以 A6 格式打印所有发票（这就是为什么我将 style='height:128mm;' 设置为 div 的原因。是的，我尝试更改该样式设置仍然没有进度）在一个 javascript 打印对话框中。我正在从

后面的代码创建它

    for (int i = 0; i < count; i++)
    {

   // Create invoice query
    Literal lt = new Literal();       
    lt.Text = "<div style='height:128mm;'><hr><table> ";
    lt.Text += "<tbody><tr style='font-size:small;'><td><b>İşlem Tarihi</b></td><td>:</td><td>" + "01.07.2015" + "</td></tr>"
    lt.Text += "<tr style='font-size:small;'><td><b>Fatura Türü</b></td><td>:</td><td>" + "TELEKOM" + "</td></tr>";    
    lt.Text += "<tr style='font-size:small;'><td><b>Kurum</b></td><td>:</td><td>" + "TURKCELL" + "</td>"
    lt.Text += "<tr style='font-size:small;'><td><b>Fatura No</b></td><td>:</td><td>" + "5069376085" + "</td></tr>";
    lt.Text += "<tr style='font-size:small;'><td><b>Banka Referans No</b></td><td>:</td><td>" + "ASDADSASD^12" + "</td></tr>";
    lt.Text += "<tr style='font-size:small;'><td><b>Tesisat No</b></td><td>:</td><td>" + "5069376085" + "</td></tr>";
    lt.Text += "<tr style='font-size:small;'><td><b>Müşteri Adı</b></td><td>:</td><td>" + "Egemen uluçay" + "</td></tr>";
    lt.Text += "<tr style='font-size:small;'><td><b>Son Ödeme Tarihi</b></td><td>:</td><td>" + "10.07.2015" + "</td></tr>";
    lt.Text += "<tr style='font-size:small;'><td><b>Tutar</b></td><td>:</td><td>" + "50 TL" + " TL</td></tr>";
    lt.Text += "<tr style='font-size:small;'><td><b>Hizmet Bedeli</b></td><td>:</td><td>" + "1 TL" + " TL</td></tr>";
    lt.Text += "<tr style='font-size:small;'><td><b>Toplam Tutar</b></td><td>:</td><td>" + "51 TL" + " TL</td></tr></tbody></table>";
    lt.Text += "<br><br><div style='text-align:center;'><span style='text-align:center; font-size:12px;'>" + "Vezne" + "</span>";
    lt.Text += "<br><span style='text-align:center; font-size:12px;'>" + "3122319793" + "</span>";
    lt.Text += "<br><span style='text-align:center; font-size:12px;'>V.D: " + "Mithatpaşa" + " - " + "11111111111" + "</span>";
    lt.Text += "<br><span style='text-align:center; font-size:12px;'>" + "Ankara" + "</span>";
    lt.Text += "</div></div>";                                              

    Panel3.Controls.Add(lt);                                             

    }

这是我在 div

中的 html panel3

         <div id="dvPrintReceipts" hidden="hidden">                    
             <asp:Panel runat="server" ID="Panel3"></asp:Panel>                             
         </div>

还有我的 javascript 代码 ;

 function PrintPanel() {

var panel = document.getElementById("dvPrintReceipts");
var printWindow = window.open('', '', 'height=400,width=800');
printWindow.document.write('<html><head><title>Kasa Raporu</title>');
printWindow.document.write('<link rel="stylesheet" href="assets/css/bootstrap.min.css" /></head><body >');
printWindow.document.write(panel.innerHTML);
printWindow.document.write('</body></html>');
printWindow.document.close();


setTimeout(function () {
    printWindow.print();
}, 500);
return false;

};

在这种情况下，我们的 "count" 是 2，但是 javascript 对话框给了 3 页，只有第一页的格式正确。您可以看到第二张发票的位置错误，第三页不必要地出现。

这是渲染的 printWindow HTML ;

 <html>
            <head><title>Kasa Raporu</title>
                <link rel="stylesheet" href="assets/css/bootstrap.min.css" />
            </head>
            <body>
                <div id="bodyContent_Panel3">
                    <div style="height: 128mm;">
                        <hr>
                        <table>
                            <tbody>
                                <tr style="font-size: small;">
                                    <td><b>İşlem Tarihi</b></td>
                                    <td>:</td>
                                    <td>01.07.2015</td>
                                </tr>
                                <tr style="font-size: small;">
                                    <td><b>Fatura Türü</b></td>
                                    <td>:</td>
                                    <td>TELEKOM</td>
                                </tr>
                                <tr style="font-size: small;">
                                    <td><b>Kurum</b></td>
                                    <td>:</td>
                                    <td>TURKCELL</td>
                                </tr>
                                <tr style="font-size: small;">
                                    <td><b>Fatura No</b></td>
                                    <td>:</td>
                                    <td>5069376085</td>
                                </tr>
                                <tr style="font-size: small;">
                                    <td><b>Banka Referans No</b></td>
                                    <td>:</td>
                                    <td>ASDADSASD^12</td>
                                </tr>
                                <tr style="font-size: small;">
                                    <td><b>Tesisat No</b></td>
                                    <td>:</td>
                                    <td>5069376085</td>
                                </tr>
                                <tr style="font-size: small;">
                                    <td><b>Müşteri Adı</b></td>
                                    <td>:</td>
                                    <td>Egemen uluçay</td>
                                </tr>
                                <tr style="font-size: small;">
                                    <td><b>Son Ödeme Tarihi</b></td>
                                    <td>:</td>
                                    <td>10.07.2015</td>
                                </tr>
                                <tr style="font-size: small;">
                                    <td><b>Tutar</b></td>
                                    <td>:</td>
                                    <td>50 TL TL</td>
                                </tr>
                                <tr style="font-size: small;">
                                    <td><b>Hizmet Bedeli</b></td>
                                    <td>:</td>
                                    <td>1 TL TL</td>
                                </tr>
                                <tr style="font-size: small;">
                                    <td><b>Toplam Tutar</b></td>
                                    <td>:</td>
                                    <td>51 TL TL</td>
                                </tr>
                            </tbody>
                        </table>
                        <br>
                        <br>
                        <div style="text-align: center;"><span style="text-align: center; font-size: 12px;">Vezne</span><br>
                            <span style="text-align: center; font-size: 12px;">3122319793</span><br>
                            <span style="text-align: center; font-size: 12px;">V.D: Mithatpaşa - 11111111111</span><br>
                            <span style="text-align: center; font-size: 12px;">Ankara</span></div>
                    </div>
                    <div style="height: 128mm;">
                        <hr>
                        <table>
                            <tbody>
                                <tr style="font-size: small;">
                                    <td><b>İşlem Tarihi</b></td>
                                    <td>:</td>
                                    <td>01.07.2015</td>
                                </tr>
                                <tr style="font-size: small;">
                                    <td><b>Fatura Türü</b></td>
                                    <td>:</td>
                                    <td>TELEKOM</td>
                                </tr>
                                <tr style="font-size: small;">
                                    <td><b>Kurum</b></td>
                                    <td>:</td>
                                    <td>TURKCELL</td>
                                </tr>
                                <tr style="font-size: small;">
                                    <td><b>Fatura No</b></td>
                                    <td>:</td>
                                    <td>5069376085</td>
                                </tr>
                                <tr style="font-size: small;">
                                    <td><b>Banka Referans No</b></td>
                                    <td>:</td>
                                    <td>ASDADSASD^12</td>
                                </tr>
                                <tr style="font-size: small;">
                                    <td><b>Tesisat No</b></td>
                                    <td>:</td>
                                    <td>5069376085</td>
                                </tr>
                                <tr style="font-size: small;">
                                    <td><b>Müşteri Adı</b></td>
                                    <td>:</td>
                                    <td>Egemen uluçay</td>
                                </tr>
                                <tr style="font-size: small;">
                                    <td><b>Son Ödeme Tarihi</b></td>
                                    <td>:</td>
                                    <td>10.07.2015</td>
                                </tr>
                                <tr style="font-size: small;">
                                    <td><b>Tutar</b></td>
                                    <td>:</td>
                                    <td>50 TL TL</td>
                                </tr>
                                <tr style="font-size: small;">
                                    <td><b>Hizmet Bedeli</b></td>
                                    <td>:</td>
                                    <td>1 TL TL</td>
                                </tr>
                                <tr style="font-size: small;">
                                    <td><b>Toplam Tutar</b></td>
                                    <td>:</td>
                                    <td>51 TL TL</td>
                                </tr>
                            </tbody>
                        </table>
                        <br>
                        <br>
                        <div style="text-align: center;"><span style="text-align: center; font-size: 12px;">Vezne</span><br>
                            <span style="text-align: center; font-size: 12px;">3122319793</span><br>
                            <span style="text-align: center; font-size: 12px;">V.D: Mithatpaşa - 11111111111</span><br>
                            <span style="text-align: center; font-size: 12px;">Ankara</span></div>
                    </div>
                </div>
            </body>
            </html>

顺便说一下它的 asp.net 网络表单项目。我该怎么做才能解决这个问题？谢谢

Answer 1

您可以使用 page-break-after css 规则，因此对于除最后一个

之外的所有页面

<div style="page-break-after: always;">
    <hr>
    <table>
        <tbody>
            <tr style="font-size: small;">
                <td><b>İşlem Tarihi</b></td>
                <td>:</td>
                <td>01.07.2015</td>
            </tr>
            ...
        </tbody>
    </table>
    <br>
    <br>
    <div style="text-align: center;">
        <span style="text-align: center; font-size: 12px;">Vezne</span>
        <br>
        <span style="text-align: center; font-size: 12px;">3122319793</span>
        <br>
        <span style="text-align: center; font-size: 12px;">V.D: Mithatpaşa - 11111111111</span>
        <br>
        <span style="text-align: center; font-size: 12px;">Ankara</span>
    </div>
</div>

最后一页简单div没有风格

<div>
    <hr>
    <table>
        ...
    </table>
    <br>
    <br>
    <div style="text-align: center;">
        ...
    </div>
</div>

从 div 的 innerHTML 优化 Javascript 打印

Optimize Javascript print from div's innerHTML

javascript

printing

asp.net

jquery