Home > Developer > Web Develop
Recent projects to achieve the Web printing function, a variety of debugging.
First of all to achieve the Web printing, this block of Windows under the Print method, the following code to achieve the Web printing and the function of the header and footer, the printing of paging needs to set style= "Page-break-after:always" on the element that you want to page, I am here to add the page to the table element, the other elements are not measured
1 //Print Code2 functionPrint ()3 {4 varPrintstr = "5 6 <meta http-equiv= ' content-type ' content= ' text/html; Charset=utf-8 ' >7 <title>title</title>8 <link rel= ' stylesheet ' href= ' xxx.css ' media= ' ' print '/> //Print preview style settings, this note should be deleted when used
9 <style type= ' text/css ' media= ' print ' > //Go to Header and footer code, this note should be deleted when used Ten @page One {size:auto;margin:0mm;} A html{background-color: #FFFFFF; margin:0px;} - body{padding:0; margin:10mm 15mm 10mm 15mm;} - </style> the -<body> "; - varContent = ""; - varstr = document.getelementsbyclassname (' page '); + //var str = document.getElementById (' Page1 '). InnerHTML; Gets the page element that needs to be printed, the Page1 element sets the style page-break-after:always, which means to start the split from the next line. - for(vari=0;i<str.length;i++){ +Content = content +str[i].innerhtml; A } at //str = document.getElementById (' Page2 '). InnerHTML; Get page elements that need to be printed - //content = content + str; -Printstr = printstr+content+ "</body>; - varPwin=window.open ("print.htm", "Print");//If you are testing locally, you need to create a new print.htm and if you are using it in a domain, you do not need to - Pwin.document.write (PRINTSTR); -Pwin.document.close ();//This is a very important sentence that cannot be achieved without it. in pwin.print (); -}
About hiding the header footer, this block is mainly to enter the Print Preview control page margins, CSS @page property is for the printed page style, the original link http://stackoverflow.com/questions/1960939/ Disabling-browser-print-options-headers-footers-margins-from-page, the code is as follows
1 <HTMLxmlns= "http://www.w3.org/1999/xhtml">2 <Head>3 <title>Print Test</title>4 <styletype= "Text/css">5 @page6 {7 size:Auto; /*Auto is the initial value*/8 margin:0mm; /*This affects the printer settings is mainly set up here to remove the end of the header page (equivalent to the page margin is set to 0), the default is 10mm inside the print margin contains the header footer of the content, More settings on the left side of chrome-the option to remove the footer of the header page also removes the header footer but requires more manual action*/9 }Ten One HTML A { - Background-color:#FFFFFF; - margin:0px; /*This affects the margin on the HTML before sending to printer*/ the } - - Body - { + Border:Solid 1px Blue; - margin:10mm 15mm 10mm 15mm; /*margin want for the content*/ + } A </style> at </Head> - <Body> - <Div>Top Line</Div> - <Div>Line 2</Div> - </Body> - </HTML>
You also need to consider the ratio of screen pixels to paper size, and find some information on the web as follows
Logical units such as Px,em or PT are generally used for display, but physical units, such as cm or in (inches), are used when printing. For a common dpi (Dot Per Inch) of 96 screen,px and CM conversion relationship is as follows:
1 inch = 2.54 cm
1cm = 96/2.54≈37.80 px
1px = 2.54/96≈0.0265 cm
100px = 2.65 cm
The standard dimensions of A4 paper are:
21.0cm * 29.7 cm
At 96DPI resolution, the corresponding pixel size is approximately:
794PX * 1123px
Because the corresponding pixel sizes are different at different dpi, the print CSS is used to describe the pages to be printed using physical units, so that the printing effect is consistent.
Think it's over by here? And not. There is also the problem of printing pop-up window interception, Chrome,ff,ie by default will block the Ajax print pop-up, the first time is to use a tag to adjust the click Method to adjust the print page, but the actual test problems are:
360 Rapid in compatibility mode, IE11 mode will appear the print page only once started the problem
360 Security in compatibility mode occurs when the print page starts only once
Firefox will appear when the print page starts only once
In the park you find a few solutions for print interception, http://www.cnblogs.com/catalina-/p/5846353.html
Finally, the following code to solve the problem of asynchronous pop-up window interception, compatibility is very good
1 var printtab=window.open (); 2 function (data) {3 var url= "xxx"4 printtab.location=5 });However, there is a problem with printing permissions. Because you want to be in an asynchronous request to determine whether the user has print permissions, so you will encounter a problem when the user does not have permission to give a popup window, but here var printtab=window.open (), the blank page has been built, You can only set a global variable in the success function to save whether the user has permission to execute var printtab=window.open (); and printtab.location= URL; But it's been a while. The problem of modifying global variables in asynchronous success is not resolved. Here who knows how to solve trouble reply under:)
It's not going to work. Change back to synchronous call, but there will be a hint of poor user experience
Can only be ignored:)
Web Printing feature related
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
