Сохранение стилей HTML-таблицы, экспортированной в pdf

В моем проекте MVC у меня есть следующая таблица html:

<div id="tableToPrint">
    <table border="0" id="tbl" cellspacing="25">
        <tr class="te">
            <th align="left">DATE</th>
            <th align="left">METHOD</th>
            <th align="left">DEPOSIT</th>
            <th align="left">WITHDRAWAL</th>
        </tr>
        <!-- ko foreach: accountInfo -->
        <tr>
            <td valign="top"><span data-bind="text: moment(new Date(orderDate())).format('MM/DD/YYYY')"></span></td>
            <td valign="top"><span data-bind="text: type"></span> </td>
            <td class="deposit" valign="top"><span data-bind="text: $root.formatCurrency(deposit())" id="deposit"></span></td>
            <td valign="top"><span data-bind="text: $root.formatCurrency(withdrawal())"></span> </td>
        </tr>
        <!-- /ko -->
        <tr class="last">
            <td valign="top">&nbsp;</td>
            <td valign="top">&nbsp;</td>
            <td valign="top"><span data-bind="text:  $root.totalDeposit()"></span></td>
            <td valign="top"><span data-bind="text:  $root.totalWithdrawal()"></span></td>
        </tr>
    </table>
</div>

У меня есть кнопка «Экспорт в PDF», которая работает правильно, но теряет дизайн, она экспортируется без всех стилей.

Это код mt javascript, который экспортирует таблицу в pdf с помощью библиотеки jspdf:

 self.exportToPdf = function () {
    var newPdf = new jsPDF();
    var specialElementHandlers = {
        '#tableToPrint': function (element, renderer) {
            return true;
        }
    };
    // newPdf.setFontSize(16);
    var html = $("#tableToPrint").html();
    var margins = {
        top: 80,
        bottom: 60,
        left: 40,
        width: 522
    };
    newPdf.fromHTML(
        html, // HTML string or DOM elem ref.
        margins.left, // x coord
        margins.top, { // y coord
            'width': margins.width, // max width of content on PDF
            'elementHandlers': specialElementHandlers
        });
    newPdf.save("YourTable.pdf");
}

Есть ли способ сохранить исходный дизайн таблицы в экспортированном pdf? Или, по крайней мере, спроектировать его с помощью кода javascript, который экспортирует таблицу в pdf? Заранее спасибо.


javascript jspdf export-to-pdf knockout.js
person user3378165    schedule 21.09.2016    source источник
comment
Я не уверен, какие настройки нужно сделать для вашего JsPdf плагина, потому что я не вижу никакой документации по нему. Но очевидные причины, по которым есть несколько плагинов, в том, что они требуют всего styles to be given inline, а не класса. Некоторые плагины делают снимок экрана и превращают его в PDF-файл, в котором не будет проблем со стилями.   -  person Rajshekar Reddy    schedule 21.09.2016
comment
@ user3378165 Есть такая же проблема. Не могли бы вы сказать мне, пожалуйста, насколько я понимаю из ответа ниже, нет возможности автоматически экспортировать дизайн таблицы html? Без настроек стиля js. Например, если я точно не знаю, какой дизайн будет в таблице html, но хочу экспортировать его в pdf?   -  person kliukovking    schedule 20.11.2017
comment
@RoGGeR Я не смог понять, как экспортировать таблицу с оригинальным дизайном, пришлось спроектировать ее самостоятельно.   -  person user3378165    schedule 20.11.2017
comment
@ user3378165 ок, спасибо за ответ!)   -  person kliukovking    schedule 21.11.2017

Ответы (1)


arrow_upward
1
arrow_downward

Это решило мою проблему:

self.exportToPdf = function () {
    var pdf = new jsPDF('p', 'pt', 'letter');
    source = $('#tableToPrint')[0];
    specialElementHandlers = {
        '#bypassme': function (element, renderer) {
            return true
        }
    };
    margins = {
        top: 80,
        bottom: 60,
        left: 40,
        width: 522
    };
    pdf.fromHTML(
        source, // HTML string or DOM elem ref.
        margins.left, // x coord
        margins.top, { // y coord
            'width': margins.width, // max width of content on PDF
            'elementHandlers': specialElementHandlers
        },
     function (dispose) {
         // dispose: object with X, Y of the last line add to the PDF 
         //          this allow the insertion of new lines after html
         pdf.save('YourTable.pdf');
     }, margins
    );
}
person user3378165    schedule 04.11.2016