Hướng dẫn how can download html page as pdf in jquery? - Làm cách nào để tải trang html dưới dạng pdf trong jquery?

Vâng, có thể bắt được Div là PDFS trong JS. Bạn có thể kiểm tra giải pháp được cung cấp bởi https://grabz.it. Chúng 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 duy nhất như DIV hoặc một nhịp.

Vì vậy, yo sử dụng nó, bạn sẽ cần và ứng dụng+khóa và SDK miễn phí. Việc sử dụng nó như sau:

Giả sử bạn có HTML:

    
Acme Camera
    Price$399

    Rating4.5 out of 5

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.

Để nắm bắt những gì dưới các tính năng ID bạn sẽ cần:

//add the sdk

Bạn cần thay thế

//add the sdk

//add the sdk

Đó là tất cả. Bây giờ, khi trang được tải, một ảnh chụp màn hình hình ảnh sẽ được tạo ở cùng một vị trí với thẻ script, 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.

Là cấu hình và tùy chỉnh khác mà bạn có thể làm với cơ chế SCREENSHOT, vui lòng kiểm tra chúng ở đây

Định dạng tệp PDF rất hữu ích để tải xuống dữ liệu hàng loạt trong ứng dụng web. Nó giúp người dùng tải xuống nội dung động ở định dạng tệp để sử dụng ngoại tuyến. Với chức năng xuất sang PDF, nội dung HTML được chuyển đổi thành tài liệu PDF và được tải xuống dưới dạng tệp PDF. Trong ứng dụng web động, tập lệnh phía máy chủ được sử dụng để chuyển đổi HTML thành PDF và tạo tệp PDF bằng PHP. format is very useful to download bulk data in the web application. It helps the user to download dynamic content in file format for offline use. With export to PDF functionality, the HTML content is converted to a PDF document and downloaded as a PDF file. In the dynamic web application, a server-side script is used to convert HTML to PDF and generate PDF file using PHP.

Nếu bạn muốn một giải pháp phía máy khách để tạo tài liệu PDF, JavaScript là cách dễ nhất để chuyển đổi HTML thành PDF. Có nhiều thư viện JavaScript khác nhau có sẵn để tạo PDF từ HTML. JSPDF là một trong những thư viện tốt nhất để chuyển đổi HTML thành PDF bằng JavaScript. Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách tạo tài liệu PDF và chuyển đổi HTML thành PDF bằng thư viện JavaScript và JSPDF.convert HTML to PDF. There are various JavaScript library is available to generate PDF from HTML. The jsPDF is one of the best library to convert HTML to PDF using JavaScript. In this tutorial, we will show you how to generate PDF document and convert HTML to PDF using JavaScript and jsPDF library.

Trong tập lệnh ví dụ này, chúng tôi sẽ chia sẻ các đoạn mã để xử lý việc tạo PDF và HTML sang các hoạt động liên quan đến chuyển đổi PDF bằng JavaScript.

Bao gồm thư viện JSPDF

Thư viện jQuery không bắt buộc, chỉ bao gồm tệp thư viện JSPDF để sử dụng lớp JSPDF.

<script src="js/jsPDF/dist/jspdf.umd.js">script>

Lưu ý rằng: Bạn không cần tải xuống thư viện JSPDF một cách riêng biệt, tất cả các tệp cần thiết được bao gồm trong gói mã nguồn của chúng tôi. You don’t need to download the jsPDF library separately, all the required files are included in our source code package.

Tải và bắt đầu lớp JSPDF

Sử dụng dòng mã sau để bắt đầu lớp JSPDF và sử dụng đối tượng JSPDF trong JavaScript.

window.jsPDF = window.jspdf.jsPDF;

var doc = new jsPDF();

Tạo PDF bằng JavaScript

Ví dụ sau đây cho thấy cách sử dụng thư viện JSPDF để tạo tệp PDF bằng JavaScript.

• Chỉ định nội dung trong phương thức Text () của đối tượng JSPDF.text() method of jsPDF object.
• Sử dụng phương thức addPage () để thêm trang mới vào pdf.addPage() method to add new page to PDF.
• Sử dụng phương thức Save () để tạo và tải xuống tệp PDF.save() method to generate and download PDF file.

var doc = new jsPDF();
	
doc.text(20, 20, 'Hello world!');
doc.text(20, 30, 'This is client-side Javascript to generate a PDF.');


doc.addPage();
doc.text(20, 20, 'Visit CodexWorld.com');


doc.save('document.pdf');

Sử dụng phương thức addImage () để thêm hình ảnh vào pdf bằng đối tượng

//add the sdk

//add the sdk

• Đường dẫn/URL hình ảnh nguồn phải được chỉ định trong tham số đầu tiên trong phương thức

  //add the sdk
  
  
  

  5.

doc.addImage("path/to/image.jpg", "JPEG", 15, 40, 180, 180);

Chuyển đổi nội dung HTML thành PDF bằng JavaScript

Ví dụ sau đây cho thấy cách sử dụng thư viện JSPDF để chuyển đổi HTML thành PDF và tạo tệp PDF từ nội dung HTML bằng JavaScript.convert HTML to PDF and generate PDF file from HTML content using JavaScript.

• Truy xuất nội dung HTML từ phần tử cụ thể theo ID hoặc lớp.
• Chuyển đổi nội dung HTML của phần cụ thể của trang web và tạo PDF.
• Lưu và tải xuống nội dung HTML dưới dạng tệp PDF.

Mã HTML:

<div id="content">
    
div>

Mã JavaScript:

window.jsPDF = window.jspdf.jsPDF;

var doc = new jsPDF();
	

var elementHTML = document.querySelector("#contnet");

doc.html(elementHTML, {
    callback: function(doc) {
        
        doc.save('sample-document.pdf');
    },
    x: 15,
    y: 15,
    width: 170, 
    windowWidth: 650 
});

Cấu hình hữu ích

Thư viện JSPDF cung cấp các phương thức và tùy chọn khác nhau để định cấu hình tạo PDF. Một số phương pháp hữu ích của lớp JSPDF được đưa ra dưới đây thường được sử dụng để xuất HTML sang PDF bằng jQuery.

Thay đổi hướng giấy: Sử dụng tùy chọn

//add the sdk

//add the sdk

var doc = new jsPDF({
    orientation: 'landscape'
});

doc.text(20, 20, 'Hello world!');
doc.text(20, 30, 'This is client-side Javascript to generate a PDF.');


doc.addPage();
doc.text(20, 20, 'Visit CodexWorld.com');


doc.save('document.pdf');

Thay đổi phông chữ văn bản: Sử dụng phương thức

//add the sdk

//add the sdk

var doc = new jsPDF();
	
doc.text(20, 20, 'This is the default font.');

doc.setFont("courier", "normal");
doc.text("This is courier normal.", 20, 30);

doc.setFont("times", "italic");
doc.text("This is times italic.", 20, 40);

doc.setFont("helvetica", "bold");
doc.text("This is helvetica bold.", 20, 50);

doc.setFont("courier", "bolditalic");
doc.text("This is courier bolditalic.", 20, 60);

doc.setFont("times", "normal");
doc.text("This is centred text.", 105, 80, null, null, "center");
doc.text("And a little bit more underneath it.", 105, 90, null, null, "center");
doc.text("This is right aligned text", 200, 100, null, null, "right");
doc.text("And some more", 200, 110, null, null, "right");
doc.text("Back to left", 20, 120);

doc.text("10 degrees rotated", 20, 140, null, 10);
doc.text("-10 degrees rotated", 20, 160, null, -10);


doc.save('document.pdf');

Chuyển đổi nội dung HTML thành PDF bằng hình ảnh và nhiều trang

Trong ví dụ này đoạn mã mã, chúng tôi sẽ chỉ ra cách sử dụng thư viện JSPDF để chuyển đổi HTML thành PDF và tạo tệp PDF từ nội dung HTML bao gồm hình ảnh bằng JavaScript.

• Các đường dẫn tệp tuyệt đối hoặc tương đối có thể được sử dụng trong hình ảnh SRC.
• Thư viện HTML2Canvas được yêu cầu để chuyển đổi nội dung HTML (có hình ảnh) sang tài liệu PDF.html2canvas library is required to convert HTML content (with images) to PDF document.
• Tùy chọn tự động giúp phá vỡ tài liệu PDF tự động trong nhiều trang.autoPaging option helps to break PDF document in multiple pages automatically.

JavaScript:

//add the sdk

HTML:

//add the sdk

Tạo PDF với Watermark trong PHP bằng cách sử dụng DOMPDF

Sự kết luận

Mã ví dụ của chúng tôi giúp bạn chuyển đổi HTML thành PDF và tạo tệp PDF bằng JavaScript. Bạn có thể dễ dàng thêm chức năng xuất vào PDF trên trang web mà không phụ thuộc vào tập lệnh phía máy chủ. Chức năng tạo PDF có thể được tăng cường với các tùy chọn cấu hình JSPDF theo nhu cầu của bạn. Tải xuống gói mã nguồn của chúng tôi để có tất cả các tệp cần thiết bao gồm thư viện JSPDF JavaScript.Export to PDF functionality on the web page without depending on the server-side script. The PDF creation functionality can be enhanced with jsPDF configuration options as per your needs. Download our source code package to get all the required files including the jsPDF JavaScript library.

Bạn có muốn nhận trợ giúp thực hiện hoặc sửa đổi hoặc tăng cường chức năng của tập lệnh này không? Gửi yêu cầu dịch vụ trả phí

Nếu bạn có bất kỳ câu hỏi nào về kịch bản này, hãy gửi nó cho cộng đồng QA của chúng tôi - đặt câu hỏi

Làm cách nào để lưu trang HTML dưới dạng PDF?

Làm cách nào để xuất trang HTML của mình dưới dạng PDF bằng JavaScript?

Làm cách nào để tạo mã HTML PDF?

Làm thế nào để tải xuống pdf bằng nút bấm vào trong jQuery?