Javascript 自定义部件打印预览
2.20/5 (3投票s)
一个 JavaScript 模块，允许开发人员选择变体的部分或整个页面，以便用户可以预览和打印它。
自定义部分打印器 它是一个 JavaScript 模块，允许开发人员选择变体的部分或整个页面，以便用户可以预览和打印它。
HTML 元素接受自定义属性。页面上任何需要打印的部分，都用带有自定义属性“Printable”的 div 元素包围。
打印预览会弹出一个窗口，其中包含一个打印按钮，如果用户喜欢，可以打印它。
主要脚本函数是
DoPrintableSections(wdth,hght,stylesheets,imgsdir)
其中 wdth 和 hght 分别是弹出窗口的宽度和高度。
Stylesheets 是一个字符串，包含应用于预览页面的样式表文件，用分号分隔。
Imgsdir 是图像目录，其中包含打印预览过程中需要的图像，例如单选按钮替换为图像。
让我们深入了解主函数，看看它是如何工作的。
function DoPrintableSections(wdth,hght,stylesheets,imgsdir)
{
(*) CreateVirtualCarrier("ContentCarrier");
(*)var e = document.getElementsByTagName("div");
var content = "";
for(var i=0;i<e.length;i++){
(*) if(e[i].printable == "Print"){
var cc = document.getElementById("ContentCarrier");
cc.innerHTML = e[i].innerHTML;
(*) ClearInputs(cc,"INPUT",imgsdir);
ClearInputs(cc,"select");
ClearInputs(cc,"TEXTAREA");
(*) content = content + "<br/>" + cc.innerHTML ;
}
}
(*)OpenPreviewPage(content,wdth,hght,stylesheets,imgsdir);
(*)cc.innerHTML="";
}
(*)此函数处理的第一件事是创建一个虚拟载体，它只是我们在 HTML 文档中添加的一个 div，以便可以使用浏览器的 DOM 来分别处理每个自定义 HTML 部分，并通过魔术方法 innerHTML 获取新处理的 HTML 作为字符串。
function CreateVirtualCarrier(carriername){
var vc = document.createElement('<div id="'+ carriername +'" style="width:600; height:200"></div>');
document.body.appendChild(vc);
}
(*)然后，我们使用 getElementsByTagName() 获取所有 HTML div 元素，这提供了遍历 DOM 中所有元素的最有效方法。
(*)之后，对返回的元素数组进行循环，并检查它是否被标记为可打印。我们复制被标记为可打印的 div 的 HTML 内容到虚拟载体，然后开始处理它。
处理过程来自 Clears 函数，这些函数通过检查元素类型来替换或删除元素。我们使用两个主要步骤来完成这项工作：
1- Currentelement.parentNode.insertBefore
2- Currentelement.removeNode(true)
最后，我们将收集生成的 HTML 放入一个新的弹出窗口中，用户将在其中看到它。