Javascript自定义零件打印预览

分享于 

4分钟阅读

Web开发

  繁體 雙語

自定义零件打印机 它是一个 javascript MODULE,允许开发人员选择变量部分或者是整个页面,使用户可以打印并打印它。 <o:p>

Html元素接受自定义属性。 页面的任何部分都需要打印出来,它被html元素Div包围,并带有定制属性"可以打印"。 <o:p>

打印预览到用户在弹出窗口中打印按钮,如果他喜欢打印。 <o:p>

<o:p>

主脚本函数是 <o:p>

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

其中wdth和hght分别是弹出窗口的宽度和高度。 <o:p>

样式表是包含应用于预览页的样式表文件的字符串,该页面用分号分隔。 <o:p>

Imgsdir是图像目录,包含图像中需要的图像,如替换带有图像的单选按钮。 <o:p>

让我们深入了解main函数,看看它是如何工作的。 <o:p>

<o:p>

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

{ <o:p>

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

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

var 内容= "" <o:p>

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

( * )if ( e [i],可以打印= = 打印"" ) { <o:p>

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

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

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

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

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

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

} <o:p>

} <o:p>

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

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

} <o:p>

<o:p>

( * ) 这个函数过程创建虚拟载体,它只是一个 div,可以用浏览器的DOM来处理每个自定义 HTML。 <o:p>

函数 CreateVirtualCarrier ( CarrierName ) { <o:p>

var vc = document.createElement ( '<div id="' + CarrierName + '"style="宽度:600 ;高度:200"> </div>"' ) ;<o:p>

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

} <o:p>

<o:p>

( * ) 然后我们使用以下方法获取所有 html div元素 getElementsByTagName() 提供了最高性能的方法来迭代DOM中的所有元素。 <o:p>

<o:p>

( * ) 在这里之后,对返回的元素的array 进行循环,并检查它是否被标记为可以打印或者不是。 标记为可以打印的div我们复制它的html内容到虚拟载体,并开始处理它。 <o:p>

<o:p>

处理过程来自清除或者删除元素的清除函数。 我们使用两个主要步骤来完成 <o:p>

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

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

<o:p>

<o:p>

之后,我们将收集到的HTML放在新的弹出窗口中,用户将看到它。 <o:p>






JAVA  Javascript  PAR  PRE  print  预览  
相关文章