Как оформить таблицу окна печати? - PullRequest
Новая
       1

Как оформить таблицу окна печати?

0 голосов
/ 22 октября 2018

Я хочу напечатать таблицу html сетки, нажав кнопку «печать», чтобы при печати нижеприведенным кодом javascript, Получение таблицы простых строк и столбцов, Как стилизовать таблицу окна печати?Я пробовал, как показано ниже, 

function printData() {        
        var myDiv = document.getElementById('tablerecords');
        var newWindow = window.open('', 'SecondWindow', 'toolbar=0,stat=0');//
        var style = newWindow.document.createElement('link');
        style.type = "text/css";
        style.rel = "stylesheet";
        style.href = "~/Styles/PrintTableStyle.css";
        style.media = "all";
        newWindow.document.write("<html><body "+
            " önload='window.print()'>" +
            myDiv.outerHTML +
            "</body></html>");
        newWindow.document.getElementsByTagName("head")[0].appendChild(style);
        newWindow.print();
        newWindow.document.close();
    }

и стиль для таблицы окна печати ниже 

#tablerecords {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

    #tablerecords td, #tablerecords th {
        border: 1px solid #ddd;
        padding: 8px;
    }

    #tablerecords tr:nth-child(even) {
        background-color: #f2f2f2;
    }

    #tablerecords tr:hover {
        background-color: #ddd;
    }

    #tablerecords th {
        padding-top: 12px;
        padding-bottom: 12px;
        text-align: left;
        background-color: Black;
        color: white;
    }

1 Ответ

0 голосов
/ 23 октября 2018

Я решил сам, открыв окно печати на той же странице.а также решил скрыть столбец действий в окне печати и предотвратить сбой 2-го нажатия кнопки печати путем перезагрузки текущего окна, ниже мой код. 

function printData() {
        var divElements = document.getElementById('tablerecords').outerHTML;
        var oldPage = document.body.innerHTML;
        document.body.innerHTML = "<html><head><title></title></head><body>" + 
        divElements + "</body>";
        $("#tablerecords th:last-child, #tablerecords td:last-child").hide();
        window.print();
        document.body.innerHTML = oldPage;
        location.reload();
    }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...