单击打印按钮后打印页面失真

时间:2014-04-14 13:39:46

标签: javascript asp.net css

单击打印按钮后,在printview上可以看到页面样式形成不良。你可以看到演示:

http://rogatech.somee.com/print.aspx?DarkhastId=13921230

我该如何解决这个问题?我从互联网上测试了一些其他代码,但没有人帮助我......

asp.net代码:

<input type="button" onclick="JavaScript:printPartOfPage('Div1')" value="print" />
<div align="right" id="Div1" style=" width:21cm; height:29.7cm; margin-top:20px; direction:rtl ">
<div style="border-color: Black; border-width:1px; border-style:solid; width:595; height:130px"><img src="roga arm.png" alt=""  style=" width:110px; height:110px; margin-top:5px; margin-right:5px; margin-bottom:5px;" />
<span align="left" style=" float:left ;text-align:right;margin-left: 70px; margin-top:5px">شماره درخواست :  <asp:Label ID="DarkhastIdLabel" runat="server" 
                            Text='<%# Eval("DarkhastId") %>' /></span>
               <div align="left" style="margin-top:-80px;margin-bottom:7px;margin-left: 110px; ">پیوست : </div>

   <br />


<div style=" float:left;margin-left: 116px; margin-top:-5px ; margin-bottom:15px; " align="left">تاریخ : </div>
               <div align="center"  style=" font-family:'BKoodakBold'; font-size:22px; color:Black; font-weight:bold;  margin-top:-40px; vertical-align:middle;"> گروه مهندسی و تحقیقاتی روگاتکنیک</div>
</div>
<br />
<div style="border-color: Black; border-width:1px; border-style:solid; width:595">
<div style=" margin: 5px 20px 100px 5px;">

//listview code

</div>
        </div>
    </div>

的javascript:

<script type="text/javascript">
<!--
    function printPartOfPage(elementId) {
        var printContent = document.getElementById(elementId);
        var windowUrl = 'about:blank';
        var uniqueName = new Date();
        var windowName = 'Print' + uniqueName.getTime();
        var printWindow = window.open(windowUrl, windowName, 'left=50000,top=50000,width=0,height=0');

        printWindow.document.write(printContent.innerHTML);
        printWindow.document.close();
        printWindow.focus();
        printWindow.print();
        printWindow.close();
    }
// -->
</script>

2 个答案:

答案 0 :(得分:2)

您的样式表指定了media =“screen”属性。因此,根本没有适用于印刷媒体的样式。

您应该删除该属性或指定单独的css文件,并将属性media设置为“print”以应用于打印媒体。

答案 1 :(得分:0)

最后和尝试后,我可以解决我的问题。它不需要任何其他样式表进行打印。起初我已经删除了缓存的浏览器历史记录,然后添加了一些方向,如方向并与我的潜水对齐,现在所有的东西看起来都没问题。 谢谢你的关注。