Using CSS to Force Landscape Printing in IE

zl2934046

Rate me:

3.00/5 (8 votes)

15 Feb 2012CPOL

142.2K

1.5K

How to force landscape printing using CSS styles

Download source code

Introduction

Some time ago I need to create a web page to print some tables in Landscape orientation. After searching the internet and asking many questions, I found this way to do it, so I want to share this.

In the style sheet, use the following to force the whole DIV to rotate 90 degrees.

CSS

.LandscapeDiv{
    PAGE-BREAK-BEFORE: always;
    width="100%";
    height="100%";
    filter: progid:DXImageTransform.Microsoft.BasicImage(Rotation=3);
}

With this, it is possible to print in landscape orientation. The following is the entire web page:

JavaScript

/***************************************************************************
Created By: Long Zhou, Sr. Software Engine">xxxx@xxxx.xxx</a />
        Created On: 08 December 2006
        Last Modified: 09 December 2006
***************************************************************************/

// if you change the margin and the page display unexpected results, please
// try changing this var
var MaxLineEachPagePortrait=38;
var MaxLineEachLandscape=27;

//Generating Pop-up Print Preview page
function getPrint(print_area , MaxRecord,PageSize)
{ 
    //Creating new page
    var pp = window.open();
    // var pp = showModalDialog("","Print Preview",
    //               "dialogHeight:520px;dialogWidth:760px; center:yes;");
    // Adding HTML opening tag with <HEAD> … </HEAD> portion 
    pp.document.writeln('<HTML><HEAD><title>Print Preview');
    pp.document.writeln('</title>');
    pp.document.writeln('<LINK href=Styles.css type="text/css" ');
    pp.document.writeln('rel="stylesheet">');
    pp.document.writeln('<base target="_self"><style TYPE=');
    pp.document.writeln('"text/css" media="print">');
    pp.document.writeln('.PrintTable{visibility:hidden;} ');
    pp.document.writeln('.LandscapeDiv{ PAGE-BREAK-BEFORE: always;');
    pp.document.writeln('width="100%";');
    pp.document.writeln('height="100%";filter: ');
    pp.document.writeln('progid:DXImageTransform.Microsoft.');
    pp.document.writeln('BasicImage(Rotation=3);');
    pp.document.writeln('}</style> </HEAD>');
    // Adding Body Tag
    pp.document.writeln('<body MS_POSITIONING="GridLayout" ');
    pp.document.writeln('bottomMargin="0" ');
    pp.document.writeln('leftMargin="0" topMargin="0" ');
    pp.document.writeln('rightMargin="0" >');
    // Adding form Tag
    pp.document.writeln('<form method="post">');
    // Creating two buttons Print and Close within a table
    pp.document.writeln('<TABLE class="PrintTable" width=100%>');
    pp.document.writeln('<TR><TD></TD>');
    pp.document.writeln('</TR><TR><TD align=right>');
    pp.document.writeln('<INPUT ID="PRINT" ');
    pp.document.writeln('type="button" value="Print" ');
    pp.document.writeln('onclick="javascript:location.reload(true);');
    pp.document.writeln('window.print();"><INPUT ID="CLOSE" ');
    pp.document.writeln('type="button" ');
    pp.document.writeln('value="Close" onclick="window.close();">');
    pp.document.writeln('</TD></TR><TR><TD></TD>');
    pp.document.writeln('</TR></TABLE>');
    // Writing print area of the calling page
    // pp.document.writeln(document.getElementById(print_area).innerHTML);
    PageSeperate(pp,print_area , MaxRecord,PageSize);
    // Convert innerHTML to each page
    // Ending Tag of </form>, </body> and </HTML>
    pp.document.writeln('</form></body></HTML>'); 

} 

// Must fill all the blanks in <table> </table> and only accept on table
function PageSeperate(pWinhandle,print_area, MaxRecord,PageSize)
{
    var iLeft,iRight,strLeft,strRight,strTable,strTemp,MaxLength;
    //<TABLE
    var bIsDone=0;
    var iCurrent=0;

    strTemp=document.getElementById(print_area).innerHTML;
    //alert(strTemp);
    //Found First <>
    iLeft=strTemp.indexOf('<');
    iRight=strTemp.indexOf('>');
    strTable=strTemp.substr(iLeft-1,iRight - iLeft);
    if(PageSize==2){//Landscape 
        strTable='<div class="LandscapeDiv">'+
            strTable+">";
    }else{
        strTable='<div>'+strTable+">";
    }
    iLeft=strTemp.length;
    strTemp=strTemp.substr(iRight+1,iLeft - iRight -1);

    MaxLength=PageSize==2?MaxLineEachLandscape:MaxLineEachPagePortrait;
    var TotalPage=Math.ceil(MaxRecord/MaxLength);
    pWinhandle.document.writeln(strTable);

    for(var i=0;i<MaxRecord;i++){
        //Found First <>
        iRight=strTemp.indexOf('/tr');
        if(iRight<0){
            iRight=strTemp.indexOf('/TR');
        }
        if(iRight<0){
            iRight=strTemp.indexOf('/tR');
        }
        if(iRight<0){
            iRight=strTemp.indexOf('/Tr');
        }

        //Write it and count lines
        strLeft=strTemp.substr(0,iRight+4);
        pWinhandle.document.writeln(strLeft);

        iLeft=strTemp.length;

        strTemp=strTemp.substr(iRight+4,iLeft - iRight -4);

        iCurrent++;
        if(iCurrent==MaxLength){
            //separate this page
            iCurrent=0;
            pWinhandle.document.writeln('</table>Page ' + 
                Math.ceil(i/MaxLength)+'/'+TotalPage);//Print Page x/Y
            pWinhandle.document.writeln('</div>');
            pWinhandle.document.writeln(strTable);
        }

        pWinhandle.document.writeln('</table> Page '
            + TotalPage+'/'+TotalPage); //last page
        pWinhandle.document.writeln('</div>'); 
    }
}