2017-03-08 74 views
1

我有一個需求在哪裏需要生成一個由表格組成的PDF文件。 我能夠生成PDF。但是,我想將樣式應用於邊框。目前邊界呈黑色。我想將顏色更改爲白色。我該怎麼做?如何在JSPDF中將pdf格式應用於pdf。

這是我點擊「導出到PDF」鏈接時調用的js函數。

function exportToPDF(tableId){ 
    var doc = new jsPDF('p','pt','a4'); 

    var table = document.getElementById(tableId); 
    doc.cellInitialize(); 

    for(var i=0; i<table.tBodies[0].childNodes.length; i++){ 
     for(var j=0; j<table.tBodies[0].childNodes[i].childNodes.length; j++){ 
      doc.setFont("'Open Sans', san-serif"); 
      doc.setFontType("bold"); 
      doc.setFontSize(14); 
      doc.setTextColor(43,56,65); 
      var styleName = table.tBodies[0].childNodes[i].childNodes[j].className; 
      var cellWidth = 299; 
      var headerRowHeight = 20; 
      console.log(table.tBodies[0].childNodes[i].childNodes[j].innerHTML.length); 
      if(styleName.indexOf("search_criteria_title_cell")>-1){ 
       doc.setFontType("bold"); 
      } 
      if(styleName.indexOf("search_criteria_header_cell")>-1){ 
       doc.setFontType("italic"); 
      } 
      if(styleName.indexOf("search_criteria_date_cell")>-1){ 
       doc.cell(0, 0, cellWidth, headerRowHeight, table.tBodies[0].childNodes[i].childNodes[j].innerHTML, i,"right"); 
      } 
      else 
       doc.cell(0, 0, cellWidth, headerRowHeight, table.tBodies[0].childNodes[i].childNodes[j].innerHTML, i); 
     } 
    } 
    doc.save('sample Report.pdf'); 
} 

對於tableId我正在傳遞我的表名。作爲顯示

我的表:

enter image description here

我生成的PDF是如下所示:

enter image description here

我想改變我的生成PDF的邊框顏色爲 「灰色」 。我該怎麼做?任何人都可以幫助我嗎?

回答

1

在致電cell()方法之前,您必須設置drawColor屬性。

設定繪製顏色使用setDrawColor方法,這個方法

setDrawColor(R,G,B);

更多詳情,這裏的API文檔。 http://rawgit.com/MrRio/jsPDF/master/docs/global.html#setDrawColor

拉伸顏色可以通過設置RGB值被重置爲黑色setDrawColor(0);

實施例:

//Set text color 
    doc.setTextColor(0); 
    doc.text(10, 10, 'This is a test'); 

    //Change text color 
    doc.setTextColor("#42d254"); 
    //Set draw color 
    doc.setDrawColor(150,150,150); 
    doc.cell(40, 40, 50, 20, "cell"); //cell(x,y,w,h,text,i) 

檢查此撥弄供參考:https://jsfiddle.net/Purushoth/x4xo4owj/

請結帳jsPDF-Autotable有很多bui的插件用於定製造型的自定義功能https://simonbengtsson.github.io/jsPDF-AutoTable/#header-footer