从 div 的 innerHTML 优化 Javascript 打印答案

【问题标题】：Optimize Javascript print from div's innerHTML从 div 的 innerHTML 优化 Javascript 打印
【发布时间】：2015-07-11 08:14:53
【问题描述】：

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

    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;

};

在这种情况下，我们的“计数”为 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 网络表单项目。我能做些什么来解决这个问题？谢谢你

【问题讨论】：

可以为printWindow提供渲染的html吗？你也可以尝试删除style='height:128mm;'
以及为什么添加<link rel="stylesheet" href="assets/css/bootstrap.min.css" /> 进行打印，而我认为没有使用它
@Grundy 我试过删除样式，结果更糟
那么你能显示为 printWindow 渲染的 html 吗？
@Grundy Umm Cant ctrl+u to dialog page ?

标签： javascript jquery asp.net printing

【解决方案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>

【讨论】：