Javascript Custom Parts Print Preview

• Download custompartprinter - 14.56 KB

Custom Parts Printer it’s a javascript module that grants developer to select variant parts or may be the whole page to make user can print preview it and print it.<o:p>

Html elements accept the custom attributes. Any part of page needed to print out, it surrounded by html element Div with custom attribute “Printable”.<o:p>

The print preview comes to user in popup window with print button if he/she likes to print it.<o:p>

<o:p> 

The main Script function was <o:p>

DoPrintableSections(wdth,hght,stylesheets,imgsdir)<o:p>

Where wdth and hght are the width and height of the popup window respectively.<o:p>

Stylesheets is string which contains the style sheets files applied to the preview page separated by semicolons.<o:p>

Imgsdir is the image directory which contains images need in print preview process like replacement of radio button with image. <o:p>

Lets go in deep with main function and see how it’s working.<o:p>

<o:p> 

function DoPrintableSections(wdth,hght,stylesheets,imgsdir)<o:p>

{<o:p>

(*) CreateVirtualCarrier("ContentCarrier");<o:p>

(*)var e = document.getElementsByTagName("div");<o:p>

var content = "";<o:p>

for(var i=0;i<e.length;i++){<o:p>

   (*)  if(e[i].printable == "Print"){<o:p>

        var cc = document.getElementById("ContentCarrier");<o:p>

        cc.innerHTML = e[i].innerHTML;<o:p>

   (*)  ClearInputs(cc,"INPUT",imgsdir);<o:p>

        ClearInputs(cc,"select");<o:p>

        ClearInputs(cc,"TEXTAREA");<o:p>

   (*)  content = content + "<br/>" + cc.innerHTML ;  <o:p>

    }    <o:p>

}<o:p>

(*)OpenPreviewPage(content,wdth,hght,stylesheets,imgsdir);<o:p>

(*)cc.innerHTML="";<o:p>

}<o:p>

<o:p> 

(*)First thing this function process is creating Virtual Carrier, It’s just a div we added to the html document to can use the DOM of browser in handling each custom HTML part respectively and to get the new handled html as string using magic method innerHTML.<o:p>

function CreateVirtualCarrier(carriername){<o:p>

    var vc = document.createElement('<div id="'+ carriername +'" style="width:600; height:200"></div>');<o:p>

    document.body.appendChild(vc); <o:p>

}<o:p>

<o:p> 

(*)Then we get all html div elements using getElementsByTagName() which provides the most performant way to iterate over all the elements in the DOM.<o:p>

<o:p> 

(*)After that make looping for the array of elements returned and check if it’s marked as printable or not. The Divs marked as printable we copy it’s html content to the virtual carrier and the start to handle it.<o:p>

 <o:p>

The handing process comes from Clears functions which replace or remove elements by checking there types. We use two main steps to do that<o:p>

1-      Currentelement.parentNode.insertBefore  <o:p>

2-     Currentelement.removeNode(true)<o:p>

<o:p> 

<o:p> 

After all we put the collected generated HTML in new popup window that user will see it.<o:p>