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

Question

点击打印按钮后，在打印 View 中可以看到页面样式不正确。你可以看到演示:

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>

Answer 1

您的样式表指定了属性 media="screen"。因此，根本没有适用于打印媒体的样式。

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