"Tôi đến với Prince sau khi thấy nó được đề xuất tốt trên web và tôi thấy nó rất linh hoạt và mạnh mẽ để tạo các tệp PDF tùy chỉnh phù hợp với thiết kế đồ họa được chỉ định chặt chẽ. Cảm ơn vì đã cung cấp một công cụ tuyệt vời như vậy. "
Jon Sorenson, Kỹ sư phần mềm chính tại InVitae
"Với Prince, tôi đã tạo một tệp XML mẫu và biểu định kiểu in CSS trong vài phút. Với quy trình làm việc khác, tôi phải mất hàng giờ mới bắt đầu được. "
Trong bài viết này, chúng ta sẽ khám phá việc chuyển đổi nội dung HTML cần thiết thành tệp PDF. Nhiều khi chúng ta phải đọc và chấp nhận các Điều khoản & Điều kiện, cách tốt hơn là tải xuống tệp PDF để đọc khi rảnh rỗi và sau đó chấp nhận nó. Do đó, để đạt được điều này, chúng ta có thể tận dụng chuyển đổi nội dung thành tệp PDF
Chúng tôi cũng cần một số nội dung được lưu trữ trong tệp PDF để sử dụng sau này cho các mục đích khác nhau. Việc sử dụng phổ biến nhất bao gồm tải xuống các chương, văn bản, luận án, v.v.
Việc chuyển đổi trên có thể đạt được theo 2 cách -
In trang web cụ thể và lưu dưới dạng PDF
Sử dụng thư viện jsPDF
Chúng ta sẽ khám phá cả hai cách trong các ví dụ dưới đây
ví dụ 1. In trang web cụ thể và lưu dưới dạng PDF
Trong ví dụ dưới đây, chúng ta sẽ khám phá cách thứ nhất và in trang web cụ thể thành PDF. Điều này tương tự như in mặc định và lưu tệp dưới dạng PDF
Các bước để đạt được điều này như sau -
Mở một cửa sổ mới bằng cửa sổ. phương thức mở []
Viết InternalHTML cho thẻ div bên trong cửa sổ
In và đóng cửa sổ
Thí dụ
#têntệp. mục lục. html
Generate PDFClick here to Generate PDF
Welcome to Tutorials Point
-
We are going to generate a pdf from the area inside the box
-
About Company
Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms. The journey commenced with a single tutorial on HTML in 2006 and elated by the response it generated, we worked our way to adding fresh tutorials to our repository which now proudly flaunts a wealth of tutorials and allied articles on topics ranging from programming languages to web designing to academics and much more.
đầu ra
ví dụ 2. Sử dụng thư viện jsPDF
Một cách khác là sử dụng thư viện PDF được cung cấp bởi JS i. e. thư viện jsPDF. Các bước để sử dụng thư viện này như sau -
Bao gồm liên kết CDN tới jsPDF trong thẻ HTML để nhập thư viện
Bây giờ chúng ta có thể sử dụng thư viện trên để sử dụng các chức năng của nó. Chúng tôi sẽ sử dụng phương thức fromHTML để tạo PDF từ HTML
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
- Truy cập https. //github. com/MrRio/jsPDF và tải xuống Phiên bản mới nhất
- 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ự. Thí dụ
Bạn có thể in tài liệu HTML không?
Mở tài liệu trong trình soạn thảo HTML. Trên menu chính, nhấp vào Tệp > Thiết lập in . Hộp thoại Thiết lập In xuất hiện. Chỉ định máy in, thuộc tính máy in, khổ giấy, nguồn giấy và hướng, sau đó nhấp vào OK để chấp nhận hoặc Hủy bỏ để hủy bỏ các thay đổi.Làm cách nào để in trang HTML dưới dạng PDF bằng JavaScript?
Tạo PDF bằng JavaScript .Chỉ định nội dung trong phương thức text[] của đối tượng jsPDFSử dụng phương thức addPage[] để thêm trang mới vào PDFSử dụng phương thức save[] để tạo và tải xuống tệp PDFTại sao các tệp pdf của tôi được lưu dưới dạng HTML chrome?
Nếu bạn chưa cài đặt bất kỳ trình xem PDF nào, thì bạn có thể chọn Chrome [nếu bạn đã cài đặt nó]. Chrome có trình xem PDF tích hợp và có thể mở các tệp PDF. Khi Chrome được chọn làm trình xem PDF, các tệp PDF sẽ thay đổi thành HTML của Chrome .