html - 使用文本对齐将 HTML 表格导出为 PDF

Question

我想知道是否有一种方法可以使用 jsPDF 导出文本的对齐方式。在导出 excel 文件时更容易，因为它接受表格的内联 css，但在将表格导出为 pdf 时，对齐方式都在左侧。这是我的脚本:

    <script>
    function demoFromHTML() {
        $(document).find('tfoot').remove();

        var pdf = new jsPDF('p', 'pt', 'letter');
        // source can be HTML-formatted string, or a reference
        // to an actual DOM element from which the text will be scraped.
        source = $('#table')[0];

        // we support special element handlers. Register them with jQuery-style 
        // ID selector for either ID or node name. ("#iAmID", "div", "span" etc.)
        // There is no support for any other type of selectors 
        // (class, of compound) at this time.
        specialElementHandlers = {
            // element with id of "bypass" - jQuery style selector
            '#bypassme': function (element, renderer) {
                // true = "handled elsewhere, bypass text extraction"
                return true
            }
        };
        margins = {
            top: 80,
            bottom: 60,
            left: 85,
            width: 522
        };
        // all coords and widths are in jsPDF instance's declared units
        // 'inches' in this case
        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
            var name = document.getElementById("name").innerHTML;
            pdf.save(name);
        }, margins);
        setTimeout("window.location.reload()",0.0000001);

    }
    </script>

我的表是这样的:

 <div id="table">
    <table data-filter="#filter" class="footable" style="background-color:white;">
        <thead>
            <tr>
                <th>Employee ID</th>
                <th>Branch Code</th>
                <th>Client ID</th>
                <th>Amount</th>
                <th>Report Timestamp</th>
            </tr>
        </thead>
        <tbody>
            <?php 
            if(count($result)==0)
            { echo "<tr><td colspan='5' style='text-align:center; font-weight:bold;'>No data available</td></tr>"; }
            else
            {
            for($i=0; $i<count($result); $i++){?>
            <tr>
                <td align="left">1</td>
                <td align="left">2</td>
                <td align="left">3</td>
                <td align="right">4</td>
                <td align="left">5</td>
            </tr>

            <?php }
            }
            ?>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="8">
                    <div class="pagination pagination-centered"></div>
                </td>
            </tr>
        </tfoot>
    </table>
    </div>

Answer 1

目前 jsPDF 默认不支持对齐表格的单元格。相反，您可以使用第三方库(例如 HTMLTable[1])来执行此操作。

[1] : https://github.com/ArtBIT/jsPDF/blob/master/jspdf.plugin.htmltable.js