Question

在我的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>

我有一个按钮＆＃39;导出为PDF＆＃39;如果工作正常，但失去设计，它会导出所有样式。

这是使用jspdf库将表导出为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中保留表格的原始设计？或者至少通过将表格导出为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
    );
}

保持“出口到pdf＆＃39;的风格”。 html表

1 个答案: