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没有被应用到打印

回答

相关问题