【问题标题】:Html Table Export plugin not working properlyHtml Table Export 插件无法正常工作
【发布时间】:2014-11-20 12:08:14
【问题描述】:

我有一个 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'
        }); 
    });

【问题讨论】:

  • 你能在这里添加一个小提琴或你的代码吗?否则很难帮助你。
  • 请稍等,让我编辑问题
  • @twain 我已经编辑了问题
  • 好像是插件的一个bug,我会试着找出为什么这不起作用
  • 非常感谢。你真好

标签: javascript jquery pdf plugins


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


        }

【讨论】:

  • OMG ... 那是解决方案吗?哦,男孩,我必须猜测列和大小?
  • 恐怕是。但是现在您知道错误出在哪里,您可以修改插件以使其动态化,并只为每列提供必要的宽度。
  • 如何动态提供列宽以便自动调整
猜你喜欢
  • 2016-04-19
  • 1970-01-01
  • 2012-05-28
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2013-03-08
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多