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

HTML table export to pdf with proper column width and Fonts

本文关键字：字体 pdf 表格 HTML      更新时间：2023-09-26

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

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

而tableExport.js中的pdf代码是：

else 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格式不正确吗？该怎么办？

如何将我的html表格正确格式化为pdf。

我在html5中使用以下代码将html表生成为pdf：-

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

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

然后，更改tableExport.js的库代码对我来说解决了同样的问题。

我为pdf部分修改的表Export.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） 但是两者都应该以相同的值来改变。

相关文章：