2016-11-07 81 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

相关问题