Question

我使用以下方法导出数据：

<a href="#" class="nonPdf" onclick ="$('#whole').tableExport({type:'pdf', escape:'false'});">Direct PDF</a>

虽然tableExport.js中的pdf代码是：

else if（defaults.type ==＆＃39; pdf＆＃39;）{

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

        // Header
        var startColPosition = defaults.pdfLeftMargin;
        $(el).find('thead').find('tr').each(function() {
        console.log(12);
            $(this).filter(':visible').find('th').each(function(index, data) {
                if ($(this).css('display') != 'none') {
                    if (defaults.ignoreColumn.indexOf(index) == -1) {
                    console.log(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(); disable new page
                //page++;
              //  startRowPosition = startRowPosition + 30;
            //}
            rowPosition = (startRowPosition + (rowCalc * 10)) - ((page - 1) * 280);

            $(this).filter(':visible').find('td').each(function(index, data) {
            console.log(index);
            console.log(data);
                if ($(this).css('display') != 'none') {
                    if (defaults.ignoreColumn.indexOf(index) == -1) {
                        //console.log($(this))
                        //console.log($(this))
                        var colPosition = startColPosition + (index * 190);
                        //var colPosition = startColPosition + (index * $(this)[0].clientWidth);
                        //console.log(colPosition);
                        doc.setLineWidth(2)
                        doc.text(colPosition, rowPosition, parseString($(this)));
                        //console.log(doc)
                    }
                }

            });

        });

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

            }

但问题是pdf是否生成格式不正确？该怎么办？

如何以PDF格式正确格式化我的html表格。

Answer 1

我在html5中使用下面的代码生成html表到pdf： -

<a href="#" onClick ="$('#tableID').tableExport({type:'pdf',pdfFontSize:'7',escape:'false'});">PDF</a>

然后我发现在pdf生成时，单词会相互崩溃。

然后，更改tableExport.js的库代码可以解决同样的问题。

我为pdf部分修改的tableExport.js代码如下所示： -

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 * 70);                                   
                                    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 * 70);                                   
                                    doc.text(colPosition,rowPosition, parseString($(this)));
                                }
                            }

                        });                                                         

                    });                 

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

                }

在这里，我换了两个位置： - 在//标题行---

下

var colPosition = startColPosition+ (index * 70);

Previously it was 50,based on words length content in table u change.

之后，您需要在其他位置更改相同的值：在// Row Vs Column lines -

下

 var colPosition = startColPosition+ (index * 70);

这里也从50变为70，

默认情况下，tableEXport.js的代码低于一个：

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');

            }

注意： - 1）此值u应根据每个列字的字长变化。 2）但两者都应该改变相同的值。

HTML表格导出为pdf，具有适当的列宽和字体

1 个答案: