Экспорт Javascript / Печать в PDF - PullRequest
Новая
       2

Экспорт Javascript / Печать в PDF

0 голосов
/ 08 сентября 2018

Я пытаюсь экспортировать / распечатать div в PDF, однако формат "div" в PDF - это не то, что мне действительно нужно. У меня две проблемы:

1-я задача:

Когда я нажимаю кнопку печати, она открывает страницу уже с pdf, но в первой строке она заполняет все. Смотрите картинку, чтобы понять, что я имею в виду.

2-я задача

В div я включил ДЕЙСТВИЯ ... Я хочу, чтобы вы делали экспорт / печать ... Этот "раздел удален и не появляется, потому что он не нужен. Смотрите изображение, чтобы увидеть, что я хочу.

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>

1 Ответ

0 голосов
/ 08 сентября 2018

Вы удаляете тег "<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();
    });
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...