Question

我正在尝试将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>

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

JavaScript导出/打印为PDF

1 个答案: