Excelにエクスポート/グリッド線でHTMLテーブルを印刷

Question

現在、私はASP.NET MVCプロジェクトにHTMLテーブルを持っています。これはExcelにエクスポートすることも、オンラインで見つかったJavaScriptを使用して印刷することもできます。これらの機能はともに、グリッド線を使用せずに表をエクスポート/印刷するため、特にセルに大量のテキストがある場合は、データを読みにくくなります。

テーブルは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(); 
}); 

ここでは、スプレッドシートの画像です：

ここで、印刷プレビューの絵です：

誰かが私は、これらにグリッド線を追加する方法を知っている場合大変感謝しています！

EDIT：このスタイルシートをプロジェクトに追加しましたが、プリントテーブルにはまだ運がありません。

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

EDIT＃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> 

Answer 1

コメントに記載されているマークは、異なるメディアタイプのメディアクエリを使用できます。ここにあなたのCSSスタイルシートに追加する構文は次のとおりです：

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

あなたはこのようなあなたのhtmlの頭の中でそれらを定義することにより、異なるメディアごとに異なるスタイルシートも持つことができます。

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