Question

我在图1中有一个如下页面，但当我点击打印该页面时，它在打印页面上显示不正确。

<code>layout</code>

JS：

$("#printBtn").click(function(){
    printcontent($("#YearWise").html());
});

function printcontent(content)
{
    var mywindow = window.open('', '', '');
    mywindow.document.write('<html><title>Print</title><body>');
    mywindow.document.write(content);
    mywindow.document.write('</body></html>');
    mywindow.document.close();
    mywindow.print();
    return true;
}

HTML：

<button id="printBtn">Click Print</button>

<div id="YearWise" style="display: none">
       <p style="position: absolute; color: rgb(172, 166, 166); font-family: calibri; font-size: 25px; font-variant: small-caps; font-weight: 100; margin-left: 514px; padding-top: 75px;">Report</p>
       <span style="position: absolute; color: rgb(138, 138, 138); font-family: calibri; font-size: 31px; font-variant: small-caps; margin-left: 466px; padding-top: 42px;">Year Wise</span>

     <div id="main" style="display: block; background-color: rgb(228, 228, 228)" 
     <input id="ChangeYear" class="date-pickerY" style="text-transform:uppercase; font-family: calibri; font-size: 18px; margin-top: -135px; margin-left: 416px; width: 160px; height: 24px; border: 1px solid #717271; color: rgb(68, 68, 68); padding-left: 6px" />
  <img style="margin-left: -32px; margin-top: -134px; cursor: pointer; height: 28px;" src="../../img/Date.png" onClick="OpenDatePicker('ChangeYear')"/>

<ul id="holder" style="height: 785px; width: 1059px; margin-left: -25px; margin-top: -32px; margin-right: -26px; border-radius: 0px;">
<li style="width: 1021px; height: 981px; background-color: whitesmoke; border-radius: 0px; margin-top: 5px; margin-left: 0px; margin-right: 0px; padding-bottom: 94px;">

 <br>

<div id="YearTable">
     <div class="block">
</div>
</div>

</li>
</ul>
</div>
</div>

我为演示提供jsfiddle。如果你能帮助别人，那将非常感激。

Jsfiddle

现在问题：

<code>sample picture</code>

Answer 1

我认为您的css样式不包含在内容中，创建一个css文件，在其中编写所有内联样式并将其包含为document.write("<link rel="stylesheet" href="" />");

此行有语法错误：

mywindow.document.write("<link rel="stylesheet" type="text/css" href="yourpath\style.css" />");

将其更改为：

mywindow.document.write('<link rel="stylesheet" type="text/css" href="yourpath\style.css" />');

或做正确的逃避

mywindow.document.write("<link rel=\"stylesheet\" type=\"text/css\" href=\"yourpath\style.css\" />");

OR

只需包含一个样式表，其中包含打印内容的所有内联样式，并将其包含在

中

<link rel="stylesheet" type="text/css" href="style.css" media="print">

如果我用简单的话解释

<link rel="stylesheet" type="text/css" href="main.css"> // this css will be used on page
<link rel="stylesheet" type="text/css" href="style.css" media="print"> // this css will be used if you try to print your page

打印页面调整

1 个答案: