HTML表格以適當的列寬和字體導出為pdf

Question

我正在使用此導出數據：

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

而tableExport.js中的pdf代碼為：

否則if（defaults.type =='pdf'）{

            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.

之后，您需要在另一個位置更改相同的值：//在行對列行下-

 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）但兩者都應更改為相同的值。