Diễn Đàn Hỗ Trợ FM
Bạn có muốn phản ứng với tin nhắn này? Vui lòng đăng ký diễn đàn trong một vài cú nhấp chuột hoặc đăng nhập để tiếp tục.


[Code] jquery cover html to pdf

Tác giả: - vào lúc:
the_dav
Bài viết : 226
Points : 323
Like : 47
Punbb
Quản trị
the_davMEM LV3
11/9/2016, 15:35
#1

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