Silverlight HTML Bridge printing window.print() blank pages

问题

I am using HTML bridge window.print() to print range between 20-30. The client says it is printing blank pages. We can only reproduce it on their machine.

This is the code in xaml that combines all the pages in one page and prints it. This code works and prints all pages for me. We need this only on IE I am using windows 8 and IE 10. But for the client it prints one blank page with the header and footer url. It works correctly if he prints the current page or prints all the pages from start to end.

But if he tries to print range, 23-30, it only prints 23-27 or so. Sometimes it prints just one blank page with the header and footer url. Unfortunately none of these happen on my machine. The client said that they tried it on IE 8, IE 9 and IE 11. Can some suggest what are my options or what are the things I could look out for

Page.xaml.cs


       Dictionary<int, List<string>> AllPages = new Dictionary<int, List<string>>();
        --code to add to AllPages
   // Load all pages onto page
             for (int Page = startPage; Page <= endPage; Page++)
                            {
                                if (AllPages.ContainsKey(Page))
                                {

                                    List<string> PageLines = AllPages[Page];
                                    this.m_Div = this.m_HtmlDoc.CreateElement("DIV");
                                    if (Page != AllPages.Count)
                                    {
                                        this.m_Div.SetAttribute("ID", "Page");
                                    }
                                    this.m_Table = this.m_HtmlDoc.CreateElement("TABLE");
                                    this.m_Div.AppendChild(this.m_Table);

                                    for (int Line = 0; Line < PageLines.Count; Line++)
                                    {
                                        this.m_TR = this.m_HtmlDoc.CreateElement("TR");
                                        this.m_TD = this.m_HtmlDoc.CreateElement("TD");
                                        this.m_TD.SetProperty("innerText", PageLines[Line]);
                                        this.m_TR.AppendChild(this.m_TD);
                                        this.m_Table.AppendChild(this.m_TR);
                                    }
                                    this.m_PrintReport.AppendChild(this.m_Div);
                                }
                            }

      HtmlPage.Window.Invoke("printfunction", m_PrintReport);

CSS

body
{
    background:#ffffff;
    color:#000000;
    font-family: rvConsolas;
     margin: 0px;  /* the margin on the content before printing */
     width:100%;
     height:100%;
     background-color:#DDD;
     min-height:100%;

}

html{
    width:100%;
    height:100%;
}

@font-face
{
    font-family: rvConsolas;
    font-style: normal;
    font-weight: normal;
    src: url(EmConsola.eot);
    src: url('EmConsola.eot?#iefix') format('embedded-opentype')
}

 @page 
        {
            size: auto;   /* auto is the current printer page size */
            margin: 0mm;  /* this affects the margin in the printer settings */

        }


#rptViewer 
{
    display: none;
    visibility: hidden;
}

#printReport
{
    visibility: visible;
    font-family: rvConsolas;
    overflow: hidden;
     display:inline-block;
}

td 
{
    font-family: rvConsolas;
    overflow:visible;
    font-size: 52%;
    display:block;
}

#Page
{

    page-break-after: always;


}

ASPX Page

     <link href="Style/style.css" rel="Stylesheet" media="screen" />
        <link href="Style/print.css"  type="text/css" rel="Stylesheet" media="print" />
        <script src="Scripts/Silverlight.js" type="text/javascript"></script>

        <script type="text/javascript">

            function init() {
                printReport.style.display = false;
            }
            function onSLLoad(plugIn, userContext, sender) {
                alert("silverlight");
                window.status +=
                    plugIn.id + " loaded into " + userContext + ". ";
            }

            function printfunction(arg) {
                var contents = arg.innerHTML;
                var frame1 = document.createElement('iframe');
                frame1.name = "frame1";

                frame1.style.position = "absolute";
                frame1.style.top = "-1000000px";
                document.body.appendChild(frame1);
                var frameDoc = (frame1.contentWindow) ? frame1.contentWindow : (frame1.contentDocument.document) ? frame1.contentDocument.document : frame1.contentDocument;
                frameDoc.document.open();
                frameDoc.document.write('<html><head>');
                frameDoc.document.write('</head><body>');
                var path = "Style";
                var style = document.createElement('link');
                style.rel = 'stylesheet';
                style.type = 'text/css';
                style.href = path + '/print.css';
                frameDoc.document.getElementsByTagName('head')[0].appendChild(style);
                frameDoc.document.write(contents);
                frameDoc.document.write('</body></html>');
                frameDoc.document.close();
                setTimeout(function () {
                    frame1.contentWindow.focus();
                    frame1.contentWindow.print();
                    document.body.removeChild(frame1);
                },1000);
            }
        </script>     
    </head>
<body>
    <div id="printReport" style ="
                white-space: nowrap;   ">


    </div>
</body>

回答1:

There are a few things worth checking, as you have not provided enough CSS to reproduce the problem

Firstly, this is a HTML problem, and has nothing to do with Silverlight. You should be able to generate a raw HTML file that reproduces the problem on the client site.
Secondly, you should try printing to different paper sizes. US A4 size is slightly shorter than international A4.
You should explore using CSS page break directive:
```
div#PAGE {page-break-after: always;}
```

Update If you wish to support page orientation, then you can use media queries in your CSS.

@media print and (orientation: landscape) {
    /* landscape styles */
}

@media print and (orientation: portrait) {
    /* portrait styles */
    div#PAGE {page-break-after: always;}
}

Since our poor developer still has to support (cough cough) IE8 - try out polyfills. They are javascript libraries that give IE8 media query support. See respond.js or modernizr.

回答2:

In order to show up in Internet Explorer, tables created with Javascript should have a TBODY element (Can't dynamically add rows to a <TABLE> in IE?).

来源：https://stackoverflow.com/questions/33161283/silverlight-html-bridge-printing-window-print-blank-pages

标签

css

silverlight