Question

我在 asp.net视图中有一个动态生成的表我使用相同的代码打印另一个表，它打印..行和所有..
但是当我尝试打印这个表时，我只得到文本而没有html
这是我的代码..（我没有发布截图的声誉）

@model AECS1.Controllers.DailyReportModel
   @{
   ViewBag.Title = "AECS : Daily Report";
}
  <html>
<head>
 <style >
   table.gridtable {
    font-family: verdana,arial,sans-serif;
    font-size: 11px;
    color: #333333;
    border-width: 1px;
    border-color: #666666;
    border-collapse: collapse;

    width: 400px;
}

   table.gridtable th {

        padding: 8px;
         border: 1px solid #666666 ;

        background-color: #23819C;
        color:white;
    }

      table.gridtable td {
        border-width: 1px;
        padding: 8px;
        border-style: solid;
        border-color: #666666;

    }
     .aclass {
        background-color: #23819C;
        color: white;
        font-size: 25px;
        padding: 2px 2px 2px 2px;
        height: 5%;
        display: block;
        text-decoration: none;
        margin-left:10%;
        width:10%;

    }

</style>
<style media="print">
  td,th
  {color:black}
</style>
     <script>
         function printer() {
             var divToPrint = document.getElementById("printable");
             newWin = window.open("");
             newWin.document.write("<h1>Weekly Report</h2>")
             newWin.document.write(divToPrint.outerHTML);
             newWin.print();
             newWin.close();
         }
    </script>
</head>
<body>
 <div style="text-align:center">
    <h2>Daily Report</h2>
 <button id="print" onclick="printer()" class="aclass">print</button>
<h3>@ViewBag.date</h3>
@using (Html.BeginForm())
{
    @Html.TextBoxFor(m => m.Report_Date, new { @class = "input1", @id = "datepicker", @readonly = "readonly" })
    <br />
    <input type="submit" value="Get Report" />
    @Html.ValidationSummary()
}
@{
    int i = 0;
}
<div id="printable">
<table align="center" >

        @foreach (var item in ViewBag.list){
        i++;
        if (@i % 3 == 1)
        {
            @:<tr>
        }

        <td>
            <table class="gridtable">
                <tr>
                    <th>
                        UNIT NAME
                    </th>
                    <th>
                        DOCTOR NAME
                    </th>
                    <th>
                        STATUS
                    </th>
                </tr>
                @foreach (var item1 in item)
                {
                    <tr>
                        <td>
                            @item1.UnitName
                        </td>
                        <td>
                            @item1.dr_name
                        </td>
                        <td>
                            @item1.info
                        </td>
                    </tr>
                }
            </table>
        </td>

   if (@i % 3 == 0)
        {
            @:</tr>
        }


}     
</table>
</div>
</div>
</body>   
</html>

Answer 1

将css存储在外部样式表中，比如style.css 链接到打印窗口。

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

或

在要打印的DIV（＆lt; div id =“printable”＆gt;）中写下CSS。

在你的代码中，css部分在外面。它应该在div中

Answer 2

我遇到了同样的问题，我有问题为什么它不打印桌边框？这是因为CSS：“border-collapse：collapse;”

所以我所做的就是使用@media并将CSS编写如下，用于屏幕和打印。

在您的情况下，请执行：

@media screen {
   table.gridtable 
   {
       font-family: verdana,arial,sans-serif;
       font-size: 11px;
       color: #333333;
       border-width: 1px;
       border-color: #666666;
       border-collapse: collapse;
       width: 400px;
   }
}

和打印：

@media print{
    table.gridtable {
       font-family: verdana,arial,sans-serif;
       font-size: 11px;
       color: #333333;
       border-width: 1px;
       border-color: #666666;
       width: 400px;
    }
}

在print中删除CSS行 border-collapse：collapse; 因为这是印刷中边界消失的原因。希望这对你有用。

Answer 3

表格正在被复制到一个新窗口，并且您的 CSS 没有被保留。将一些相关的 CSS 传递到 document.write() 方法中的新窗口。

喜欢这个

$("#printtbl").on('click', function() {
    var printContents = document.getElementById('print-table').innerHTML;
    var originalContents = document.body.innerHTML;

// Your Css
  var htmlToPrint = '' +
    '<style type="text/css">' +
    'table {' +
      'border-spacing: 0;' +
      'border-collapse: collapse;' +
      '}'+
    'table tr {' +
    'border-top: 1px solid gray !important;' +
    '}' +
    '</style>';

    htmlToPrint += printContents;
    var printWindow = window.open('', 'PRINT');
    printWindow.document.write(htmlToPrint);
    printWindow.print();
    printWindow.close();
}

打印时无法显示表格和单元格边框

3 个答案: