使用带格式化表格数据的jsPDF创建pdf

Question

我能够使用下面的脚本从html表格生成PDF文件： 但我得到的所有列数据是逐行。

请帮我生成PDF文件作为表格格式化的方式。（与列边框，边缘或填充，头）在此脚本

我用jsPDF LIB脚本生成一个HTML表格PDF 。

var pdf = new jsPDF('p', 'pt', 'letter') 
    , source = $('#TableId')[0] 
    , specialElementHandlers = { 
     // element with id of "bypass" - jQuery style selector 
     '#bypassme': function(element, renderer){   
      return true 
     } 
    } 

    , margins = { 
      top: 20, 
      bottom: 20, 
      left: 30, 
      width: 922 
     }; 


    pdf.fromHTML(
     source // HTML string or DOM elem ref. 
     , margins.left // x coord 
     , margins.top // y coord 
     , { 
      'width': margins.width // max width of content on PDF 
      , 'elementHandlers': specialElementHandlers 
     }, 
     function (dispose) {   
      pdf.save('Test.pdf'); 
     }, 
     margins 
    ) 

编辑：

我曾尝试以下功能这个样品过，但我想起来了空的PDF文件。

function exportTabletoPdf() 
{ 
    var doc = new jsPDF('p','pt', 'a4', true); 
    var header = [1,2,3,4]; 
    doc.table(10, 10, $('#test').get(0), header, { 
    left:10, 
    top:10, 
    bottom: 10, 
    width: 170, 
    autoSize:false, 
    printHeaders: true 
    }); 
    doc.save('sample-file.pdf'); 
} 

Answer 1

你必须使用像 - doc.setLineWidth（2）;等。

的边境线。请看看下面的示例代码

How to set column width for generating pdf using jsPDF

Answer 2

尝试此方法删除最后一个参数 “真”：

var doc = new jsPDF('p','pt', 'a4', true); 

Answer 3

$(".gridview td").each(function() { 
     var value = $(this).html(); 
     doc.setFontSize(8); 

     if (count == 1) { 
      if (height > 278) { 
       doc.rect(10, inc, 24, 8); 
       doc.rect(34, inc, 111, 8); 
       doc.rect(145, inc, 15, 8); 
       doc.rect(160, inc, 20, 8); 
       doc.rect(180, inc, 23, 8); 

       doc.addPage(focus); 
       doc.setLineWidth(0.5); 
       inc = 15; 
       height = 18; 
      } 


      doc.rect(10, inc, 24, 8); 
      doc.text(value, 11, height);   
    } 
    if (count == 2) { 
      doc.rect(34, inc, 111, 8); 
      var splitdesc = doc.splitTextToSize(value, 100); 
      doc.text(splitdesc, 35, height); 
    } 
    if (count == 3) { 
     doc.rect(145, inc, 15, 8); 
     doc.text(value, 147, height); 
     qty = value; 
    } 
    if (count == 4) { 
     doc.rect(160, inc, 20, 8); 
     doc.text(value, 163, height); 

     amt = value; 
    } 
    if (count == 5) { 
     doc.rect(180, inc, 23, 8); 

     tot = parseInt(qty) * parseFloat(amt); 
     doc.text("" + tot, 182, height); 
     count = 0; 

     height = height + 8; 
     netamt = netamt + parseFloat(tot); 

     inc = parseInt(inc) + 8; 
     doc.rect(10, inc, 24, 8); 
     doc.rect(34, inc, 111, 8); 
     doc.rect(145, inc, 15, 8); 
     doc.rect(160, inc, 20, 8); 
     doc.rect(180, inc, 23, 8); 
    } 
    count = count + 1; 
}); 

Answer 4

我花了很多的时间寻找我的表的一个很好的代表，然后我发现这个插件（https://github.com/simonbengtsson/jsPDF-AutoTable），它很好用，包括主题，rowspan，colspan，提取数据m html，适用于json，您还可以个性化您的标题并使其成为横向。 下面的图片是一个例子：

Answer 5

导出HTML DIV的内容包括使用jspdf 脚本纯文本和表格数据包括https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js

function download_DIVPdf(divid) { 
    var pdf = new jsPDF('p', 'pt', 'letter'); 
    var pdf_name = 'PostMode-'+om+'.pdf'; 
    // source can be HTML-formatted string, or a reference 
    // to an actual DOM element from which the text will be scraped. 
    htmlsource = $('#'+divid)[0]; 

    specialElementHandlers = { 
     // element with id of "bypass" - jQuery style selector 
     '#bypassme': function (element, renderer) { 
      // true = "handled elsewhere, bypass text extraction" 
      return true 
     } 
    }; 
    margins = { 
     top: 80, 
     bottom: 60, 
     left: 40, 
     width: 522 
    }; 

    pdf.fromHTML(
    htmlsource, // HTML string or DOM elem ref. 
    margins.left, // x coord 
    margins.top, { // y coord 
     'width': margins.width, // max width of content on PDF 
     'elementHandlers': specialElementHandlers 
    }, 

    function (dispose) {     

     pdf.save(pdf_name); 
    }, margins); 
}