如何解决如何在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>
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 举报,一经查实,本站将立刻删除。