Question

我有一个html表。我想将其下载为pdf文件。我正在尝试使用html表导出插件。但该插件无法正常工作。表中有九列。所有这些都不在pdf文件中。其中只有四个在pdf文件中。以前发生过这件事吗？我现在被困了好几天了。提前谢谢。

我的HTML

<table id="table-id">
        <thead>         
            <tr>
                <th>Country</th>
                <th>Population</th>
                <th>Date</th>
                <th>Age</th>
                <th>Name</th>
                <th>Shift</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Chinna</td>
                <td>1,363,480,000</td>
                <td>March 24, 2014</td>
                <td>19.1</td>
                <td>Shamir</td>
                <td>morning</td>
            </tr>
            <tr>
                <td>India</td>
                <td>1,241,900,000</td>
                <td>March 24, 2014</td>
                <td>17.4</td>
                <td>Shamir</td>
                <td>morning</td>
            </tr>
            <tr>
                <td>United States</td>
                <td>317,746,000</td>
                <td>March 24, 2014</td>
                <td>4.44</td>
                <td>Shamir</td>
                <td>morning</td>
            </tr>
            <tr>
                <td>Indonesia</td>
                <td>249,866,000</td>
                <td>July 1, 2013</td>
                <td>3.49</td>
                <td>Shamir</td>
                <td>morning</td>
            </tr>
            <tr>
                <td>Brazil</td>
                <td>201,032,714</td>
                <td>July 1, 2013</td>
                <td>2.81</td>
                <td>Shamir</td>
                <td>morning</td>
            </tr>
        </tbody>
    </table>
<button id="pdf-button">PDF</button>

我的javascript

$('#pdf-button').on('click', function(e){
        $('#table-id').tableExport({
            type:'pdf',
            escape:'false'
        }); 
    });

Answer 1

问题似乎是下面的pdf代码部分中的那两部分：

var colPosition = startColPosition + (index * 50);

* 50是列宽，如果有超过4列，则它们不可见，因为它们不再出现在页面上。它有点脏，但您可以更改该值，因此您的所有列都适合页面，然后更改fontSize直到它看起来没问题。否则，您可以在插件中添加一个选项，您可以在其中设置此值。

 else if (defaults.type == 'pdf') {

            var doc = new jsPDF('p', 'pt', 'a4', true);
            doc.setFontSize(defaults.pdfFontSize);

            // Header
            var startColPosition = defaults.pdfLeftMargin;
            $(el).find('thead').find('tr').each(function() {
                $(this).filter(':visible').find('th').each(function(index, data) {
                    if ($(this).css('display') != 'none') {
                        if (defaults.ignoreColumn.indexOf(index) == -1) {
                            var colPosition = startColPosition + (index * 50);
                            doc.text(colPosition, 20, parseString($(this)));
                        }
                    }
                });
            });


            // Row Vs Column
            var startRowPosition = 20;
            var page = 1;
            var rowPosition = 0;
            $(el).find('tbody').find('tr').each(function(index, data) {
                rowCalc = index + 1;

                if (rowCalc % 26 == 0) {
                    doc.addPage();
                    page++;
                    startRowPosition = startRowPosition + 10;
                }
                rowPosition = (startRowPosition + (rowCalc * 10)) - ((page - 1) * 280);

                $(this).filter(':visible').find('td').each(function(index, data) {
                    if ($(this).css('display') != 'none') {
                        if (defaults.ignoreColumn.indexOf(index) == -1) {
                            var colPosition = startColPosition + (index * 50);
                            doc.text(colPosition, rowPosition, parseString($(this)));
                        }
                    }

                });

            });
            // Output as Data URI
            doc.output('datauri');


        }

Html表导出插件无法正常工作

1 个答案: