locked
Two questions about printing RRS feed

  • Question

  • Hi,

    I'm implementing the printing feature of our app, and get some odd problem.

    The printing of my app is quite simple, I just need to print a picture to one page. However, there are always two pages to be printed -- one page that I need and another blank page.  I created an demo app to show this problem, here is it:

    my html:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>PrintTest</title>
    
        <!-- WinJS references -->
        <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
        <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
        <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
    
        <!-- PrintTest references -->
        <link href="/css/default.css" rel="stylesheet" />
        <script src="/js/default.js"></script>
        <style type="text/css">
            @media print {
                #test {
                    background-color: red;
                    height: 300px;
                    width:300px;
                    font-size:30px;
                    /*If this line is added, it will become one page*/
                    /*border:1px solid red;*/
                }
            }
             @media screen {
                #test {
                    background-color: green;
                    height: 300px;                
                    width:300px;
                }
            }
    
             
        </style> 
    </head>
    <body>
        <div id="test">
            <p>Content goes here</p>        
        </div>    
    </body>
    </html>

    js:

    (function () {
        "use strict";
    
        WinJS.Binding.optimizeBindingReferences = true;
    
        var app = WinJS.Application;
        var activation = Windows.ApplicationModel.Activation;
    
        app.onactivated = function (args) {
        	if (args.detail.kind === activation.ActivationKind.launch) {
        		args.setPromise(WinJS.UI.processAll());
        	}
        	var printManager = Windows.Graphics.Printing.PrintManager.getForCurrentView();
        	printManager.onprinttaskrequested = onPrintTaskRequired;
        };
    
        var onPrintTaskRequired = function (printEvent) {		
    		var printTask = printEvent.request.createPrintTask("Print Sample", function (args) {		
    			args.setSource(MSApp.getHtmlPrintDocumentSource(document));
    
    		});
    	};
        
    
        app.oncheckpoint = function (args) {
        };
    
        app.start();
    })();


    The oddest thing is if I add a border when printing, it will become 1 page. I really can't understand that.

    Another problem that I get is when I print a image whose height is much more then width, with selecting Landscape mode, the bottom of the image is always been cut.

    Here is the CSS & html I'm using to print the image

    @media print { #backgroundDiv { display:none } #printView { display:normal; text-align:center; width:auto; max-width:100%; max-height:100%; height:auto; border:1px solid red; } #printView img { max-width:100%; max-height:100%; } }


    ....

     

    <div id="backgroundDiv">....</div>

    <div id="printView">
            <img src="#"/>
        </div>  

    Here is the screen shot of my app, I marked the issues, hope can make it more clear.  Any advices welcome and thanks in advance




    • Edited by Alex ZS Monday, September 24, 2012 9:30 AM
    Monday, September 24, 2012 9:26 AM

All replies

  • Don't have an answer, but I've had issues with unexplained blank pages as well. I'm not sure if there is still in a bug in print layout or if there is something extra to do with styles that isn't apparent in the docs.
    Monday, September 24, 2012 3:32 PM
  • I even tried to limit the size of document.body element. The size is limited (I add a border to the body element and saw the whole element being printed), but the blank page is still there.


    woodhead is as woodhead does

    Wednesday, September 26, 2012 5:55 AM
  • Yeah, I'm trying to basically print a 3 column list view and seeing the same thing.  I've tried both limiting the size and setting margins on the body, several different container elements, the rows themselves, etc.  If I set the rows to about 50-60% width, then I finally lose the extra page.  But that's not the layout I want obviously.  Feels like there is a bug in the rendering or something.

    Not surprised you have to change a few things from a screen layout (I use @media print directive in CSS), but if the print preview looks correct I'm not sure where the extra page is coming from.

    Wednesday, September 26, 2012 12:25 PM
  • Yeah, I'm trying to basically print a 3 column list view and seeing the same thing.  I've tried both limiting the size and setting margins on the body, several different container elements, the rows themselves, etc.  If I set the rows to about 50-60% width, then I finally lose the extra page.  But that's not the layout I want obviously.  Feels like there is a bug in the rendering or something.

    Not surprised you have to change a few things from a screen layout (I use @media print directive in CSS), but if the print preview looks correct I'm not sure where the extra page is coming from.

    I'm using @media print to create my screen layout as well. 

    The most astonishing thing is I find if I add 1px width border to the div in my demo app(I pasted it), the two pages become into one page immediately, but this trick doesn't work on my real app.   That totally destroyed my will to fight with this problem. ;-(


    woodhead is as woodhead does

    Thursday, September 27, 2012 12:10 AM
  • Hi, 

    I am using the same css and met the same problem with you.

    Please see my post here: http://social.msdn.microsoft.com/Forums/en-US/winappswithhtml5/thread/481b0b51-de36-4c04-9dc5-ee835086bcc3

    I did not get a implementable reply from here. 

    Have you found any solution for this?


    Sun Bin

    Thursday, September 27, 2012 5:55 AM
  • HI Bin.Sun

    Does you still have this problem?

    I remember that you ask this question 3 month ago, I gave you a advice here:

    http://social.msdn.microsoft.com/Forums/en-US/winappswithhtml5/thread/db1c5661-2b4f-452b-b11b-0803fbeebad2/

    and that's worked on my computer.

    And please also take a look at this sample:

    Print sample

    It provide a solution to Alex situation.

     

    Friday, September 28, 2012 3:14 AM
  • Hi Dino,

    Thanks for your information.

    Actually I'd read through that thread before I started this thread. There are some useful information but unfortunately it didn't  fix my problem.

    In my case,  the size of the images are variant, I need to make sure they are as big as possible while keeping edges and ratio. I tried these css/html, and find the bottom may be cut when image is too high.

    @media print {
                #backgroundDiv {
                    display:none
                }
                #printView {
                    display:normal;
                    text-align:center;                
                    
                    
                     
                    width:auto;
                    max-width:100%;
                    max-height:100%;
                    height:auto;      
                    border:1px solid red;               
                }
                    #printView img {
                        max-width:100%;
                        max-height:100%;
                    }
            }
    
    ....
     
    <div id="backgroundDiv">....</div>
    <div id="printView">
            <img src="#"/>
        </div>  


    woodhead is as woodhead does

    Friday, September 28, 2012 4:54 AM
  • Hi Dino He, 

    Thanks for you replying for my post 3 months ago, it works. But this time, it is not the same case.

    I need to print some photos, and one photo per page. The photo needs to be put in the middle of the page. 

    I found the picture will be cut when I change the orientation option from Portrait to Landscape in print charm bar. (Please see this post:http://social.msdn.microsoft.com/Forums/en-US/winappswithhtml5/thread/481b0b51-de36-4c04-9dc5-ee835086bcc3)

    I tried different ways: one is by using normal html+css+WinJS, and another is by using print template, and call printer.invalidatePreview() function. But neither of them works.

    I tried the sample as well. In scenario 4, there is a customized option in print charm bar: "Picture only". When I choose it, the preview did not work. 


    Sun Bin

    Friday, September 28, 2012 8:38 AM
  • Hi,

    Tried again, still couldn't fix this problem. ;-(

    Suggestions needed. Thanks

    Alex


    woodhead is as woodhead does

    Tuesday, October 2, 2012 4:38 AM