2016-11-07 123 views
1

我有一個html表格與images.When當我試圖轉換爲PDF只有數據coming.Image不顯示在PDF中。如何使用jsPDF獲取PDF格式的表格行圖像?

如何在pdf中獲取table td圖像?

enter image description here

合同標題包含一個複選框image.But不是pdf來了嗎?

我的PDF代碼:

function fnExportDIVToPDF() { 

    var pdf = new jsPDF('l', 'pt', 'a2'); 
    pdf.setFontSize(8); 
    source = $('#divReport')[0]; 
    specialElementHandlers = { 
    '#bypassme': function (element, renderer) { 
    return true 
     } 
    }; 
    margins = { 
     top: 30, bottom: 40, left: 10, width: 1300}; 

    pdf.fromHTML(
      source, margins.left, margins.top, { 
       'elementHandlers': specialElementHandlers}, 

    function (dispose) { 

     pdf.save('Report.pdf'); 
    } 
    , margins); 
} 

事業部:

<div id="divReport"> 

         <div width="100%"> 
          <p><span id="oHeadingSummary" class="rptheader"></span></p> 

         </div> 

         <table class="table table-striped rpttable" border="1" cellspacing="0" id="oReportContractDetailsByCA" width="100%"> 
          <colgroup>... <col width="10%"> 
          </colgroup></table> 

自動生成表格我添加了一個形象:

function GenerateTable(data) { 
    document.getElementById('divExport').style.display = ""; 
    if (i == 0) { 
     $('#oReportContractDetailsByCA').append("<tr style='background-color:" + bkColor + ";'><td><img src='../../../_layouts/15/1033/IMAGES/eContracts/checked-checkbox-512.jpg'></img></td></tr>") 
    } 

回答

2

這是目前有些繁瑣。路線圖將在未來更好地支持這一點。下面是一些示例代碼,今天怎麼做到這一點:

https://codepen.io/someatoms/pen/vLYXWB

function generate() { 
    var doc = new jsPDF('p', 'pt'); 

    var elem = document.getElementById('table'); 
    var imgElements = document.querySelectorAll('#table tbody img'); 
    var data = doc.autoTableHtmlToJson(elem); 
    var images = []; 
    var i = 0; 
    doc.autoTable(data.columns, data.rows, { 
    bodyStyles: {rowHeight: 30}, 
    drawCell: function(cell, opts) { 
     if (opts.column.dataKey === 5) { 
     images.push({ 
      url: imgElements[i].src, 
      x: cell.textPos.x, 
      y: cell.textPos.y 
     }); 
     i++; 
     } 
    }, 
    addPageContent: function() { 
     for (var i = 0; i < images.length; i++) { 
     doc.addImage(images[i].url, images[i].x, images[i].y, 20, 20); 
     } 
    } 
    }); 

    doc.save("table.pdf"); 
} 
+0

我生成一個表像這樣$( '#oReportContractDetailsByCA')追加( 「」+ data.d.results [i] .ID +「」+ data.d.results [i] .Title +「​​ elina

+0

@Simon,6個月前,你說過:「目前有點麻煩,路線圖是爲了在未來更好地支持這一點。」現在我們在未來:-)你知道這是否變得更容易了嗎? – Mawg