4

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>
user575219
  • 2,346
  • 15
  • 54
  • 105

2 Answers2

1

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

  1. 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.

  2. Secondly, you should try printing to different paper sizes. US A4 size is slightly shorter than international A4.

  3. You should explore using CSS page break directive:

    div#PAGE {page-break-after: always;}
    
  4. 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;}
    }
    
  5. 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.

Community
  • 1
  • 1
Chui Tey
  • 5,436
  • 2
  • 35
  • 44
  • Thanks, I somehow mananged to make it print without blank pages by using a iframe on the aspx page instead of window.print() from xaml. The client uses IE8 mostly. I have one more problem now though. When they try to print landscape based on the content it overflows to the next page. Any clues on how to fit it to one page as it appears on the browser. I have edited my question with css. – user575219 Oct 25 '15 at 02:52
  • What is meant is: Is there a way to suppress page break if the content overflows the current page box. I build my table in such a way that each page has a page break. Currently with the help of page-break-after:always, this works correctly. But it also breaks when the content overflows . This happens only on printing landscape – user575219 Oct 25 '15 at 04:11
  • Thank you for your help. DO all these media queries work on IE 8. Can you point me to some helpful links for IE 8 on landscape – user575219 Oct 26 '15 at 15:52
  • Got mostly all to work except this @page and margin. It puts the content in 2 pages. I tried margin-top and this works on IE my versions not the clients IE8 and 9 :) – user575219 Oct 26 '15 at 22:02
0

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?).

Community
  • 1
  • 1
ConnorsFan
  • 70,558
  • 13
  • 122
  • 146