Chuyển đổi HTML sang PDF sử dụng Javascript
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: https://jsfiddle.net/CuongNguyen/y7uj5ns1/3/
HTML Code
CSS code
JAVASCRIPT Code
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: 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 có tham khảo ở link: http://www.techumber.com/2015/04/html-to-pdf-conversion-using-javascript.html
Ở đâ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: https://jsfiddle.net/CuongNguyen/y7uj5ns1/3/
HTML 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
#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
$(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: 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 có tham khảo ở link: http://www.techumber.com/2015/04/html-to-pdf-conversion-using-javascript.html
Nhận xét
Đăng nhận xét