Có thể lưu trang HTML dưới dạng PDF bằng JavaScript hoặc jquery không?

Question 1

Chi tiết:

Tôi đã tạo một Trang HTML có chứa một bảng. Nó có một nút 'lưu dưới dạng PDF'. Nếu người dùng nhấp vào nút đó thì trang HTML đó phải chuyển đổi thành tệp PDF.

Có thể sử dụng JavaScript hoặc jquery không?

Question 2

Có , Sử dụng jspdf Để tạo tệp pdf.

Sau đó, bạn có thể biến nó thành một URI dữ liệu và đưa liên kết tải xuống vào DOM

Tuy nhiên, bạn sẽ cần phải tự mình viết mã chuyển đổi HTML sang pdf.

Chỉ cần sử dụng các phiên bản thân thiện với máy in của trang của bạn và để người dùng chọn cách họ muốn in trang.

Chỉnh sửa: Rõ ràng nó có hỗ trợ tối thiểu

Vì vậy, câu trả lời là viết trình viết PDF của riêng bạn hoặc nhờ một trình viết PDF hiện có để làm điều đó cho bạn (trên máy chủ).

Question 3

Ya nó rất dễ thực hiện với javascript. Hy vọng mã này hữu ích cho bạn.

Bạn sẽ cần thư viện JSpdf .

<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>

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

    // This code is collected but useful, click below to jsfiddle link.
</script>

liên kết jsfiddle đây

Question 4

Đây có thể là câu trả lời muộn nhưng đây là câu trả lời hay nhất: https://github.com/eKoopmans/html2pdf

Triển khai javascript thuần túy. Cho phép bạn chỉ định một phần tử duy nhất theo ID và chuyển đổi nó.

Question 5

Bạn có thể sử dụng Phantomjs. Tải xuống tại đây và sử dụng ví dụ sau để kiểm tra tính năng chuyển đổi html-> pdf https://github.com/ariya/phantomjs/blob/master/examples/rasterize.js

Mã ví dụ:

phantomjs.exe examples/rasterize.js http://www.w3.org/Style/CSS/Test/CSS3/Selectors/current/xhtml/index.html sample.pdf

Question 6

Tôi đã sử dụng jsPDFvà dom-to-imagethư viện để xuất HTML sang PDF.

Tôi đăng ở đây như là tham chiếu đến mối quan tâm của ai.

$('#downloadPDF').click(function () {
    domtoimage.toPng(document.getElementById('content2'))
      .then(function (blob) {
          var pdf = new jsPDF('l', 'pt', [$('#content2').width(), $('#content2').height()]);
          pdf.addImage(blob, 'PNG', 0, 0, $('#content2').width(), $('#content2').height());
          pdf.save("test.pdf");
      });
});

Demo: https://jsfiddle.net/viethien/md03wb21/27/

Question 7

Đây là cách tôi sẽ làm điều đó, một ý tưởng không phải là thiết kế chống đạn, bạn cần phải sửa đổi nó

Người dùng nhấp vào nút lưu dưới dạng PDF
Máy chủ được gửi một cuộc gọi bằng ajax
Máy chủ phản hồi bằng một URL cho PDF được tạo bằng HTML, tôi đã sử dụng Apache FOP rất thành công
Các js xử lý phản hồi ajax thực hiện một location.href để trỏ URL được gửi bởi JS và ngay khi URL đó tải, nó sẽ gửi tệp bằng cách sử dụng tiêu đề bố trí nội dung dưới dạng tệp đính kèm buộc người dùng phải tải tệp xuống.

Question 8

Việc chuyển đổi html sang pdf phía máy chủ dễ dàng và đáng tin cậy hơn nhiều. Chúng tôi đang sử dụng Google Puppeteer. Nó được duy trì tốt với các trình bao bọc cho bất kỳ ngôn ngữ phía máy chủ nào mà bạn chọn. Puppeteer sử dụng Chrome không đầu để tạo ảnh chụp màn hình và / hoặc tệp PDF. Nó sẽ giúp bạn tiết kiệm được rất nhiều cơn đau đầu, đặc biệt nếu bạn cần tạo các tệp PDF phức tạp với các bảng, hình ảnh, đồ thị, nhiều trang, v.v.

https://developers.google.com/web/tools/puppeteer/

Question 9

Có một cách rất rõ ràng khác để chuyển đổi HTML sang PDf bằng JavaScript: sử dụng một API trực tuyến cho điều đó. Điều này sẽ hoạt động tốt nếu bạn không cần thực hiện chuyển đổi khi người dùng ngoại tuyến.

PdfMage là một trong những tùy chọn có API đẹp và cung cấp các tài khoản miễn phí. Tôi chắc rằng bạn có thể tìm thấy nhiều lựa chọn thay thế (ví dụ: tại đây )

Đối với API PdfMage, bạn sẽ có một cái gì đó như sau:

 $.ajax({
    url: "https://pdfmage.org/pdf-api/v1/process",
    type: "POST",
    crossDomain: true,
    data: { Html:"<html><body>Hi there!</body></html>" },
    dataType: "json",
    headers: {
        "X-Api-Key": "your-key-here" // not very secure, but a valid option for non-public domains/intranet
    },
    success: function (response) {
        window.location = response.Data.DownloadUrl;
    },
    error: function (xhr, status) {
        alert("error");
    }
});

Question 10

Đúng. Ví dụ: bạn có thể sử dụng giải pháp của https://grabz.it .

Nó có một API Javascript có thể được sử dụng theo nhiều cách khác nhau để lấy và điều khiển ảnh chụp màn hình. Để sử dụng nó trong ứng dụng của mình, trước tiên, bạn cần phải có khóa ứng dụng và bí mật và tải xuống SDK Javascript miễn phí.

Vì vậy, hãy xem một ví dụ đơn giản để sử dụng nó:

//first include the grabzit.min.js library in the web page
<script src="grabzit.min.js"></script>
//include the code below to add the screenshot to the body tag    
<script>
//use secret key to sign in. replace the url.
GrabzIt("Sign in to view your Application Key").ConvertURL("http://www.google.com").Create();
</script>

Sau đó, bạn chỉ cần đợi một lúc và hình ảnh sẽ tự động xuất hiện ở cuối trang mà bạn không cần tải lại trang.

Đó là một trong những đơn giản nhất. Để biết thêm ví dụ về thao tác hình ảnh, hãy đính kèm ảnh chụp màn hình vào các phần tử và v.v. hãy kiểm tra tài liệu .

Question 11

$('#cmd2').click(function() {
  	var options = {
		//'width': 800,
  	};
  	var pdf = new jsPDF('p', 'pt', 'a4');
  	pdf.addHTML($("#content2"), -1, 220, options, function() {
    	pdf.save('admit_card.pdf');
  	});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script>

<div id="content2" style="background: #fff;border-bottom: 1px solid #ffffff;">
                    	<div class="tokenDet" style="padding: 15px;border: 1px solid #000;width: 80%;margin: 0 auto;position: relative;overflow: hidden;">
                        	<div class="title" style="text-align: center;border-bottom: 1px solid #000;margin-bottom: 15px;">
                            	<h2>Entrance Exam Hall Ticket</h2>
                            </div>
                            <div class="parentdiv" style="display: inline-block;width: 100%;position: relative;">
                            	<div class="innerdiv" style="width: 80%;float: left;">
                            		<div class="restDet">
                                        <div class="div">
                                            <div class="label" style="width: 30%;float: left;">
                                                <strong>Name</strong>
                                            </div>
                                            <div class="data" style="width: 70%;display: inline-block;">
                                                <span>Santanu Patra</span>
                                            </div>
                                            <div class="label" style="width: 30%;float: left;">
                                                <strong>D.O.B.</strong>
                                            </div>
                                            <div class="data" style="width: 70%;display: inline-block;">
                                                <span>17th April, 1995</span>
                                            </div>
                                            <div class="label" style="width: 30%;float: left;">
                                                <strong>Address</strong>
                                            </div>
                                            <div class="data" style="width: 70%;display: inline-block;">
                                                <span>P.S. Srijan Corporate Park, Saltlake, Sector 5, Kolkata-91</span>
                                            </div>
                                            <div class="label" style="width: 30%;float: left;">
                                                <strong>Contact Number</strong>
                                            </div>
                                            <div class="data" style="width: 70%;display: inline-block;">
                                                <span>9874563210</span>
                                            </div>
                                            <div class="label" style="width: 30%;float: left;">
                                                <strong>Email Id</strong>
                                            </div>
                                            <div class="data" style="width: 70%;display: inline-block;">
                                                <span>santanu@macallied.com</span>
                                            </div>
                                            <div class="label" style="width: 30%;float: left;">
                                                <strong>Parent(s) Name</strong>
                                            </div>
                                            <div class="data" style="width: 70%;display: inline-block;">
                                                <span>S. Patra</span><br /><span>7896541230</span>
                                            </div>
                                            <div class="label" style="width: 30%;float: left;">
                                                <strong>Exam Center</strong>
                                            </div>
                                            <div class="data" style="width: 70%;display: inline-block;">
                                                <span>Institute of Engineering & Management</span>
                                            </div>
                                            <div class="label" style="width: 30%;float: left;">
                                                <strong>Hall Number</strong>
                                            </div>
                                            <div class="data" style="width: 70%;display: inline-block;">
                                                <span>COM-32</span>
                                            </div>
                                        </div>
                                    </div>
                            	</div>
                                <div class="sideDiv" style="width: 20%;float: left;">
                                	<div class="atts" style="float: left;width: 100%;">
                                    	<div class="photo" style="width: 115px;height: 150px;float: right;">
                                        	<img src="images/candidateImg.gif" style="width: 100%;"/>
                                        </div>
                                        <div class="sign" style="position: absolute;bottom: 0;right: 0;border-top: 1px dashed #000;left: 80%;text-align: right;">
                                        	<small>Self Attested</small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <button class="btn btn-info" id="cmd2">Download Token</button>

Mở rộng đoạn mã

Question 12

Tóm lại: không. Vấn đề đầu tiên là quyền truy cập vào hệ thống tệp, trong hầu hết các trình duyệt được đặt thành không theo mặc định vì lý do bảo mật. Các trình duyệt hiện đại đôi khi hỗ trợ lưu trữ tối thiểu dưới dạng cơ sở dữ liệu hoặc bạn có thể yêu cầu người dùng bật quyền truy cập tệp.

Nếu bạn có quyền truy cập vào hệ thống tệp thì việc lưu dưới dạng HTML không khó lắm (xem đối tượng tệp trong tài liệu JS) - nhưng PDF thì không dễ dàng như vậy. PDF là một định dạng tệp khá nâng cao thực sự không phù hợp với Javascript. Nó yêu cầu bạn viết thông tin trong các kiểu dữ liệu không được hỗ trợ trực tiếp bởi Javascript, chẳng hạn như các từ và quads. Bạn cũng cần xác định trước một hệ thống tra cứu từ điển phải được lưu vào tệp. Tôi chắc rằng ai đó có thể làm cho nó hoạt động, nhưng nỗ lực và thời gian liên quan sẽ tốt hơn dành cho việc học C ++ hoặc Delphi.

Tuy nhiên, có thể xuất HTML nếu người dùng cấp cho bạn quyền truy cập không hạn chế