The alternative method of Web Printing _ Experience Exchange

Source: Internet
Author: User
Tags print format
The alternative method of Web printing choose from Wfmazhenhai Blog
Alternative methods for keyword Web printing
Source
Believe that the use of B/s to do the application of the people may encounter such a problem, how convenient, beautiful to achieve report printing. If you print using your browser's print menu, you'll get some useless stuff on the page, such as the app menu, to the report. Because selecting the Print menu to print the page will print all the contents of the page, and if your app has frames, the content will be included in each frame, and what you actually want is only part of it.  So there are a lot of applications can only put the printing function in the background to complete. What do we do with this situation? In fact, there are many ways to achieve Web page printing function.
One way is to use professional printing tools such as crystal Reports (crystalline report). Friends who used visual Studio 5.0 must remember the tool, but the version was only 4. The latest version is now 9, and nearly a few versions of the Crystal Report Support Web printing. The simplest way is to first use the Crystal Report to make a good template, and then use ASP with parameters to invoke the production of a good template. Crystal Reports after generating a report on a Web page, you can print directly, or you can dump it for other comparisons through files such as Excel files. The use of Crystal Reports can make a very beautiful style, the key in your ability to develop Crystal Reports, but because of the high price of Crystal Reports, only when the project is very profitable to buy.
The second approach is to buy third-party online printing controls, which are inexpensive compared to Crystal Reports, but how the performance of the results is different.
The third method is implemented using style sheets and JavaScript custom functions. Through the style sheet and JavaScript, to achieve Web page printing, the effect is also possible. Here is an example please look. Here is an explanation of the print function implementation:
<script language= "JavaScript" type= "Text/javascript" >
!--
function DP () {
if (window.print)
{
var Div1 = Document.all.Div1.innerHTML;
var Div2 = Document.all.Div2.innerHTML;
// *****************************************************
DIV1, Div2 is the area where you print
Here, depending on what you want to print, from the original display page
<div id=div1>div1 .... </div> <div Id=div2>div2 ... </div>
The number of items to be printed is indicated.
var css = ' <style type= ' text/css "media=all> ' +
' P {line-height:120%} ' +
'. ftitle {line-height:120%; font-size:18px; color: #000000} ' +
' TD {font-size:10px; color: #000000} ' +
' </style> ';
// *****************************************************
Define the CSS for printing, specifically what format you want to print out all you see
, but note: if there is anything inconsistent with the page, it may print
The page format and font may be different.
// *****************************************************
var body = ' <table width= ' 640 "border=" 0 "cellspacing=" 0 "cellpadding=" 5 "> +
' <tr> ' +
' <TD class= ' fbody "> ' +
' <div align= ' center ' class=ftitle> ' + Div1 + ' </div> ' + Div2 +
' </td> ' +
' </tr> ' +
' </table> ';
// ******************************************************
Reset the print format here, according to your printing requirements, the original display of the
The div content of the Web page is re-assembled and can be removed based on your original table content.
Do not print, you can also be able to define the following noprint ignore you do not want to play
Prints something that only calls the content you want to print, but this is ignored where it will
Print out empty, not very beautiful. The table width should match the printed paper width.
// ******************************************************
Document.body.innerHTML = ' <center> ' + CSS + body + ' </center> ';
// ******************************************************
Reset Document.body, Print document ready
// ******************************************************
Window.print ();
Window.history.go (0);
// ******************************************************
Invokes the print command to print the contents of the current window. When you print it's actually a new
Web page, but the Web file is still original. Immediately after the call
Window.history.go (0), and then back to the page before printing, the effect is quite poor
// ******************************************************
}
}
-->
</script>
<style>
@media Print {
. noprint {Display:none}
}
</style>
The!--//.noprint defines noprint, and after adding class= "noprint" in the following places where printing is not required, printing with window.print () will ignore-->
OK, everything is ready, now to do is to call the DP function, if you will implement the invocation of the button design on the same page, you can call directly; if you use a framing method, the button that implements the call is on another page, and the Window.focus () command is added to the first line of the DP function. Otherwise, only pages with buttons are printed.
The fourth method, implementation is a trickery method. or by calling Window.print (), just create one page for the content you want to print, while the Print button is on another frame. Suppose the report page is on mainframe, the button is on the Topframe, the button calls the Printreports () function, and the printreports () function can be printed as follows.
function Printreports ()//topframe in a Web page
{
Try
// *******************************************************
Error handling if the page in mainframe does not have a DP function then does not print
// *******************************************************
{
Window.parent.frames ("MainFrame"). DP ();
}
catch (E)
{
Alert ("No object to print!");
}
}
function DP ()//mainframe in Web page
{
Window.focus ();
if (window.print)
{
Window.print ();
}
}
Personally, I think this is the most convenient way.
Finally, if you remove the "header, page Corner" setting in IE's "file-page Setup", the effect is better. Reproduced
  • Related Article

    Contact Us

    The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

    If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    • Sales Support

      1 on 1 presale consultation

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.