jquery cover html to pdf
Ngày này Javascript đang càng ngày càng phát triển rộng. Nó không còn đơn thuần chỉ dùng để làm những thứ cơ bản trên client-side. Mà giờ đây javascript còn có thể làm những thứ mà tưởng như chỉ có phía server-side (PHP, ASP.NET,..) mới làm được. Ở trong bài đăng này, mình sẽ hướng dẫn các bạn xuất 1 file từ định dạng HTML sang PDF.
Ở đây mình sẽ dùng một số thư viện như:
- Bootstrap (https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css)
- Jquery (https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js)
- https://github.com/MrRio/jsPDF ( Dùng để tạo ra file PDF)
- https://github.com/niklasvh/html2canvas ( Chuyển đổi HTML sang dạng hình ảnh, sau đó encode nó về dạng base64 như 1 kiểu string rôì dùng jsPDF chuyển ra file pdf).
FULL Code:
Code:
https://jsfiddle.net/CuongNguyen/y7uj5ns1/3/
HTML Code
Code:
<body>
<div id='area-print' class='container'>
<div id='back-label'>
<div class='row'>
<div class='col-xs-12 text-center'>
<img src='link_image' width=100 />
<h3>Convert HTML to PDF </h3>
<p>Using javascript</p>
<hr class='border'>
</div>
</div>
<div class='row all-info'>
<div class='col-xs-7'>
<div class='company-address'>
<strong>Company address:</strong>
<span>455 Hoang Dieu, Da Nang</span>
</div>
<div class='country'>
<strong>Country:</strong>
<span>Viet Nam</span>
</div>
<div class='website'>
<strong>Website:</strong>
<span>nguyennhatcuongit.blogspot.com/</span>
</div>
</div>
<div class="col-xs-5 text-right">
<img src='link_image' class="img-thumbnail" width=100 height=100>
</div>
</div>
</div>
</div>
<div class='container' style='margin-top:50px;margin-bottom:50px'><div class='row text-left'><button id='btn-print' class='btn btn-info'>Print</button></div></div>
</body>
CSS code
Code:
#back-label {
width:500px; border:1px solid #EEEEEE;
margin-top: 100px;
margin-left: 50px;
background: #EEEEEE;
font-size: 11px;
}
img {
margin: 5px;
}
.all-info {
margin: 0 0 5px 5px;
font-size: 10px;
}
.border{
margin: 20px 150px;
border-top: 2px solid #7c1907;
}
JAVASCRIPT Code
Code:
$(document).ready(function(){
var area_print = $('#area-print');
var cache_width = area_print.width();
var a4 =[ 595.28, 841.89];
$('#btn-print').on('click',function(){
createPDF();
});
function createPDF(){
getCanvas().then(function(canvas){
var
img = canvas.toDataURL("image/png"),
doc = new jsPDF({
unit:'px',
format:'a4'
});
doc.addImage(img, 'JPEG', 20, 20);
doc.save('convert_html_to_pdf.pdf');
area_print.width(cache_width);
});
// create canvas object
function getCanvas(){
area_print.width((a4[0]*1.33333) -80).css('max-width','none');
return html2canvas(area_print,{
imageTimeout:2000,
removeContainer:true
});
}
}
});
Lưu ý:
- Nếu có hình ảnh trong file HTML, thì bạn phải chuyển đổi từ dạng url sang base64 trước như ví dụ trên mình làm.
( Có thể dùng link này để chuyển)
Code:
https://websemantics.uk/tools/image-to-data-uri-converter/
- Về chất lượng xuất file trên https://jsfiddle.net khá kém (cái này mình ko biết vì sao). Mình test trên hosting và local thì chất lượng ở mức trung bình so vs ảnh gốc.
Bài viết từ nhatcuongit:
Code:
http://www.techumber.com/2015/04/html-to-pdf-conversion-using-javascript.html
http://nguyennhatcuongit.blogspot.com/2016/05/chuyen-oi-html-sang-pdf-su-dung.html