使用帶格式化表格數據的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); 
}