Javascript 导出/打印到 PDF答案

【问题标题】：Javascript Export/Print to PDFJavascript 导出/打印到 PDF
【发布时间】：2018-09-08 10:17:08
【问题描述】：

我正在尝试将 div 导出/打印为 PDF，但是 PDF 中的“div”格式并不是我真正想要的。我有两个问题：

第一个问题：

当我单击打印按钮时，它会打开一个已包含 pdf 的页面，但第一行会填满所有内容。看图看看我的意思。

第二个问题

在 div 中，我已经包含了 ACTIONS ...我希望您执行导出/打印 ...此“部分已删除并且不会出现，因为它不是必需的。查看图片以查看我想要的内容。

HTML

<table id="table_id" class="table">
    <thead>
        <tr>
            <th>
                ID_Cliente
            </th>
            <th>
                Nome
            </th>
            <th>
                Morada
            </th>
            <th>
                Telemóvel
            </th>
            <th>
                Email
            </th>
            <th>
                Ações
            </th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.ID_Cliente)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Nome)
                </td>
                @if (User.IsInRole("Administrador"))
                {
                <td>
                    @Html.DisplayFor(modelItem => item.Morada)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Telemovel)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Email)
                </td>
                }
                else
                {
                <td>
                    xxxxxxx
                </td>
                <td>
                    xxxxxxx
                </td>
                <td>
                    xxxxxxx
                </td>
                }
                <td class="buttons">
                    <div class="buttons" role="group" aria-label="Botões">
                        <a href='@Url.Action("Edit","Clientes",new { id=item.ID_Cliente }, Request.Url.Scheme)' class="btn btn-sm btn-warning"><span class="glyphicon glyphicon-edit"></span> Editar</a>
                        <a href='@Url.Action("Details","Clientes", new { id=item.ID_Cliente }, Request.Url.Scheme)' class="btn btn-sm btn-primary"><span class="glyphicon glyphicon-info-sign"></span> Detalhes</a>
                        <a href='@Url.Action("Delete","Clientes", new { id=item.ID_Cliente }, Request.Url.Scheme)' class="btn btn-sm btn-danger"><span class="glyphicon glyphicon-trash"></span> Eliminar</a>
                    </div>
                </td>
            </tr>
        }
    </tbody>
</table>

JavaScript

<script type="text/javascript">
        $("#btnPrint").on("click", function () {
            var divContents = $("#table_id").html();
            var printWindow = window.open('', '', 'height=400,width=800');
            printWindow.document.write('<html><head><title>Lista de Clientes</title>');
            printWindow.document.write('</head><body >');
            printWindow.document.write(divContents);
            printWindow.document.write('</body></html>');
            printWindow.document.close();
            printWindow.print();
        });
    </script>

【问题讨论】：

标签： javascript html asp.net-mvc

【解决方案1】：

您正在从表格元素中剥离“<table>”标签，该标签应位于 divContents 变量周围，以便表格正确显示。

对于最后一列，您可以在获取 divContents 变量之前简单地隐藏它们，然后再显示它们。如果您愿意，您还可以克隆 table 元素并删除最后一列，然后在克隆的元素上使用 html()。

为了简单地隐藏/显示最后一列，您的代码将是：

    $("#btnPrint").on("click", function () {
        $("#table_id th:last-child, #table_id td:last-child").hide();
        var divContents = $("#table_id").html();
        $("#table_id th:last-child, #table_id td:last-child").show();
        var printWindow = window.open('', '', 'height=400,width=800');
        printWindow.document.write('<html><head><title>Lista de Clientes</title>');
        printWindow.document.write('</head><body >');
        printWindow.document.write('<table>' + divContents + '</table>');
        printWindow.document.write('</body></html>');
        printWindow.document.close();
        printWindow.print();
    });

【讨论】：