Javascript導出/打印到PDF

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變量之前將其隱藏，然后再顯示它們。 如果您願意，也可以克隆表格元素並刪除最后一列，然后在克隆的元素上使用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 個解決方案

解決方案1
0 已采納 2018-09-08 12:30:40

Javascript導出/打印到PDF

問題描述

1 個解決方案

解決方案1 0 已采納 2018-09-08 12:30:40

解決方案1
0 已采納 2018-09-08 12:30:40