jspdf - 如何使用 jsPDF 获取 PDF 中的表格行图像？

Question

我有一个带有图像的 html 表。当我试图转换为 PDF 时，只有数据来了。图像不显示在 PDF 中。

如何在 pdf 中获取表格 td 图像？

合同标题包含一个复选框图像。但不是 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>")
    }

Answer 1

您可以使用 didDrawCell 挂钩将任何内容添加到单元格。

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

function generate() {
  var doc = new jsPDF();

  doc.autoTable({
    html: '#mytable',
    bodyStyles: {minCellHeight: 15},
    didDrawCell: function(data) {
      if (data.column.index === 5 && data.cell.section === 'body') {
         var td = data.cell.raw;
         // Assuming the td cells have an img element with a data url set (<td><img src="data:image/jpeg;base64,/9j/4AAQ..."></td>)
         var img = td.getElementsByTagName('img')[0];
         var dim = data.cell.height - data.cell.padding('vertical');
         var textPos = data.cell.textPos;
         doc.addImage(img.src, textPos.x,  textPos.y, dim, dim);
      }
    }
  });

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