Tải xuống một div trong trang HTML dưới dạng pdf bằng cách sử dụng javascript

Question

Tôi có div nội dung có id là "nội dung". Trong div nội dung, tôi có một số đồ thị và một số bảng. Tôi muốn tải xuống div đó dưới dạng pdf khi người dùng nhấp vào nút tải xuống. Có cách nào để làm điều đó bằng cách sử dụng javascript hoặc jQuery?

Answer 1

Bạn có thể làm điều đó bằng jsPDF

HTML:

<div id="content"> 
    <h3>Hello, this is a H3 tag</h3> 

    <p>a pararaph</p> 
</div> 
<div id="editor"></div> 
<button id="cmd">generate PDF</button> 

JavaScript:

var doc = new jsPDF(); 
var specialElementHandlers = { 
    '#editor': function (element, renderer) { 
     return true; 
    } 
}; 

$('#cmd').click(function() { 
    doc.fromHTML($('#content').html(), 15, 15, { 
     'width': 170, 
      'elementHandlers': specialElementHandlers 
    }); 
    doc.save('sample-file.pdf'); 
}); 

Answer 2

Không có một cơ chế như vậy trong jQuery, nhưng bạn có thể sử dụng plugin như http://www.webresourcesdepot.com/create-pdf-files-with-javascript-jspdf/

Ngoài ra kiểm tra bài này Is it possible to generate PDF using jQuery?

Answer 3

giải pháp của bạn đòi hỏi một số phương pháp ajax để vượt qua html để một back-end máy chủ có một cơ sở html to pdf và sau đó trả về đầu ra pdf được tạo trở lại trình duyệt.

Đầu tiên thiết lập mã phía khách hàng, chúng tôi sẽ thiết lập mã jquery như

var options = { 
      "url": "/pdf/generate", 
      "data": "data=" + $("#content").html(), 
      "type": "post", 
     } 
    $.ajax(options) 

Sau đó đánh chặn các dữ liệu từ các tập lệnh hệ html2pdf như sau

$html = $_POST['data']; 
    $pdf = html2pdf($html); 

    header("Content-Type: application/pdf"); //check this is the proper header for pdf 
    header("Content-Disposition: attachment; filename='some.pdf';"); 
    echo $pdf; 

 

Answer 4

AFAIK không có hàm jquery gốc nào thực hiện điều này. Tùy chọn tốt nhất là xử lý chuyển đổi trên máy chủ. Làm thế nào bạn làm điều này phụ thuộc vào ngôn ngữ bạn đang sử dụng (.net, php, vv). Bạn có thể chuyển nội dung của div tới hàm xử lý chuyển đổi, điều này sẽ trả về một pdf cho người dùng.

Answer 5

Vâng, nó có thể Để chụp div dưới dạng PDF trong JS. Bạn có thể kiểm tra giải pháp được cung cấp bởi https://grabz.it. Họ có JavaScript API đẹp và sạch sẽ cho phép bạn nắm bắt nội dung của một phần tử HTML đơn lẻ như div hoặc span.

Vì vậy, hãy sử dụng nó, bạn sẽ cần và app+key và miễn phí SDK. Việc sử dụng của nó là như sau:

Hãy nói rằng bạn có một HTML:

<div id="features"> 
    <h4>Acme Camera</h4> 
    <label>Price</label>$399<br /> 
    <label>Rating</label>4.5 out of 5 
</div> 
<p>Cras ut velit sed purus porttitor aliquam. Nulla tristique magna ac libero tempor, ac vestibulum felisvulput ate. Nam ut velit eget 
risus porttitor tristique at ac diam. Sed nisi risus, rutrum a metus suscipit, euismod tristique nulla. Etiam venenatis rutrum risus at 
blandit. In hac habitasse platea dictumst. Suspendisse potenti. Phasellus eget vehicula felis.</p> 

Để nắm bắt những gì đang được các tính năng id bạn sẽ cần phải:

//add the sdk 
<script type="text/javascript" src="grabzit.min.js"></script> 
<script type="text/javascript"> 
//login with your key and secret. 
GrabzIt("KEY", "SECRET").ConvertURL("http://www.example.com/my-page.html", 
{"target": "#features", "format": "pdf"}).Create(); 
</script> 

Bạn cần phải thay số http://www.example.com/my-page.html với url mục tiêu của bạn và #feature cho mỗi công cụ chọn CSS của bạn.

Đó là tất cả. Bây giờ, khi trang được tải một ảnh chụp màn hình hình ảnh bây giờ sẽ được tạo ra trong cùng một vị trí như thẻ script, mà sẽ chứa tất cả các nội dung của các tính năng div và không có gì khác.

Cấu hình và tùy chỉnh khác mà bạn có thể thực hiện với cơ chế chụp màn hình div, vui lòng xem chúng here