使用jsPDF将html导出为pdf
Export html to pdf using jsPDF
嗨,我想把html导出到pdf,我已经使用了jsPDF,所有的pdf都在导出,但我想在pdf中获得相同的html,html样式不起作用,我能做些什么吗?有人能帮我吗?在jsPDF中使用html样式有什么方法吗??这是我的html代码。我从这个链接得到了一个脚本函数http://jsfiddle.net/xzZ7n/1/
<div class="panel col-xs-12 col-sm-12 col-md-11" style="" id="quotation">
<header><img src="~/images/doc/header_footer/TOUR_Header.png" width="600" /></header>
<table width="600" border="0" style="font-size:12px;border:none;" ng-repeat="endetails in enquiryQuote" id="enq_details">
<tr>
<td><b>Enquiry Date</b></td>
<td>{{endetails.system_date_time | date:fullDate}}</td>
<td><b>Enquiry ref.</b></td>
<td>{{endetails.reference_no}}</td>
</tr>
<tr>
<td><b>Dep. date</b></td>
<td>{{endetails.departing_date | date:fullDate}}</td>
<td><b>Depart. from</b></td>
<td>{{endetails.departing_from}}</td>
</tr>
<tr>
<td><b>Ret. date</b></td>
<td>{{endetails.returning_date | date:fullDate}}</td>
<td><b>Travel. to</b></td>
<td>{{endetails.travelling_to}}</td>
</tr>
<tr>
<td><b>Customer</b></td>
<td>{{endetails.name}}</td>
<td> </td>
<td> </td>
</tr>
</table>
<table width="300" border="0" style="font-size:12px;border:none;" ng-repeat="total in invoice_total">
<tr>
<td><b>Total Price</b></td>
<td>{{total.total_amount}}</td>
<td> </td>
<td> </td>
</tr>
</table>
<table width="600" border="0" style="" ng-repeat="product in invheader[0].invoice_hotel">
<tr>
<td><font color="red;">Hotel Details</font></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td style="width:150px;"><b>Hotel name</b></td>
<td style="width:300px;">{{product.hotel_name}}</td>
<td style="width:150px;"><b>No of rooms</b></td>
<td style="width:300px;">{{product.no_of_rooms}}</td>
</tr>
<tr>
<td style="width:150px;"><b>Location</b></td>
<td style="width:300px;">{{product.city_code}}</td>
<td style="width:150px;">Room view</td>
<td style="width:300px;">{{product.product_hotel_room_views.roomview_name}}</td>
</tr>
<tr>
<td style="width:150px;"><b>Checkin</b></td>
<td style="width:300px;">{{product.check_in| date:fullDate}}</td>
<td style="width:150px;">Room type</td>
<td style="width:300px;">{{product.product_hotel_room_types.room_type_name}}</td>
</tr>
<tr>
<td style="width:150px;"><b>Checkout</b></td>
<td style="width:300px;">{{product.check_out| date:fullDate}}</td>
<td style="width:150px;">Board basis</td>
<td style="width:300px;">{{product.product_hotel_board_basis.bb_name}}</td>
</tr>
<tr>
<td style="width:150px;"><b>No of nights</b></td>
<td style="width:300px;"> </td>
<td style="width:150px;"> </td>
<td style="width:300px;"> </td>
</tr>
<tr>
<td colspan="4">
<b>Passengers - Rooms</b>
<div ng-repeat="item in product.product_hotel_room"><b>Adult :</b> {{item.adults}} and <b>Child :</b> {{item.child}}</div>
</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><b>Budget</b></td>
<td>{{product.payable}}</td>
<td><b>Rate</b></td>
<td>{{product.rate}}</td>
</tr>
</table>
<table width="600" border="0" style="" ng-repeat="product_flight in invheader[0].invoice_flight">
<tr>
<td><font color="red;">Flight Details</font></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td style="width:150px;"><b>Depatur City</b></td>
<td style="width:300px;">{{product_flight.departure_city}}</td>
<td style="width:150px;"><b>Arrival City</b></td>
<td style="width:300px;">{{product_flight.arrival_city}}</td>
</tr>
<tr>
<td style="width:150px;"><b>Depature date</b></td>
<td style="width:300px;">{{product_flight.depature_date | date:fullDate}}</td>
<td style="width:150px;"><b>Arrival Date</b></td>
<td style="width:300px;">{{product_flight.arrival_date | date:fullDate}}</td>
</tr>
<tr>
<td colspan="4">
<b>Passengers</b>
<br />
<div ng-repeat="item_flight_pass in product_flight.invoice_flight_passengers"><b>Name :</b>{{item_flight_pass.title}}.{{item_flight_pass.first_name}} {{item_flight_pass.last_name}} </div>
</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><b>Budget</b> {{product_flight.budget}}</td>
<td><b>Total</b> {{product_flight.total_sell_amt}} </td>
<td><b>Commision</b> {{product_flight.commission_on}}</td>
<td> </td>
</tr>
</table>
<table width="600" border="0" style="" ng-repeat="product_car in invheader[0].invoice_car">
<tr>
<td><font color="red;">Car Details</font></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td style="width: 178px;"><b>Pick Up</b></td>
<td style="width:300px;">{{product_car.pickup}}</td>
<td style="width: 178px;"><b>Drop off</b></td>
<td style="width:300px;">{{product_car.dropoff}}</td>
</tr>
<tr>
<td style="width: 178px;"><b>Pick Up date</b></td>
<td style="width:300px;">{{product_car.datein | date:fullDate}}</td>
<td style="width: 178px;"><b>Drop off Date</b></td>
<td style="width:300px;">{{product_car.dateout | date:fullDate}}</td>
</tr>
<tr>
<td style="width: 178px;"><b>Pick Up Time</b></td>
<td style="width:300px;">{{product_car.timein | date:fullDate}}</td>
<td style="width: 180px;"><b>Drop off Time</b></td>
<td style="width:300px;">{{product_car.timeout | date:fullDate}}</td>
</tr>
<tr>
<td style="width:165px;"><b>Car Type</b></td>
<td style="width:300px;">{{product_car.type}}</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><b>Budget</b> {{product_car.payable}}</td>
<td><b>Total</b> {{product_car.buyamount}}</td>
<td><b>Commision</b> {{product_car.commissionon}}</td>
<td> </td>
</tr>
</table>
<table width="600" border="0" style="" ng-repeat="product_tour in invheader[0].invoice_tour">
<tr>
<td><font color="red;">Tour Details</font></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Tour Details</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td style="width:150px;"><b>Pick Up</b></td>
<td style="width:300px;">{{product_tour.pick_up}}</td>
<td style="width:150px;"><b>Drop off</b></td>
<td style="width:300px;">{{product_tour.drop_off}}</td>
</tr>
<tr>
<td style="width:165px;"><b>Pick Up date</b></td>
<td style="width:300px;">{{product_tour.departure_date | date:fullDate}}</td>
<td style="width:165px;"><b>Drop off Date</b></td>
<td style="width:300px;">{{product_tour.dateout | date:fullDate}}</td>
</tr>
<tr>
<td style="width:165px;"><b>Pick Up Time</b></td>
<td style="width:300px;">{{product_tour.timein | date:fullDate}}</td>
<td style="width:165px;"><b>Drop off Time</b></td>
<td style="width:300px;">{{product_tour.timeout | date:fullDate}}</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><b>Budget</b> {{product_tour.payable}}</td>
<td><b>Total</b> {{product_tour.buyamount}}</td>
<td><b>Commision</b> {{product_tour.commissionon}}</td>
<td> </td>
</tr>
</table>
<table width="600" border="0" style="" ng-repeat="product_rail in invheader[0].invoice_rail">
<tr>
<td><font color="red;">Rail Details</font></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td style="width:150px;"><b>Departure</b></td>
<td style="width:300px;">{{product_rail.departurecity}}</td>
<td style="width:150px;"><b>Arrival</b></td>
<td style="width:300px;">{{product_rail.arrivalcity}}</td>
</tr>
<tr>
<td style="width:165px;"><b>Type</b></td>
<td style="width:300px;">{{product_rail.type}}</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><b>Budget</b> {{product_rail.budget}}</td>
<td><b>Total</b> {{product_rail.amount}}</td>
<td style="width:165px;"><b>Quote Price</b> {{product_rail.quote_price}}</td>
<td> </td>
</tr>
</table>
<table width="600" border="0" style="" ng-repeat="product_transfer in invheader[0].invoice_transfers">
<tr>
<td><font color="red;">Transfers Details</font></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td style="width:150px;"><b>From City</b></td>
<td style="width:300px;">{{product_transfer.from_city}}</td>
<td style="width:150px;"><b>To City</b></td>
<td style="width:300px;">{{product_transfer.to_city}}</td>
</tr>
<tr>
<td style="width:165px;"><b>Vehicle Type</b></td>
<td style="width:300px;">{{product_transfer.vehicle_type}}</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><b>Budget</b> {{product_transfer.budget}}</td>
<td><b>Buy Amount</b> {{product_transfer.amount}}</td>
<td style="width:165px;"><b>Payable</b> {{product_transfer.payable}}</td>
<td> </td>
</tr>
</table>
<table width="600" border="0" style="" ng-repeat="product_cruise in invheader[0].invoice_cruise">
<tr>
<td><font color="red;">Cruise Details</font></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td style="width:150px;"><b>Departure City</b></td>
<td style="width:300px;">{{product_cruise.departure_city}}</td>
<td style="width:150px;"><b>Arrival City</b></td>
<td style="width:300px;">{{product_cruise.arrival_city}}</td>
</tr>
<tr>
<td style="width:165px;"><b>Type</b></td>
<td style="width:300px;">{{product_cruise.vehicle_type}}</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td style="width:165px;"><b>Departure date</b></td>
<td style="width:300px;">{{product_cruise.departure_date | date:fullDate}}</td>
<td style="width:165px;"><b>Arrival Date</b></td>
<td style="width:300px;">{{product_cruise.arrival_date | date:fullDate}}</td>
</tr>
<tr>
<td style="width:165px;"><b>Depature Time</b></td>
<td style="width:300px;">{{product_cruise.departure_time | date:fullDate}}</td>
<td style="width:165px;"><b>Arivalo Time</b></td>
<td style="width:300px;">{{product_cruise.arrival_time | date:fullDate}}</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><b>Budget</b> {{product_cruise.budget}}</td>
<td><b>Amount</b> {{product_cruise.amount}}</td>
<td style="width:165px;"><b>Commistion Amount</b> {{product_cruise.commission_amount}}</td>
<td> </td>
</tr>
</table>
<table width="600" border="0" style="" ng-repeat="product_insurance in invheader[0].invoice_insurance">
<tr>
<td><font color="red;">Insurance Details</font></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td style="width:150px;"><b>Departure City</b></td>
<td style="width:300px;">{{product_insurance.departure_city}}</td>
<td style="width:150px;"><b>Arrival City</b></td>
<td style="width:300px;">{{product_insurance.arrival_city}}</td>
</tr>
<tr>
<td style="width:165px;"><b>Type</b></td>
<td style="width:300px;">{{product_insurance.vehicle_type}}</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td style="width:165px;"><b>Departure date</b></td>
<td style="width:300px;">{{product_insurance.departure_date | date:fullDate}}</td>
<td style="width:165px;"><b>Arrival Date</b></td>
<td style="width:300px;">{{product_insurance.arrival_date | date:fullDate}}</td>
</tr>
<tr>
<td style="width:165px;"><b>Depature Time</b></td>
<td style="width:300px;">{{product_insurance.departure_time | date:fullDate}}</td>
<td style="width:165px;"><b>Arivalo Time</b></td>
<td style="width:300px;">{{product_insurance.arrival_time | date:fullDate}}</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><b>Budget</b> {{product_insurance.budget}}</td>
<td><b>Amount</b> {{product_insurance.amount}}</td>
<td style="width:165px;"><b>Commistion Amount</b> {{product_insurance.commission_amount}}</td>
<td> </td>
</tr>
</table>
<footer><img src="~/images/doc/header_footer/TOUR_Footer.png" width="600" /></footer>
</div>
<div class="rightpan" id='printablediv'>
<p>Print Content</p>
<input type='button' id="cmd" value="Download" class="button1 sbtbutton" />
<div>
<div style="display: none;" id="editor"></div>
<script src="http://code.jquery.com/jquery-2.1.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
<script>
var element = $("#printablediv"); // global variable
var getCanvas; // global variable
$("#cmd").on('click', function () {
html2canvas(element, {
onrendered: function (canvas) {
$("#editor").append(canvas);
getCanvas = canvas;
var img = canvas.toDataURL("image/png"),
doc = new jsPDF({
unit: 'px',
format: 'a4'
});
doc.addImage(img, 'JPEG', 20, 20);
doc.save('Vistordetails.pdf');
form.width(cache_width);
}
});
});
迟答复!!
使用Html2Canvas插件将div转换为画布
接下来将画布图像添加到JsPDF文档
相关文章:
- 如何使用javascript或html下载PDF格式的填写表单
- 在提交时打开thankyou.html+下载PDF
- 生成pdf或其他非html文件时的错误处理
- how to convert html <div> to pdf
- 如何在使用jsPDF将html转换为pdf的同时,在pdf中的某个点进行分页
- 如何将带有大量svg图表的html转换为pdf
- 将php页面的一个部分渲染为HTML和CSS后生成PDF,并考虑PDF分页符
- 如何使用javascript或jquery将整个html页面转换为pdf
- 如果iframe在src(pdf或text)中有非html文档,则iframe中的onload不起作用
- HTML表格导出为具有适当列宽和字体的pdf
- 具有可拖动元素的HTML到PDF
- c# mvc nreco HtmlToPdfConverter 问题将 html 文档转换为 pdf
- 来自HTML图像的jsPDF 会导致 pdf 为空
- 使用 php 将 pdf 文件转换为 html 文件
- HTML到PDF的转换仅在客户端使用JavaScript
- 从横向格式的HTML页面制作PDF
- 使用TableExport.js将HTML表格导出为PDF、WORD、PNG
- HTML和CSS转换为JavaScript中的PDF
- JQuery-HTML到PDF没有'无法在IE中工作(来自C#asmx Web服务)
- 保存样式'导出到pdf'html表