I want to print a part of a page in portrait format

I have found this printarea plugin, see http://plugins.jquery.com/project/PrintArea.

So I ha开发者_StackOverflow中文版ve a section in my HTML, the part of the page I want to print. And I put in the script below. However when I print a page it comes out in landscape format rather than protrait format. How do I fix that? Also the element causes an unwanted pagebreak, how do I fix that? Or is there a better way of doing this?

<script type="text/javascript" src="<%=Url.Content("~/Scripts/jquery.Printarea.js")%>"></script>

<script type="text/javascript">
    $(document).ready(function () {
        $("#btnPrintOnePage").click(function () {
            // Print the DIV.
            $(".printable").printArea();
            // Cancel click event.
            return (false);
        }
        )
        ;
    });
</script>

There are a few options. Mileage may vary.

1. generate a PDF as desired and print that.

2. in your print stylesheet, set the page to portrait, like so @page {size:portrait;} or @page {size:8.5in 11in;}

3. in your print stylesheet, rotate the content, as necessary. So .printable{-moz-transform:rotate(-90deg) // other rotate styles etc.}

One hardly has any control of how a website is printed. Whether it is printed in landscape or portrait is determined by your browser's print settings.

Certain elements can cause unwanted page breaks. These elements usually float or have a overflow set or are very wide. You should remove or reset these values using a print css. You'll find plenty of information regarding print optimization. One example is: http://www.webdesignerdepot.com/2010/01/10-tips-for-better-print-style-sheets/

• tj

To print horizontally, the following should be added in the headers :

var options = { mode : "popup", popClose : true, extraHead : '<meta charset="utf-8"/>,<meta http-equiv="X-UA-Compatible" content="IE=edge"/>,<style rel="stylesheet" type="text/css" media="print">@page { size: landscape; }</style>' };

$("#form1").printArea(options);

Thanks for your help everyone. I found the solution for what I am doing, but I cannot guarentee it is the solution whenever this happens. I put in the following code;

    <script type="text/javascript">
        $(document).ready(function () {
            $("#btnPrintOnePage").click(function () {
                // Print the DIV.
                $(".printable").printElement({
                    printMode: 'popup',
                    overrideElementCSS: ['<%=Url.Content("~/Content/print.css")%>']
                });
            }); 
        });
</script>

With the printElement plugin (http://projects.erikzaadi.com/jQueryPlugins/jQuery.printElement/) I was able to swap the stylesheet and I had much more control over what was output.