Hướng dẫn jspdf fromhtml - jspdf fromhtml

JSPDF có thể sử dụng các 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 làm như sau: In order to enable it to print HTML, you have to include certain plugins and therefore have to do the following: In order to enable it to print HTML, you have to include certain plugins and therefore have to do the following:

Nội dung chính

• Bao gồm thư viện JSPDF
• Tải và bắt đầu lớp JSPDF
• Tạo PDF bằng JavaScript
• Chuyển đổi nội dung HTML thành PDF bằng JavaScript
• Cấu hình hữu ích
• Chuyển đổi nội dung HTML thành PDF bằng hình ảnh và nhiều trang
• Sự kết luận
• 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 để in HTML thành PDF?
• Bạn có thể tạo PDF trong JavaScript không?
• Chúng ta có thể chuyển đổi HTML thành PDF trong Java không?

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.plugin.from_html.js
   • jspdf.plugin.split_text_to_size.js
   • jspdf.plugin.standard_fonts_metrics.js

Nếu bạn muốn bỏ qua các yếu tố nhất định, bạn phải đánh dấu chúng bằng một ID, sau đó bạn có thể bỏ qua trong một 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ở PDF đã tạo trong một 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 pdf đẹp và gọn gàng chỉ bao gồm dòng 'in cái 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, cũng được nêu trong một vấn đề GitHub. Nó nói:

Bởi vì sự phù hợp được thực hiện với mọi yếu 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ỉ ID phần tử được khớp" 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 các bộ chọn lớp như '.ignorepdf' không hoạt động 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 yếu 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 được tuyên bố rằng có thể chọn các thẻ như 'A' hoặc 'li'. Đó có thể là một chút để không giới hạn cho hầu hết các cơ sở sử dụng:

Chúng tôi hỗ trợ trình xử lý yếu tố đặc biệt. Đăng ký chúng với bộ chọn ID kiểu jQuery cho tên ID hoặc nút. .

Một điều rất quan trọng cần thêm là bạn mất tất cả thông tin phong cách (CSS). May mắn thay, JSPDF có thể định dạng độc đáo H2, H2, H3, v.v., đủ 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, điều đó có nghĩa là nó sẽ không in các giá trị của TextAreas và tương tự. Thí dụ:

  

            
    
Print me!
  
  

    
    
  

Đị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. 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.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. 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.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.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.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

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");

4.addImage() method to add image to PDF using

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");

4 object.addImage() method to add image to PDF using

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");

4 object.

• Đườ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

  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");
  

  5.

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");

0

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

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");

1

Mã JavaScript:

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");

2

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

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");

36 để đặt hướng giấy của PDF. Use the 6 để đặt hướng giấy của PDF.
Use the

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");

6 option to set the paper orientation of the PDF.

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");

0

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

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");

37 để đặt các mặt phông chữ văn bản, căn chỉnh văn bản và xoay trong PDF. Use 7 để đặt các mặt phông chữ văn bản, căn chỉnh văn bản và xoay trong PDF.
Use

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");

7 method to set text font faces, text alignment and rotation in the PDF.

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");

1

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.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.autoPaging option helps to break PDF document in multiple pages automatically.

JavaScript:

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");

2

HTML:

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");

3

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.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 để xuất trang HTML của mình dưới dạng PDF bằng JavaScript?

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

Làm cách nào để in HTML thành PDF?

Trên máy tính Windows, hãy mở một trang web HTML trong Internet Explorer, Google Chrome hoặc Firefox.Trên máy Mac, mở một trang web HTML trong Firefox.Nhấp vào nút Chuyển đổi sang PDF, trong thanh công cụ Adobe PDF để bắt đầu chuyển đổi PDF.Nhập tên tệp và lưu tệp PDF mới của bạn vào một vị trí mong muốn.

Bạn có thể tạo PDF trong JavaScript không?

Trường hợp sử dụng JS.Thư viện html2pdf.js dựa trên JavaScript thuần túy để tạo PDF.Do đó, HTML2PDF nhúng phía máy khách trực tiếp, trong trình duyệt.The html2pdf.js library relies on pure JavaScript to create a PDF. As a result, html2pdf embeds directly client-side, in the browser.The html2pdf. js library relies on pure JavaScript to create a PDF. As a result, html2pdf embeds directly client-side, in the browser.

Chúng ta có thể chuyển đổi HTML thành PDF trong Java không?

PDFREACTOR chuyển đổi hàm lượng HTML và XML phức tạp thành PDF.Các tài liệu PDF được tạo có thể được in hoặc xem trên web.Bằng cách này, bạn có thể dễ dàng và nhanh chóng tạo tài liệu PDF.Phần mềm được phân phối dưới dạng thư viện Java hoặc là dịch vụ web.. The generated PDF documents can be printed or viewed on the web. This way, you can easily and quickly create PDF documents. The software is delivered as a Java library or as a Web Service.. The generated PDF documents can be printed or viewed on the web. This way, you can easily and quickly create PDF documents. The software is delivered as a Java library or as a Web Service.