保留“导出为 pdf”html 表的样式答案

【问题标题】：Keep styles of an 'exported to pdf' html table保留“导出为 pdf”html 表的样式
【发布时间】：2016-09-21 07:08:49
【问题描述】：

在我的 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”按钮，它可以正常工作，但 失去了设计，它会在没有所有样式的情况下导出。

这是使用 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 代码来设计它？提前致谢。

【问题讨论】：

我不确定您的JsPdf 插件需要进行哪些设置，因为我没有看到它的任何文档。但是很少有插件的明显原因是它们需要所有 styles to be given inline 而不是类。一些插件会截取屏幕快照并使其成为 PDF 格式，不会出现样式问题
@user3378165 有同样的问题。您能否告诉我，正如我从下面的答案中了解到的那样，无法自动导出 html 表格的设计？没有 js 样式设置。例如，如果我不确切知道 html 表格中的设计是什么，但我想将其导出为 pdf？
@RoGGeR 我无法弄清楚如何使用原始设计导出表格，必须自己设计。
@user3378165 好的，谢谢你的回答！）

标签： javascript knockout.js jspdf export-to-pdf

【解决方案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
    );
}

【讨论】：