Tải xuống div trong trang HTML dưới dạng pdf bằng javascript

Question 1

Tôi có một div nội dung với id là "content". Trong nội dung div 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 không?

Question 2

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 paragraph</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');
});

Question 3

Nội dung bên trong <div class='html-content'>....</div>có thể được tải xuống dưới dạng pdf với các kiểu sử dụng jspdf & html2canvas .

Bạn cần tham khảo cả hai thư viện js,

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
<script type="text/javascript" src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>

Sau đó gọi hàm bên dưới,

//Create PDf from HTML...
function CreatePDFfromHTML() {
    var HTML_Width = $(".html-content").width();
    var HTML_Height = $(".html-content").height();
    var top_left_margin = 15;
    var PDF_Width = HTML_Width + (top_left_margin * 2);
    var PDF_Height = (PDF_Width * 1.5) + (top_left_margin * 2);
    var canvas_image_width = HTML_Width;
    var canvas_image_height = HTML_Height;

    var totalPDFPages = Math.ceil(HTML_Height / PDF_Height) - 1;

    html2canvas($(".html-content")[0]).then(function (canvas) {
        var imgData = canvas.toDataURL("image/jpeg", 1.0);
        var pdf = new jsPDF('p', 'pt', [PDF_Width, PDF_Height]);
        pdf.addImage(imgData, 'JPG', top_left_margin, top_left_margin, canvas_image_width, canvas_image_height);
        for (var i = 1; i <= totalPDFPages; i++) { 
            pdf.addPage(PDF_Width, PDF_Height);
            pdf.addImage(imgData, 'JPG', top_left_margin, -(PDF_Height*i)+(top_left_margin*4),canvas_image_width,canvas_image_height);
        }
        pdf.save("Your_PDF_Name.pdf");
        $(".html-content").hide();
    });
}

Tham khảo: định dạng pdf từ html canvas và jspdf .

Có thể điều này sẽ giúp một ai đó.

Question 4

Giải pháp của bạn yêu cầu một số phương pháp ajax để chuyển html đến một máy chủ back-end có cơ sở html sang pdf và sau đó trả lại đầu ra pdf được tạo trở lại trình duyệt.

Đầu tiên thiết lập mã phía máy khách, 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 đó, chặn dữ liệu từ tập lệnh tạo 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;

Question 5

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 sẽ là xử lý chuyển đổi trên máy chủ. Cách bạn thực hiện điều này phụ thuộc vào ngôn ngữ bạn đang sử dụng (.net, php, v.v.). Bạn có thể chuyển nội dung của div cho hàm xử lý chuyển đổi, hàm này sẽ trả về một pdf cho người dùng.

Question 6

Có, 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ó API JavaScript đẹ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, khi sử dụng nó, bạn sẽ cần và app + key và SDK miễn phí . Cách sử dụng nó như sau:

Giả sử bạn có 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ì bên dưới id các tính năng, bạn sẽ cần:

//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 thay thế http://www.example.com/my-page.htmlbằng url mục tiêu và #featuretheo bộ 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 sẽ được tạo ở cùng vị trí với thẻ script, thẻ này sẽ chứa tất cả nội dung của các tính năng div và không có gì khác.

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