保留 'exported to pdf' html table 的样式

Question

在我的 MVC 项目中，我有以下 html table:

<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>

我有一个按钮 'Export to PDF' 可以正常工作，但 失去了设计 ，导出时没有所有样式。

这是使用 jspdf 库将 table 导出为 pdf 的 mt javascript 代码：

 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 中是否可以保留 table 的原始设计？或者至少通过将 table 导出为 pdf 的 javascript 代码来设计它？提前致谢。

Answer 1

解决了我的问题：

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

保留 'exported to pdf' html table 的样式

Keep styles of an 'exported to pdf' html table

javascript

export-to-pdf

knockout.js

jspdf