CSS沒有被應用到打印

我工作的地方產生的收據和打印的應用程序。爲了完成這個打印，我創建了一個表格，將其打印並打印出來。我不想打印整個頁面，所以我只選擇這個包含要打印的表格的div。

<script language="javascript" type="text/javascript"> 
    function printData() { 


     var divToPrint = document.getElementById("inv"); 
     newWin = window.open(""); 
     newWin.document.write(divToPrint.outerHTML); 
     newWin.print(); 
     newWin.close(); 

    } 
</script>

問題

問題是，我不能讓CSS從頁面到打印堅持。

我試過了什麼？

我試圖導入打印CSS頁面，如下所示，並沒有做任何事情。同樣在主文件中，如果我將<style>更改爲<style media=print>，CSS將按預期從我的表中刪除，但不會應用於我的打印。

如果我能指出正確的方向，將不勝感激。

問候

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


    .invoice-box { 
    max-width: 800px; 
    margin: auto; 
    padding: 30px; 
    border: 1px solid #eee; 
    box-shadow: 0 0 10px rgba(0, 0, 0, .15); 
    font-size: 16px; 
    line-height: 24px; 
    font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; 
    color: #555; 
    background-color:green; 
    } 

    .invoice-box table { 
    width: 100%; 
    line-height: inherit; 
    text-align: left; 
    } 


     </style> 
</head> 
    <body > 
    <div class="invoice-box" id="inv"> 
     <table style="background-color:blue" cellpadding="0" cellspacing="0" border="1" id="labelData" width:500px;> 
      <tr class="top"> 
       <td colspan="2"> 
        <table> 
         <tr> 
          <td class="title"> 
           <img src="" style=" width:75px;"> 
          </td> 

          <td> 
           Date Received :@Html.DisplayFor(model => model.hiddenDate) 

          </td> 
         </tr> 
        </table> 
       </td> 
      </tr>

主題print.css

@media print { 

    .invoice-box { 
     max-width: 800px; 
     margin: auto; 
     padding: 30px; 
     border: 1px solid #eee; 
     box-shadow: 0 0 10px rgba(0, 0, 0, .15); 
     font-size: 16px; 
     line-height: 24px; 
     font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; 
     color: #555; 
     background-color: green; 
    } 

     .invoice-box table { 
      width: 100%; 
      line-height: inherit; 
      text-align: left; 
     } 
}

來源

2017-04-17 Sleep Paralysis

你的新窗口是一個單獨的環境。您需要複製渲染文檔所需的所有內容。把它想象成構建一個完整的網頁。就目前而言，你只是複製一個html片段。 – Ouroborus

@Ouroborus哦，我明白了，在創建新窗口之前，我怎麼「複製」或設置樣式... –

您使用'document.write（）'添加html的方式相同。 – Ouroborus

您可以嘗試通過腳本添加樣式表到爲newwin變量，將您的內容之前。

這裏有一個明顯的例子：

newWin.document.write('<html><head><title>Print Page!</title><link rel="stylesheet" type="text/css" href="path-to-your.css"></head><body>'); 
newWin.document.write(divToPrint.outerHTML); 
newWin.document.write('</body></html>');

來源

2017-04-17 02:53:19 heraldo

CSS沒有被應用到打印

回答

相關問題