Shulou(Shulou.com)06/03 Report--

In this issue, the editor will bring you about the printing scheme of Banner S and the code control of IE printing settings. The article is rich in content and analyzes and describes for you from a professional point of view. I hope you can get something after reading this article.

Bounce S printing scheme

The initial solution to WEB printing is simple: to print the generated client-side HTML in the format defined by the program code. Such as custom page head and tail, report head and tail, margins, paper, and so on. In fact, this is also the most commonly used printing requirements in WEB applications, of course, this will not be very professional, but can solve the general application management system requirements. Through continuous debugging and performance analysis and comparison, a general summary of the advantages and disadvantages of each printing solution, for reference: first, the use of IE internal printing components: this scheme may be the simplest, of course not very "professional". We assume that the client is the IE6.0 version, because the "print template mechanism" we want to apply is fully reflected in IE6.0. It is more functional in precisely controlling page boundaries, text spacing, and the unity of printing. As for the implementation of this scheme is also quite simple, it mainly involves two ways of DEVICERECT,LAYOUTRECT behavior, which are used to define the overall page style and a single page content style. The HTML we want to print can be specified through the CONTENTSRC property of the LAYOUTRECT. The good news is that even if we have 1000 pages to print, we can simply add the dynamic building HTML function through our print template to control the multi-file style with a single template. Please refer to the code attached to this article. This scheme is described in detail, but there is no attached example. The sample file can be downloaded from MSDN. Second, the use of external DLL printing components: the implementation of this kind of scheme is not very complicated, but only uses the internal class functions of DLL itself to create reports, formats and print, without considering the internal implementation links. But for WEB printing, it doesn't seem appropriate. I personally think that the best solution is to create a HTML of the report on WEB and then print it using client-side IE. If your C # or VB is not very good, then the external DLL type resolution is a headache, not to mention the application to the WEB environment. I debugged this scheme with silly print components, but it didn't work. Third, the use of external OCX controls this kind of solution is similar to the second, but also based on the results of others, but in ASP.net, if there is no manual for this control, I believe you will, like me, do not know where to start the design. Fourth, the solution of parsing and printing using XML is introduced in detail in Microsoft Home. Its principle is to parse the defined XML format tags, interpret the parameter definitions of the marks in the file, and finally restore these information to the graphic format of the printer output. It is very simple to understand, for example, if you want to print a simple form, then we parse the form into two parts: the text and the form. When programming, we output the text to the printer when we encounter the text, and when we encounter the form label, we output LINE to the printer. In this way, you can customize some special tags, such as pictures, special shapes, etc. This solution is simple to develop and professional, but it has a disadvantage: the client needs to install .NET FrameWork. Silly.) Fifth, the conversion to PDF files, the use of PDF printing into other types of file output, is a very common way of printing programs, and PDF file format with its excellent "quality" (print quality) and "performance" (application function) is undoubtedly a very economical way. Moreover, it is not very difficult to convert from WEB to PDF, and the resource occupation is not very serious, which is its advantage in the same kind of scheme, but also the disadvantage in the different scheme. So you can search for relevant available information on PDFCHINA. Sixth, the use of external designers to design reports, internal code control printing here I talk about this scheme for ideas, and for the VISUAL DESIGNER report assembly. We have to use the designer to format the report in advance, and then live in the code to "set values" in each form of the report. It's as simple as that. It's a bit like the report design in ACCESS. My company's management system is written by ACCESS, so I actually like this kind of solution. As for VISUAL DESIGNER, you can download it and have a development manual. It is a last resort to write your own professional report printing component, which is certainly more in line with your own requirements, but if you are not a professional developer or have other special purposes, do not spend this time. It's very Rosso. If you are interested in writing, then I suggest you take a look at the ideas and documentation of the fifth option first. There is no perfect solution for WEB printing so far, and I personally look forward to further improvements in IE in this respect for the convenience of our group of "toiling masses".

Code controls IE print settings

Web page printing can be realized through the "print" function of the browser, but the "print template" mechanism is unique to IE 5.56.0and Netscape 6.0.It is more accurate that IE 5.5.is only a prototype of the mechanism, which is fully reflected in IE 6.0. The printing function module of IE 6.0is more complete in accurately controlling the page boundary, text interval, and the unity of printing.

By creating a print template, you can precisely control:

Page style and content layout style when printing and previewing web pages

Print attributes, such as automatically adding volume labels or numbers to printed pages

Precise control of the elements and variables of the print preview interface.

By printing a template, you can:

Automatically add fixed content to all printed pages, such as company logos, copyright notices, or designated ads

Customize elements such as page headers and endnotes, such as page numbers or volume labels

Specify print history and tasks

Book-based parity paging mapping printing.

The printing template mechanism is based on the dynamic HTML language, which involves two main behaviors: DeviceRect and LayoutRect. Here we deeply discuss the printing mechanism of IE 6.0based on these two behaviors.

In addition, it should be noted that the behavior of DHTML (dynamic Hypertext markup language), like the "behavior" of other languages, is an application programming interface, which has its own default properties in the initial state. Under certain events, it is up to the user to call its recognized function module, thus producing the corresponding "behavior". Also, the "behavior" can be written on its own, but it can be called with the extension ".htc".

I. DeviceRect, which defines the overall printing style:

The overall printing style, including adding fixed content such as the company logo to the printed page (not necessarily on the web page, but only on the printed paper or preview page, the same later); the color style of the printed page; the edge attribute or pattern of the printed page; and so on.

Before making a DeviceRect reference, you have to determine the page style by setting it with < Style >.

Example 1: let's customize the following print template

8.5 inch width

11 inch high

Yellow background

1 pixel wide left edge of black solid

1 pixel wide black solid upper boundary

4 pixels wide black solid right border

4 pixels wide black solid lower boundary

Distance between all boundaries and the edge of the paper is 10 pixels

Now let's set it with Style, assuming that the Style is named Mystyle1:

< STYLE TYPE= "text/css" >

.Mystyle1

{

Width:8.5in

Height:11in

Background:#FFFF99

Border-left:1 solid black

Border-top:1 solid black

Border-right:4 solid black

Border-bottom:4 solid black

Margin:10px

}

< / STYLE >

Let's give the full page code referenced by DeviceRect

< HTML XMLNS:IE >

< HEAD >

< STYLE TYPE= "text/css" >

.Mystyle1

{

Width:8.5in

Height:11in

Background:#FFFF99

Border-left:1 solid black

Border-top:1 solid black

Border-right:4 solid black

Border-bottom:4 solid black

Margin:10px

}

< / STYLE >

< / HEAD >

< BODY >

< IE:DEVICERECT ID= "page1" CLASS= "Mystyle1" MEDIA= "print" >

< / IE:DEVICERECT >

< IE:DEVICERECT ID= "page2" CLASS= "Mystyle1" MEDIA= "print" >

< / IE:DEVICERECT >

< / BODY >

< / HTML >

On this page, there are two DeviceRect references. As a rule, every individually printed page must have a corresponding DeviceRect tag, and if there are 1000 pages, there must be 1000 DeviceRect tags! Scared? Don't worry, we'll teach you a way to get all DeviceRect tags done automatically!

In the above code, ID is a flag attribute, and different pages must have their own different identities; CLASS references the Style attribute; the MEDIA attribute indicates that the ultimate use of this page is to print; and the phrase refers to the input default behavior, which are DeviceRect and LayoutRect, respectively.

2. LayoutRect, define the content style of the page:

Like DeviceRect, different pages need to add LayoutRect tags when they are referenced by LayoutRect, and the intelligent method of adding them will be described later; if LayoutRect and DeviceRect appear on the same page at the same time, the former needs to be placed in the latter; in addition, LayoutRect's setting of content style is also realized through Style.

Example 2: let's customize the following content-style print template:

5.5 inches width

8 inches height

With the edge of the printed paper, the four sides maintain a width of 1 inch (plus the edge width of the page itself, the actual print edge width)

White background

1 inch wide dashed line boundary

First customize the style called contentstyle:

< STYLE TYPE= "text/css" >

.contentstyle

{

Width:5.5in

Height:8in

Margin:1in

Background:white

Border:1 dashed gray

}

< / STYLE >

Then here is the complete web page code for the reference:

< HTML >

< HEAD >

< STYLE TYPE= "text/css" >

.contentstyle

{

Width:5.5in

Height:8in

Margin:1in

Background:white

Border:1 dashed gray

}

< / STYLE >

< / HEAD >

< BODY >

< IE:LAYOUTRECT ID= layoutrect1 "CONTENTSRC=" 2.html "CLASS=" contentstyle "NEXTRECT=" layoutrect2 "/ >

< IE:LAYOUTRECT ID= "layoutrect2" CLASS= "contentstyle" / >

< / BODY >

< / HTML >

Compared with the source code in example 1, example 2 only uses LayoutRect instead of the original DeviceRect tag; DeviceRect customizes the overall style of the template, while LayoutRect customizes the layout style of the specific content; the ID attribute of LayoutRect is also unique; the CONTENTSRC attribute indicates the specific web page file that will work; and CLASS indicates the reference object of the style Unlike DeviceRect, when making a LayoutRect reference, you must specify NEXTREC on each page, that is, the next content style in turn, where the "next content" is identified by the corresponding ID of its page, such as LayoutRect2 in this example.

Third, the coordinated operation of DeviceRect and LayoutRect:

Above we discussed the functions and referencing methods of DeviceRect and LayoutRect respectively. Now let's take a look at how to customize and reference them in the same print template.

In each print template, there must be two aspects of content, one is the overall template style (DeviceRect), the other is the content style (LayoutRect); the first print page is different from other pages, because the first page must indicate the CONTENTSRC attribute, and other pages in the same print task no longer need to specify CONTENTSRC.

Example 3:

Here is the DeviceRect code from the first page:

< IE:DEVICERECT ID= "page1" CLASS= "masterstyle" MEDIA= "print" >

< IE:LAYOUTRECT ID= layoutrect1 "CONTENTSRC=" 2.html "CLASS=" contentstyle "NEXTRECT=" layoutrect2 "/ >

< / IE:DEVICERECT >

Here is the DeviceRect code from the other pages:

< IE:DEVICERECT ID= "page2" CLASS= "masterstyle" MEDIA= "print" >

< IE:LAYOUTRECT ID= "layoutrect2" CLASS= "contentstyle" / >

< / IE:DEVICERECT >

Let's combine DeviceRect with LayoutRect, and the source code is as follows:

< HTML XMLNS:IE >

< HEAD >

< STYLE TYPE= "text/css" >

.contentstyle

{

Width:5.5in

Height:8in

Margin:1in

Background:white

Border:1 dashed gray

}

.Mystyle1

{

Width:8.5in

Height:11in

Background:#FFFF99

Border-left:1 solid black

Border-top:1 solid black

Border-right:4 solid black

Border-bottom:4 solid black

Margin:10px

}

< / STYLE >

< / HEAD >

< BODY >

< IE:DEVICERECT ID= "page1" CLASS= "Mystyle1" MEDIA= "print" >

< IE:LAYOUTRECT ID= layoutrect1 "CONTENTSRC=" 2.html "CLASS=" contentstyle "NEXTRECT=" layoutrect2 "/ >

< / IE:DEVICERECT >

< IE:DEVICERECT ID= "page2" CLASS= "Mystyle1" MEDIA= "print" >

< IE:LAYOUTRECT ID= "layoutrect2" CLASS= "contentstyle" / >

< / IE:DEVICERECT >

< / BODY >

< / HTML >

4. Dynamic automatic addition of DeviceRect and LayoutRect tags:

As we mentioned earlier, each individual printed page needs its own DeviceRect and LayoutRect tags, so if we have 1000 pages to print, do we have to repeat the tedious Copy & Paste operation on each page?

The answer is no, and we can do this tedious work through JavaScript scripts.

To implement the dynamic creation of HTML declarations, the key is the definition of the < DIV > tag, which is defined by the following rules.

< DIV ID= "devicecontainer" >

.

< / DIV >

InsertAdjacentHTML () is used between < DIV > and < / DIV >, and its afterBegin and BeforeEnd variables are mainly used. Now let's "insert" the first page between < DIV > < / DIV >:

Devicecontainer.insertAdjacentHTML ("afterBegin", newHTML)

For subsequent pages with inheritance attributes, call the beforeEnd variable:

Devicecontainer.insertAdjacentHTML ("beforeEnd", newHTML)

To load the devicecontainer page, add the following to < Body >:

< BODY ONLOAD= "addFirstPage ()" >

Now let's add to JavaScript the LayoutRect and DeviceRect elements described in detail earlier, with the command addFirstPage (). It is important to note that the newHTML tag is followed by double quotation marks, while the variables after the LayoutRect and DeviceRect tags use single quotation marks. As follows:

Function addFirstPage () {

NewHTML = "< IE:DEVICERECT ID='devicerect1' MEDIA='print' CLASS='mystyle1' >"

NewHTML + = "< IE:LAYOUTRECT ID='layoutrect1' CONTENTSRC='2.html'" + "ONLAYOUTCOMPLETE='onPageComplete () 'NEXTRECT='layoutrect2'" + "CLASS='contentstyle'/ >"

NewHTML + = "< / IE:DEVICERECT >"

Devicecontainer.insertAdjacentHTML ("afterBegin", newHTML)

}

Careful readers will notice that a new attribute appears after LayoutRect: LayoutRect:onLayoutComplete, which mainly specifies subsequent events that LayoutRect stops responding, such as stopping response when system resources are exhausted, or overflow of variables specified by LayoutRect.

Well, with the above principle, let's write JavaScript code with automatic "insert" function:

Function onPageComplete () {

If (event.contentOverflow) {

NewHTML = "< IE:DEVICERECT ID='devicerect" + (lastPage + 1) + "'MEDIA='print' CLASS='mystyle1' >"

NewHTML + = "< IE:LAYOUTRECT ID='layoutrect" + (lastPage + 1) + "'ONLAYOUTCOMPLETE='onPageComplete ()' NEXTRECT='layoutrect" + (lastPage + 2) + "'CLASS='contentstyle'/ >"

NewHTML + = "< / IE:DEVICERECT >"

Devicecontainer.insertAdjacentHTML ("beforeEnd", newHTML)

LastPage++

}

In the above code, contentOverflow represents that because the page information is too long, the LayoutRect of this page stops responding, then jump directly to the next page and let LayoutRect redefine the layout of the next page; onPageComplete () does not matter whether the page is too long, LayoutRect stops responding, as long as it reaches the end of the page, it automatically jumps to the next page, which is the most common case.

When writing this script, the key is to stay awake and not let any of the variables go wrong. Among them, ID is not only for DeviceRect and LayoutRect, but also referenced by NextRect, and the page pointing cannot be wrong; the page number of the current page should be lastPage+1, and the page number of the next page should be lastPage+2; the NextRect tag needs the support of the LayoutRect attribute of the next page, so its value should be "layoutRect" + (lastPage+2); when you open the first page, the initial value of this LastPage is 1.

The above is the Bhand S printing scheme and code control IE printing settings shared by the editor. If you happen to have similar doubts, please refer to the above analysis to understand. If you want to know more about it, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.