Javascript打印不显示打印对话框中的所有HTML元素 [英] Javascript print not showing all HTML element in print dialog
问题描述
我正在使用javascript打印在新标签页中打开给定的div内容并打印页面。单击打印按钮，调用printDiv（）函数。我的代码是
函数printDiv（）{
var printHTML = $（'＃divPageContent'）。html（）;
var link =< link type = \text / css \rel = \stylesheet \href = \\ / Content / themes / styles.css \/>< script type = \text / javascript\src = \\ / Scripts / jquery-1.5.1.min.js \>< ; \ / script>;
var script =< script type = \text / javascript \> $（document）.ready（function（）{$（\\ \\.pagination \）。remove（）; $（\＃print \）。remove（）; $（\.styled\）。remove（）;}）;< \ / script>;
var tag =< html>< head>+ link + script +< / head>< body onload = \window.print （）\>+ printHTML +< / body>< / html>;
var mywindow = window.open（）;
mywindow.document.open（）;
mywindow .document.write（tag）;
mywindow.document.close（）;
setTimeout（function（）{mywindow.close（ ）;}，1）;
}
点击打印，一切正常。以下html是在标签上生成的。现在问题是ul标签中的子元素class =option-list RadioButtonList未在打印对话框中显示。但是，如果我取消对话框，则会显示此标记的子元素。
I am using javascript print to open given div content in new tab and print a page. On click of print button, printDiv() function is called. My code is
function printDiv() {
var printHTML = $('#divPageContent').html();
var link = " <link type=\"text/css\" rel=\"stylesheet\" href=\"\/Content/themes/styles.css\" /> <script type=\"text/javascript\" src=\"\/Scripts/jquery-1.5.1.min.js \" ><\/script>";
var script = "<script type=\"text/javascript\"> $(document).ready(function () { $( \".pagination\" ).remove();$( \"#print\" ).remove();$( \".styled\" ).remove(); }); <\/script>";
var tag = "<html> <head> " + link + script + "</head><body onload =\"window.print()\"> " + printHTML + " </body></html>";
var mywindow = window.open();
mywindow.document.open();
mywindow.document.write(tag);
mywindow.document.close();
setTimeout(function () { mywindow.close(); }, 1);
}
On click of print, everything works fine. Following html is generated on tag. Now the issue is child element inside ul tag class= "option-list RadioButtonList" is not shown in print dialog. However, if I cancel the dialog, child element of this tag is shown.
"<html> <head> <link type="text/css" rel="stylesheet" href="/Content/themes/styles.css" /> <script type="text/javascript" src="/Scripts/jquery-1.5.1.min.js " ></script><script type="text/javascript"> $(document).ready(function () { $( ".pagination" ).remove();$( "#print" ).remove();$( ".styled" ).remove(); }); </script></head><body onload ="window.print()"> <div id="StagePageControlId-6174" data-hasresult="0" data-controltype="Headline" class="customcontrol">
<h1>headline</h1> <div id="print"> <a href="#" class="printicon" onclick="printDiv();" style="float: right; position: relative;top: -40px; right: 20px;">Print </a> </div>
</div>
<div id="StagePageControlId-6175" data-hasresult="0" data-controltype="TextEditor" class="customcontrol">
<div class="editor-wrapper">r
</div>
</div>
<div id="StagePageControlId-6176" data-hasresult="1" data-controltype="RadioButtonList" class="customcontrol">
<h3>rbl1</h3>
<ul class="option-list RadioButtonList" data-controlproperties="26159">
<li data-delete="0" class="OrderingItem "><span class="radio" style="background-position: 0px 0px;"></span><input type="radio" onclick="RadioButtonList.ApplyClickevent(this);" class="styled" name="Option-26159" id="option-12616"><label for="option-12616">1</label></li><li data-delete="0" class="OrderingItem "><span class="radio" style="background-position: 0px 0px;"></span><input type="radio" onclick="RadioButtonList.ApplyClickevent(this);" class="styled" name="Option-26159" id="option-12617"><label for="option-12617">2</label></li></ul>
</div>
<div class="pagination">
<ul>
<li class="prev"><a class="btn-gray-left" href="#">Föregående steg</a></li>
<li>Steg 2 av 4</li>
<li class="next"><a class="btn-blue-right" href="#">Nästa steg</a></li>
</ul>
</div>
</body></html>"
我尝试过：
我从ul li中删除了onclick，看看是否导致了这个问题。然而它没有用。
What I have tried:
I had removed onclick from ul li to see if this was causing the issue. However it did not worked.
推荐答案
（'＃divPageContent'）。html（）;
var link =< link type = \text / css \rel = \stylesheet \href = \\ / Content / themes / styles.css \/><脚本类型= \text / javascript \src = \\ / Scripts / jquery-1.5.1.min.js \>< \ / script>;
var script =< script type = \text / javascript \>
('#divPageContent').html();
var link = " <link type=\"text/css\" rel=\"stylesheet\" href=\"\/Content/themes/styles.css\" /> <script type=\"text/javascript\" src=\"\/Scripts/jquery-1.5.1.min.js \" ><\/script>";
var script = "<script type=\"text/javascript\">
（document）.ready（function（）{
(document).ready(function () {
（\.pagination\）。remove（）;
( \".pagination\" ).remove();
这篇关于Javascript打印不显示打印对话框中的所有HTML元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
