[Code] jquery cover html to pdf

  • the_dav
    1. [Code] jquery cover html to pdf
    avatar MEM LV3

    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

Thông tin tác giả
avatar
MEM LV3
Bài viết :
222
Points :
319
Like :
47
Punbb
Quản trị
Xem lý lịch thành viên
Bài viết liên quan
    Đang tải dữ liệu

Permissions in this forum:
Bạn không có quyền trả lời bài viết