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();
});

这是电子表格的图片：

这是打印预览的图片：

如果有人知道如何为这些添加网格线，那将非常感激！

编辑：我已将此样式表添加到我的项目中，但在打印表上仍然没有运气。

@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>

Answer 1

正如Mark在评论中提到的，您可以对不同的媒体类型使用媒体查询。这是添加到CSS样式表的语法：

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

您可以通过在html的头部定义不同媒体的不同样式表，如下所示：

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

Answer 2

我认为您的问题是由于以下事实造成的：打印页面上没有CSS（#bootstrap），“自从有了新标签后，它显然与当前页面没有关系”。因此，尝试像这样修改它：

newWin = window.open("");
var htx = '<link rel="stylesheet" href="http://location_of_css" />';
htx += divToPrint.outerHTML;
newWin.document.write(htx);
newWin.print();

希望有帮助

使用网格线

2 个答案: