如何在PDF中显示图像？

问题描述

我在显示PDF文件中的图像时遇到问题。我可以在网页中显示图像，但是生成PDF文件后，只有图像不能显示在PDF中。

下面是我的代码：

button code

<button class="opt" type="button" onclick="generate()">Export to PDF</button>

head include

<script type="text/javascript"  src="js/jspdf.debug.js"></script>
<script type="text/javascript" src="js/jspdf.plugin.autotablev2.js"></script>
<script type="text/javascript" src="js/html2canvas.js"></script>
<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/function.js"></script>

PHP

else{
    $test12345 = "<span style='display:none;'>$title</span><br><span style='display:none;'>$company_name</span><br><span style='display:none;'>$report_name</span>";
    echo "<div id='pdf'>";
    $images_test = "<img class='img_logo' src='uploads/$logo_file_path' height='42' >";
    $path = preg_replace('/\s+/','','uploads/' . $logo_file_path);    
    $type = pathinfo($path,PATHINFO_EXTENSION);
    $funciton_code1 = str_replace('',strip_tags($path));
    $data = file_get_contents($path);
    $base64 = 'data:image/' . $type . ';base64,' . base64_encode($data);
    echo "<div class='header'><div class='company-logo' style='float:left;padding-right: 1%;'><img class='img_logo' src='uploads/$logo_file_path 'height='42' ></div><div class='report_header'><span>$title</span><br><span>$company_name</span><br><span>$report_name</span></div></div><br/><hr/>";
    echo "<table id='dataTable'><td colspan='8'>$test12345</td><tr class='tableHeader'><td class='tableHeader'>Payer</td><td class='tableHeader'>Passport/IC No</td ><td class='tableHeader'>Date Paid</td><td class='tableHeader'>Payment Type</td><td class='tableHeader'>Unit Price</td><td class='tableHeader'>Quantity</td><td class='tableHeader'>Total Amount</td><td class='tableHeader'>picture</td></tr>";
    foreach($rows as $row) {
        echo "<tr id=".$row["id"]."><td>".$row["name"]."</td><td>".$row["identify"]."</td><td>".$row["created"]."</td><td>".$row["pay_option"]."</td><td>".$row["amount"]."</td><td>".$row["quantity"]."</td><td>".$row["total_amount"]."</td><td><img src='$base64' /></td></tr>";
    }
    $total_record = "Total Record : ".$result->rowCount();
    $total_record_hide = "<span style='display:none;'>".$total_record."</span>";
    echo "<td>".$total_record_hide."</td>";
    echo "</table>";
    echo "</div></div><br/><div class='table-msg'><span>Total Record : ";
    echo $result->rowCount();
    echo "</span><span style='margin-left: 70%;'>Max 500 pages</span></div></div>";
    echo "</div>";
}

javascript

  var doc = new jsPDF();
  
  doc.autoTable({
    html: '#dataTable',bodyStyles: {minCellHeight: 15},didDrawCell: function(data) {
      if (data.column.index === 9 && data.cell.section === 'body') {
         var td = data.cell.raw;
         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);
      }
    }
  });

    function generate() {  

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

我的网页如下所示：

单击生成PDF后，只有图像在pdf中不起作用，如下所示：

希望有人可以指出出现错误的那一部分。谢谢。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）