導出到Excel /用網格線打印HTML表格

我目前在我的ASP.NET MVC項目中有一個HTML表格，可以導出到Excel或使用我在網上找到的一些JavaScript打印。這些功能都導出/打印沒有網格線的表格，這使得數據非常難以閱讀，特別是當單元格中有大量文本時。導出到Excel /用網格線打印HTML表格

該表被包裝在一個div#table-wrapper和#printer和#excel是小圖標，當點擊時打印/導出表。這裏是JavaScript：

$("#printer").on("click", function() { 
    var divToPrint = document.getElementById('table-wrapper'); 
    newWin = window.open(""); 
    newWin.document.write(divToPrint.outerHTML); 
    newWin.print(); 
    newWin.close(); 
}); 

$("#excel").on("click", function (e) { 
    e.preventDefault(); 

    var data_type = 'data:application/vnd.ms-excel'; 
    var table_div = document.getElementById('table-wrapper'); 
    var table_html = table_div.outerHTML.replace(/ /g, '%20'); 

    var a = document.createElement('a'); 
    a.href = data_type + ', ' + table_html; 
    a.download = 'exported_table_' + Math.floor(Math.random() * 9999999 + 1000000) + '.xls'; 
    a.click(); 
});

這裏的電子表格的圖片：

這裏的打印預覽的圖片：

如果有人知道我如何添加網格線到這些說將不勝感激！

編輯：我已經將此樣式表添加到我的項目中，並且在打印表上仍然沒有運氣。

@media print { 
    th, td { 
     border: 1px solid #000; 
     padding: 0.5em; 
    } 
}

編輯＃2：這裏的表。

<div id="table-wrapper"> 
    <table class="table table-striped table-bordered" id="results-grid"> 
     <thead> 
      <tr id="results-heading"> 
       <th>Submission #</th> 
       <th>First Named Insured</th> 
       <th>Status</th> 
       <th>TA Name</th> 
       <th>Policy #</th> 
       <th>Branch</th> 
       <th>Underwriter</th> 
       <th>Division</th> 
       <th>Project Name</th> 
       <th>Project Address</th> 
       <th>Project City/State/Zip</th> 
      </tr> 
     </thead> 
     @if (Model.Projects.Any()) 
     { 
      <tbody> 
       @foreach (var item in Model.Projects) 
       { 
       <tr data-id="@item.id" data-subNum="@item.submission_number" data-readOnly="@Model.ReadOnly" class="clickable-row"> 
        @if (Model.Cleared) 
        { 
         <td><a onclick="displayDetails(@item.id)">@Html.DisplayFor(modelItem => item.submission_number)</a></td> 
        } 
        else 
        { 
         <td>@Html.DisplayFor(modelItem => item.submission_number)</td> 
        } 
        <td>@Html.DisplayFor(modelItem => item.first_named_insured)</td> 
        <td>@Html.DisplayFor(modelItem => item.status)</td> 
        <td>@Html.DisplayFor(modelItem => item.ta_name)</td> 
        <td>@Html.DisplayFor(modelItem => item.policy_number)</td> 
        <td>@Html.DisplayFor(modelItem => item.branch)</td> 
        <td>@Html.DisplayFor(modelItem => item.underwriter)</td> 
        <td>@Html.DisplayFor(modelItem => item.division)</td> 
        <td>@Html.DisplayFor(modelItem => item.project_name)</td> 
        <td>@Html.DisplayFor(modelItem => item.project_address)</td> 
        <td>@Html.DisplayFor(modelItem => item.project_city), @Html.DisplayFor(modelItem => item.project_state), @Html.DisplayFor(modelItem => item.project_zip_code)</td> 
       </tr> 
       } 
      </tbody> 
     } 
    </table> 
</div>

來源

2017-07-05 B. Fitzgerald

您是否嘗試過使用CSS媒體查詢指定打印樣式？ – Mark

正如Mark在評論中提到的那樣，您可以針對不同媒體類型使用媒體查詢。這裏的語法添加到您的CSS樣式表：

@media print { 
/* CSS code that adds lines or bottom border to table */ 
}

您也可以通過在HTML中像這樣的頭定義它們爲不同媒體不同的樣式：

<link rel="stylesheet" media="print" href="print.css">

來源

2017-07-05 15:45:38

我以前試過，它沒有工作，但我再次嘗試只是爲了看看我是否犯了一個錯誤，這次沒有運氣。我用CSS代碼編輯了我的帖子，讓我知道如果你看到任何明顯的錯誤:) –

明白了 - 嘗試添加！重要的;在你的CSS線後，這是否做到了？ –

'！important'沒有運氣：（ –

導出到Excel /用網格線打印HTML表格

回答

相關問題