Post
Ask Question
krishna vala

krishna vala

  • NA
  • 290
  • 72.9k

generate pdf is not diplay like my actual code

Feb 8 2019 11:56 PM
i have to pdf generate using javascript but in pdf content is not diplay my actual code like image diplay left side and table display with border but this shoud not happen.my page shoud look as well as look like in the pdf. i using jspdf so what can i change my code.
 
 
<html>
<head>
<title>Save the particular div in PDF format onclick using Jquery</title>
</head>
<body>
<div class="container">
<div align="center">
<button type="button" id="download_pdf">PDF</button>
</div>
<br>
<div class="" id="purchaseform_demo" >
<div class=" text-center" style="text-align:center;" >
<img src="desert.jpg" class="img-fluid" width="100px" height="auto" />
</div>
<div class="">
<div class="">
<div class=""><label>Date: <?php echo date('d-m-Y '); ?> </label> </div>
</div>
<br>
<table id="bootstrap-data-table" class="t" style="width:100%">
<thead>
<tr>
<th>Product</th>
<th>Qty</th>
<th style="text-align:right;">Price</th>
</tr>
</thead>
<tbody style="text-align:center">
<tr>
<td style="text-align:center"><span id="p_productname"> </span></td>
<td style="text-align:center"><span id="p_qty"> </span></td>
<td style="text-align:right;"><span id="p_price"> </span></td>
</tr>
</tbody>
<tfoot >
<tr >
<td style="text-align:center;"></td>
<td colspan="2" style="text-align:right;"><b>Total:<span id="p_total"> </span></b></td>
</tr>
</tfoot>
</table>
<div>
<p>Thank you mastimania</p>
</div>
<h4 style="margin-bottom: 0px;">Tearm & Condition </h4>
<ol style=" padding-left: 15px;margin-top: 5px;">
<li>You need to exit before Your exit time Otherwise You have to bear Changes according to next Slot.</li>
<li>Ticket is non Refundable & transferable.</li>
<li>Kindly Play safety.any mury damage caused will not be our responsibility.</li>
</ol>
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type='text/javascript' src="jspdf.debug.js"></script>
<script>
$('#download_pdf').click(function () {
var pdf = new jsPDF('p', 'pt', 'letter')
, source = $('#purchaseform_demo')[0]
, specialElementHandlers = {
'#bypassme': function(element, renderer){
return true
}
}
margins = {
top: 60,
bottom: 60,
left: 40,
width: 522
};
pdf.fromHTML(
source
, margins.left
, margins.top
, {
'width': margins.width
, 'elementHandlers': specialElementHandlers
},
function (dispose) {
pdf.save('download_pdf.pdf');
},
margins
)
});
</script>
</body>
</html>
 

Answers (2)