Home > Developer > Web Develop
Source: Http://www.haorooms.com/post/css3media
You often see a print function on a Web page, and after you click, print only for a specific area. Looked on the net, in general there are 2 implementations, one is to use CSS @media control, the other is directly with the JS control. Let's explain the following separately!
One, CSS control page local printingAbout CSS Control printing, CSS @media reference address: Http://www.haorooms.com/post/css3media (mainly introduction to Media Query method) also introduced CSS2 media
<href= "Css/style.css" rel= "stylesheet" type= " Text/css " media=" All "/>
Media can be all or print, and the CSS will only load when printed. Then this is good to do, we can write for the CSS printing style, some places in the printing time does not show, then directly with the Display:none to set it is OK!
In addition to the above writing, you can also write:
When you print, all the content under the Noprint class is not displayed, and it is displayed when it is not printed.
Example:
<Divclass= "Noprint" > <Tablestyle= "margin:0 auto;width:500px;"> <TRAlign= "Center" ><TD> <ObjectID= "WebBrowser"ClassID= "CLSID:8856F961-340A-11D0-A96B-00C04FD705A2"Height= "0"width= "0"> </Object> <inputtype= "button"value= "Print"onclick= "Document.all.WebBrowser.ExecWB (6,1)"> <inputtype= "button"value= "Page Setup"onclick= "Document.all.WebBrowser.ExecWB (8,1)"> <inputtype= "button"value= "Direct print"onclick= "Document.all.WebBrowser.ExecWB (6,6)"> <inputtype= "button"value= "Print Preview"onclick= "Document.all.WebBrowser.ExecWB (7,1)"> </TD></TR> </Table></Div>
These items are displayed before printing, and when you click Print, the above style is not displayed. Achieve the effect of local printing!
Second, JS Local printingDirectly on the case:
1 <!DOCTYPE HTML>2 <HTML>3 <Head>4 <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" />5 <title>JS Local print case</title>6 <Scripttype= "Text/javascript"> 7 functionDoprint () {8 bdhtml=Window.document.body.innerHTML; 9 Sprnstr="<!--startprint-->"; //Print Start IdentificationTen Eprnstr="<!--endprint-->"; //Print End Identification One prnhtml=bdhtml.substr (Bdhtml.indexof (SPRNSTR)+ -); A prnhtml=prnhtml.substring (0, Prnhtml.indexof (EPRNSTR)); - //New Open Window printing (requires referencing the original page style file) - varNewwin=window.open ("",'NewWindow','Height=700,width=750,top=100,left=200,toolbar=no,menubar=no,resizable=no,location=no, Status=no'); the NewWin.document.write (prnhtml); - newwin.print (); - - //Current Window Printing + Window.document.body.innerHTML=prnhtml; - Window.print (); + } A </Script> at </Head> - - <Body> - <P>1 where printing is not required</P> - <P>2 Don't print here.</P> - <!--Startprint--><!--Note that the two tags of Star and end in HTML are added ~ - in <H1>Print title</H1> - <P>Print Content ~ ~</P> to <!--EndPrint - + <Buttontype= "button"onclick= "Doprint ()">Print</Button> - <P>Where not to print</P> the <P>2</P> * </Body> $ </HTML>
Note:
1. JS opens a new window and populates the content in two ways:
I, write content
var newwin=window.open ("childwindow.html"); NewWin.document.write (""); NewWin.document.write (document.getelementbyidx_x ("fatherwindowtable"). outerHTML);The disadvantage of this approach is that the new window has been in loading state.
II, innerHTML content
var newwin=window.open ("childwindow.html"); newwin.onload=function() { NewWin.document.title= ' childwindowtitle '; newWin.document.getElementByIdx_x (' Childwindowid '). Innerhtml=document.getelementbyidx_x ("fatherwindowtable"). outerHTML;}2, JS Open a new window: window.open () method parameters:
Parameters | Value Range | description
Alwayslowered | yes/no | Specifies that the window is hidden after all Windows
Alwaysraised | yes/no | Specifies that the window hovers over all windows depended | yes/no | Close with parent window
Directories | yes/no | NAV2 and 3 's catalog column is visible Height | Pixel value | Window height
Hotkeys | yes/no | In a window without a menu bar, set the security exit Hotkey
Innerheight | pixel value | The pixel height of the document in the window
Innerwidth | Pixel value | Window document pixel width Location | yes/no | The location bar is visible
MenuBar | yes/no | The menu bar is visible
Outerheight | pixel value | Sets the pixel height of the window (including the decorative border)
Outerwidth | Pixel value | Pixel width of the settings window (including decorative borders)
Resizable | yes/no | Whether the window size is adjustable ScreenX | pixel value | The pixel length of the window from the left edge of the screen
ScreenY | Pixel value | The pixel length of the window from the top edge of the screen scrollbars | yes/no | Whether the window can have scroll bar
TitleBar | yes/no | window title bar is visible Toolbar | yes/no | window toolbar is visible
Width | pixel value | pixels of Window Width Z-look | yes/no | Whether the window floats on top of other windows when it is activated
JS Implementation page Local pop-up window printing
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
