如何使用CSS样式完美打印 [英] how to print perfectly with css styles
问题描述
朋友们我想要打印一个div内容，所以我写了一个java脚本，即
JS：< script lang =javascripttype =text / javascript>
函数CallPrint（strid）{
var prtContent = document.getElementById（strid）;
var WinPrint = window.open（''，''，'letf = 0，top = 0，width = 1，height = 1，toolbar = 0，scrollbars = 0，status = 0'）;
WinPrint.document.write（prtContent.innerHTML）;
WinPrint.document.close（）;
WinPrint.focus（）;
WinPrint .print（）;
WinPrint.close（）;
prtContent.innerHTML = strOldOne;
}
< / script>
< asp：按钮 id = BtnPrint runat = server text = 打印 onclientclick = javascript：CallPrint（'div_udprintback'）; xmlns：asp = ＃unknown / >
它显示打印视图，但它不是一个完美的顺序..所有div是在同一行所以请打电话给我如何打印完美的v iew with css please.help me friends
请看我过去的答案，它告诉你到底要做什么：
如何减少代码中的页面大小通过打印机打印一些结果？ [ ^ ]，
window.print的字体大小 [ ^ ]。
-SA
按照以下步骤使用CSS样式打印div：
步骤1 ：像设计页面一样下面
<前lang =HTML> < html >
< head >
< 样式 类型 = text / css >
。 red
{
color ： red;
}
< / 风格 >
< script type < /跨度>= text / javascript >
function createPopup（strid）{
var prtContent = 文档 .getElementById（strid）;
var mywindow = window .open（' '，' ' ，' letf = 0，top = 0，width = 500，height = 550，toolbar = 0，scrollbars = 0，状态= 0' ）;
mywindow。 document .write（ < ; html>< head>< title>这是打印..< / title>）;
mywindow。 document .write（ < ; link rel = \ stylesheet \ href = \PrintCss.css \ type = \text / css \/> ）;
//mywindow.document.write（< style type = text / css > .red {color：red;} < / style > ）;
mywindow.document.write（ < / head > < body> ）;
var className = prtContent.getAttribute（ class ）;
mywindow.document.write（< div class = < span class =code-string> + className + > + prtContent.innerHTML + < / div > ）;
mywindow.document.write（ < / body > < / html > ）;
mywindow.print（）;
//mywindow.close（）;
返回true;
}
< / script>
< / head>
< body>
< button onclick = createPopup（' man1'） >打印我的页面< / button>
< div id = man1 class = red >这是Manas，红色。< / div>
< div id = man2 class = green >这是Manas，绿色。< / div>
< / body>
< / html>
第2步：PrintCss.ccs
< pre lang =CSS>。 red
{
color ： red;
}
。绿色
{
颜色 ： green;
}
hi , friends i want to print a div contents so i am write a java script ,that is
JS : <script lang="javascript" type="text/javascript">
function CallPrint(strid) {
var prtContent = document.getElementById(strid);
var WinPrint = window.open('', '', 'letf=0,top=0,width=1,height=1,toolbar=0,scrollbars=0,status=0');
WinPrint.document.write(prtContent.innerHTML);
WinPrint.document.close();
WinPrint.focus();
WinPrint.print();
WinPrint.close();
prtContent.innerHTML = strOldOne;
}
</script>
<asp:Button id="BtnPrint" runat="server" text="Print" onclientclick="javascript:CallPrint('div_udprintback');" xmlns:asp="#unknown" />
it is shows print view but it is not in a perfect order ..all divs are in same line so please tel me how to print perfect view with css please .help me friends
Please see my past answer which tells you exactly what to do:
How to reduce the page size in the code when printing some results through printer ?[^],
font size for window.print[^].
—SA
Follow below steps to print div with CSS styles:
Step 1: Design your page like below
<html> <head> <style type="text/css"> .red { color: red; } </style> <script type="text/javascript"> function createPopup( strid ) { var prtContent = document.getElementById(strid); var mywindow = window.open('', '', 'letf=0,top=0,width=500,height=550,toolbar=0,scrollbars=0,status=0'); mywindow.document.write( "<html><head><title>This is printing..</title>" ); mywindow.document.write( "<link rel="\"stylesheet\"" href="\"PrintCss.css\"" type="\"text/css\"/">" ); //mywindow.document.write( "<style type="text/css"> .red { color: red; } </style>" ); mywindow.document.write( "</head><body >" ); var className = prtContent.getAttribute("class"); mywindow.document.write("<div class=""+ className+ "">" + prtContent.innerHTML + "</div>"); mywindow.document.write( "</body></html>" ); mywindow.print(); //mywindow.close(); return true; } </script> </head> <body> <button onclick="createPopup('man1')">Print My page</button> <div id="man1" class="red">This is Manas here with red.</div> <div id="man2" class="green">This is Manas here with green.</div> </body> </html>
Step 2: PrintCss.ccs
.red { color: red; } .green { color: green; }
这篇关于如何使用CSS样式完美打印的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
