Trong bài viết này, chúng ta sẽ xem cách chuyển đổi HTML sang PDF bằng JavaScript. Đị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. JavaScript là cách dễ nhất để chuyển đổi HTML sang PDF và có sẵn nhiều thư viện JavaScript khác nhau để tạo PDF từ HTML. jsPDF là một trong những thư viện tốt nhất để chuyển đổi HTML sang PDF bằng JavaScript

Vì vậy, hãy xem tạo PDF bằng javascript, chuyển đổi HTML sang PDF bằng jquery, jspdf HTML sang PDF, HTML sang PDF javascript, jquery chuyển đổi HTML sang PDF, jspdf chuyển đổi HTML sang PDF

Ví dụ. Cách chuyển đổi HTML sang PDF bằng JavaScript

Đầu tiên, chúng ta sẽ tạo một Trang HTML để chuyển đổi HTML sang PDF. Thêm đoạn mã sau vào trang HTML của bạn

    
How To Convert HTML To PDF Using JavaScript - Techsolutionstuff
    
        
        
  
            
  
                
  
                    
Company Name
  
                    
Employee Name
  
                    
Country
  
                
  
                
  
                    
Dell
  
                    
Maria
  
                    
Germany
  
                
  
                
  
                    
Asus
  
                    
Francisco
  
                    
Mexico
  
                
  
                
  
                    
Apple
  
                    
Roland
  
                    
Austria
  
                
  
                
  
                    
HP
  
                    
Helen
  
                    
UK
  
                
  
                
  
                    
Lenovo
  
                    
Yoshi
  
                    
Canada
  
                
            
  
        

  
          
    
  

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

đọc thêm. Cách vô hiệu hóa nhấp chuột phải bằng jQuery

Thêm phong cách của trang HTML này

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

đọc thêm. Kính lúp hình ảnh jQuery khi di chuột

Thêm đoạn mã sau vào trang HTML để chuyển đổi sang pdf

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Bạn cũng có thể thích

• đọc thêm. Laravel 8 Tạo PDF bằng DomPDF

• đọc thêm. Cách tạo PDF từ chế độ xem HTML trong Laravel

• đọc thêm. Cách lấy giá trị danh sách hộp kiểm đã chọn trong Jquery

jsPDF có thể sử dụng plugin. Để cho phép nó in HTML, bạn phải bao gồm một số plugin nhất định và do đó phải thực hiện các thao tác sau

1. Truy cập https. //github. com/MrRio/jsPDF và tải xuống Phiên bản mới nhất
2. Bao gồm các Tập lệnh sau trong dự án của bạn
   • jspdf. js
   • jspdf. cắm vào. from_html. js
   • jspdf. cắm vào. split_text_to_size. js
   • jspdf. cắm vào. standard_fonts_metrics. js

Nếu bạn muốn bỏ qua một số phần tử nhất định, bạn phải đánh dấu chúng bằng ID, sau đó bạn có thể bỏ qua ID này trong trình xử lý phần tử đặc biệt của jsPDF. Do đó, HTML của bạn sẽ trông như thế này

  
    
don't print this to pdf





print this to pdf

Sau đó, bạn sử dụng mã JavaScript sau để mở tệp PDF đã tạo trong Cửa sổ bật lên

var doc = new jsPDF();          
var elementHandler = {
  '#ignorePDF': function (element, renderer) {
    return true;
  }
};
var source = window.document.getElementsByTagName("body")[0];
doc.fromHTML(
    source,
    15,
    15,
    {
      'width': 180,'elementHandlers': elementHandler
    });

doc.output("dataurlnewwindow");

Đối với tôi, điều này đã tạo ra một tệp PDF đẹp và gọn gàng chỉ bao gồm dòng 'in tệp này thành pdf'

Xin lưu ý rằng trình xử lý phần tử đặc biệt chỉ xử lý ID trong phiên bản hiện tại, điều này cũng được nêu trong Vấn đề GitHub. Nó nói

Bởi vì việc so khớp được thực hiện với mọi phần tử trong cây nút, mong muốn của tôi là làm cho nó nhanh nhất có thể. Trong trường hợp đó, điều đó có nghĩa là "Chỉ các ID phần tử được khớp" Các ID phần tử vẫn được thực hiện theo kiểu jQuery "#id", nhưng điều đó không có nghĩa là tất cả các bộ chọn jQuery đều được hỗ trợ

Do đó, thay thế '#ignorePDF' bằng bộ chọn lớp như '. bỏ quaPDF' không hoạt động đối với tôi. Thay vào đó, bạn sẽ phải thêm cùng một trình xử lý cho từng và mọi phần tử mà bạn muốn bỏ qua như

var elementHandler = {
  '#ignoreElement': function (element, renderer) {
    return true;
  },
  '#anotherIdToBeIgnored': function (element, renderer) {
    return true;
  }
};

Từ các ví dụ, người ta cũng nói rằng có thể chọn các thẻ như 'a' hoặc 'li'. Mặc dù vậy, điều đó có thể là một chút không hạn chế đối với hầu hết các trường hợp sử dụng

Chúng tôi hỗ trợ các trình xử lý phần tử đặc biệt. Đăng ký chúng với bộ chọn ID kiểu jQuery cho ID hoặc tên nút. ("#iAmID", "div", "span", v.v. ) Không có hỗ trợ cho bất kỳ loại bộ chọn nào khác (loại, hợp chất) tại thời điểm này

Một điều rất quan trọng cần thêm là bạn mất tất cả thông tin về kiểu dáng (CSS). May mắn thay, jsPDF có thể định dạng độc đáo h1, h2, h3, v.v. , đó là đủ cho mục đích của tôi. Ngoài ra, nó sẽ chỉ in văn bản trong các nút văn bản, có nghĩa là nó sẽ không in các giá trị của vùng văn bản và những thứ tương tự. Ví dụ

Làm cách nào để chuyển đổi tệp js sang PDF trực tuyến miễn phí?

Chúng tôi có thể chuyển đổi mã HTML sang PDF không?

Làm cách nào để chuyển đổi HTML CSS sang PDF bằng JavaScript?

Làm cách nào để chuyển đổi div sang PDF trong JavaScript?