Hướng dẫn html to pdf with css javascript - html sang pdf với javascript css

Vừa rồi:

• 
  Hướng dẫn khai thác NFT05 đầu tiên của bạn
• 
  Làm thế nào công nghệ có thể giải quyết các thách thức trong tuyển dụng và lựa chọn? 01 tháng 4
• 
  Công nghệ giúp chống lại các thách thức tuyển dụng hàng đầu như thế nào? 01 tháng 4

JavaScript đã đi một chặng đường dài trong việc phục vụ nhiều hơn là ngôn ngữ kịch bản phía máy khách. Và ngày nay chúng ta có thể làm tất cả các loại công cụ mà chúng ta thường thực hiện với bất kỳ ngôn ngữ phía máy chủ nào như PHP, ASP.NET, v.v. Tương tự là vấn đề xuất HTML/CSS sang tài liệu PDF (HTML sang PDF JavaScript) .

Cũng đọc: Công ty phát triển UI UX

Ngày nay có rất nhiều giải pháp như html2canvas (https://github.com/niklasvh/html2canvas),

JSPDF (https://github.com/mrrio/jspdf) hoặc pdfmake (https://github.com/bpampuch/pdfmake), v.v.

Thực sự tạo ra ảnh chụp màn hình và lưu nó dưới dạng PDF bằng Base64, vì vậy chất lượng PDF không tốt và JSPDF, tốt hơn để tạo nội dung bảng PDF bằng cách sử dụng dữ liệu động nhưng với PDFMake, bạn thực sự có thể xuất khẩu HTML/ Trang CSS vào PDF & NBSP; và nội dung xem phải tĩnh nhưng dữ liệu có thể động và chất lượng PDF cũng tốt để so sánh với hai trên.html2canvas” actually creates a screenshot and saves it as pdf using base64 , So the Pdf quality is not that good and “Jspdf” is better for creating table content Pdf using dynamic data but with “Pdfmake” you can actually export a proper Html/CSS Page into Pdf and the view content has to be static but the data can be dynamic and also the Pdf quality is good to compare to the above two.

Nhưng hôm nay chúng ta sẽ thảo luận về API Kendo UI có tính năng để vẽ các yếu tố DOM và xuất tương tự thành tài liệu PDF. đến pdf javascript).Kendo UI API that has a feature to draw dom elements and export the same into a Pdf document. I will show you guys step by step procedure to export the content of HTML/CSS into Pdf Document (HTML to pdf javascript).

Làm thế nào một trong những nhà bán lẻ lớn nhất thế giới đang sử dụng giải pháp phân tích video để chiến đấu & NBSP; coronavirus và tăng đáng kể sự an toàn

Các bước để xuất HTML & NBSP; sang PDF JavaScript: & NBSP;

Đầu tiên, bạn sẽ cần thêm thư viện bằng CDN (http://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js ) Trong tệp HTML của bạn.

  // dependency for Kendo UI API
 

Thứ hai, bạn sẽ cần đặt bất kỳ nội dung nào trên trang web của mình bằng HTML/CSS mà bạn muốn xuất sang tài liệu PDF.

Lorem Ipsum

Lorem Ipsum

Lorem Ipsum là gì?

Lorem Ipsum chỉ đơn giản là văn bản giả của ngành in và sắp chữ. Lorem Ipsum là văn bản giả tiêu chuẩn của ngành công nghiệp kể từ những năm 1500, khi một máy in không xác định lấy một loại galley và tranh giành nó để tạo ra một cuốn sách mẫu vật. Nó đã tồn tại không chỉ năm thế kỷ, mà còn là bước nhảy vọt vào cách sắp xếp điện tử, về cơ bản vẫn không thay đổi. Nó đã được phổ biến vào những năm 1960 với việc phát hành các tấm letraset chứa các đoạn Lorem Ipsum, và gần đây hơn với phần mềm xuất bản máy tính để bàn như Aldus Pagemaker bao gồm các phiên bản của Lorem Ipsum.

tại sao chúng ta sử dụng nó?

Đó là một thực tế từ lâu là một người đọc sẽ bị phân tâm bởi nội dung có thể đọc được của một trang khi nhìn vào bố cục của nó. Điểm sử dụng Lorem Ipsum là nó có phân phối các chữ cái bình thường hơn, trái ngược với việc sử dụng ‘nội dung ở đây, nội dung ở đây, làm cho nó trông giống như tiếng Anh có thể đọc được. Nhiều gói xuất bản máy tính để bàn và trình chỉnh sửa trang web hiện sử dụng Lorem Ipsum làm văn bản mô hình mặc định của họ và tìm kiếm ‘Lorem Ipsum, sẽ phát hiện ra nhiều trang web vẫn còn trong giai đoạn trứng nước. Các phiên bản khác nhau đã phát triển qua nhiều năm, đôi khi là do tai nạn, đôi khi có mục đích (được đưa ra sự hài hước và tương tự).

tại sao chúng ta sử dụng nó?

Đó là một thực tế từ lâu là một người đọc sẽ bị phân tâm bởi nội dung có thể đọc được của một trang khi nhìn vào bố cục của nó. Điểm sử dụng Lorem Ipsum là nó có phân phối các chữ cái bình thường hơn, trái ngược với việc sử dụng ‘nội dung ở đây, nội dung ở đây, làm cho nó trông giống như tiếng Anh có thể đọc được. Nhiều gói xuất bản máy tính để bàn và trình chỉnh sửa trang web hiện sử dụng Lorem Ipsum làm văn bản mô hình mặc định của họ và tìm kiếm ‘Lorem Ipsum, sẽ phát hiện ra nhiều trang web vẫn còn trong giai đoạn trứng nước. Các phiên bản khác nhau đã phát triển qua nhiều năm, đôi khi là do tai nạn, đôi khi có mục đích (được đưa ra sự hài hước và tương tự).

Nó đến từ đâu?

Trái với niềm tin phổ biến, Lorem Ipsum không chỉ đơn giản là văn bản ngẫu nhiên. Nó có nguồn gốc trong một phần của văn học Latin cổ điển từ 45 trước Công nguyên, khiến nó hơn 2000 năm tuổi. Richard McClintock, một giáo sư Latin tại Hampden-Sydney College ở Virginia, đã tìm kiếm một trong những từ Latin mơ hồ hơn, Consectetur, từ một đoạn văn Lorem Ipsum, và đi qua các trích dẫn của từ trong văn học cổ điển, đã phát hiện ra nguồn gốc không thể nghi ngờ. Lorem Ipsum đến từ các phần 1.10.32 và 1.10.33 của DE de Finibus bonorum et malorum ((cực đoan của thiện và ác) của Cicero, được viết vào năm 45 trước Công nguyên. Cuốn sách này là một chuyên luận về lý thuyết về đạo đức, rất phổ biến trong thời Phục hưng. Dòng đầu tiên của Lorem Ipsum, Lor Lor Ipsum Dolor SIT AMET .., xuất phát từ một dòng trong Phần 1.10.32.

1 điểm Arial Loại văn bản 2 điểm Arial Loại văn bản 3 điểm Arial Loại văn bản 4 điểm Arial Loại văn bản 5 điểm Arial Loại văn bản 6 điểm Arial Loại văn bản 7 điểm ARIAL Loại văn bản
2 point arial type text
3 point arial type text
4 point arial type text
5 point arial type text
6 point arial type text
7 point arial type text

Ở đây, tôi chỉ sử dụng một tệp đánh dấu lớn hơn để chúng ta có thể thấy sự khác biệt về chất lượng PDF.

Lưu ý: Cha mẹ: The parent

Tag có thuộc tính ID. ID này sau này sẽ được sử dụng trong & nbsp; Truy vấn chọn của Kendo UI API.

Thứ ba, chúng tôi sẽ viết một hàm trong thẻ tập lệnh -

Bây giờ, nếu bạn thấy trong mã trên, tôi đã sử dụng API UI Kendo và một trong những tính năng là Drawdom (Vẽ nội dung DOM).

Mã trên sẽ chỉ cung cấp cho bạn tính năng để xuất HTML/CSS sang PDF. Mọi thứ đều đúng về nó nhưng chất lượng của PDF vẫn giành được tốt và API UI Kendo có giải pháp cho vấn đề bằng cách cung cấp cho chúng tôi bảng kiểu sẽ được áp dụng trên PDF đã xuất.

Nhưng trước khi áp dụng bảng kiểu, hãy để tôi hiển thị cho bạn tài liệu đã xuất từ ​​mã trên -

(Nhấp vào hình ảnh để xem tài liệu PDF)

Vì vậy, đây là các liên kết đến Kendo UI StyleSheet-

1. https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.common-material.min.css
2. https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.material.min.css

Chỉ cần thêm hai bảng kiểu trên trong trang xuất và chúng tôi rất tốt để đi.

Ngoài ra, bạn có thể xác định các phông chữ cho PDF đã xuất. Kendo UI đi kèm với một số phông chữ theo mặc định cho PDF đã xuất nhưng bạn có thể thêm các phông chữ tùy chỉnh vào PDF đã xuất của mình bằng cách xác định phần sau trong thẻ tập lệnh của bạn -

Một tính năng khác của việc xuất PDF với Kendo UI là một phần của việc xác định mẫu cho tiêu đề và chân trang của tài liệu như vậy,

Bây giờ, nội dung & nbsp; của HTML cũng có thể vượt ra ngoài một trang. Vì vậy, Kendo UI hỗ trợ xuất PDF nhiều trang, cũng được hỗ trợ trong tất cả các lựa chọn thay thế mà tôi đã đề cập khi bắt đầu blog này.

Nhưng các tính năng mà những người khác không có hoặc lợi thế mà Kendo UI có để xuất HTML/CSS sang PDF là nó có thể có một lần ngắt trang tự động dựa trên chiều cao của nội dung hoặc ngắt trang thủ công, có thể được kích hoạt bởi Chuyển thêm tham số có tên ForcePageBreak trong khi gọi phương thức Drawdom.forcePageBreak while calling drawdom method.

Đây là mã cho điều đó -

kendo.drawing
    .drawDOM("#myCanvas", 
    { 
        forcePageBreak: ".page-break", // add this class to each element where you want manual page break
        paperSize: "A4",
        margin: { top: "1cm", bottom: "1cm" },
        scale: 0.8,
        height: 500, 
        template: $("#page-template").html()
    })
        .then(function(group){
        kendo.drawing.pdf.saveAs(group, "Exported.pdf")
    });

tại sao chúng ta sử dụng nó?

Đó là một thực tế từ lâu là một người đọc sẽ bị phân tâm bởi nội dung có thể đọc được của một trang khi nhìn vào bố cục của nó. Điểm sử dụng Lorem Ipsum là nó có phân phối các chữ cái bình thường hơn, trái ngược với việc sử dụng ‘nội dung ở đây, nội dung ở đây, làm cho nó trông giống như tiếng Anh có thể đọc được. Nhiều gói xuất bản máy tính để bàn và trình chỉnh sửa trang web hiện sử dụng Lorem Ipsum làm văn bản mô hình mặc định của họ và tìm kiếm ‘Lorem Ipsum, sẽ phát hiện ra nhiều trang web vẫn còn trong giai đoạn trứng nước. Các phiên bản khác nhau đã phát triển qua nhiều năm, đôi khi là do tai nạn, đôi khi có mục đích (được đưa ra sự hài hước và tương tự).

Hãy cùng xem PDF trông như thế nào với tất cả các tính năng này -

(Nhấp vào hình ảnh để xem tài liệu PDF)

Vì vậy, đây là các liên kết đến Kendo UI StyleSheet-

(Nhấp vào hình ảnh để xem tài liệu PDF)

Vì vậy, đây là các liên kết đến Kendo UI StyleSheet-

Chỉ cần thêm hai bảng kiểu trên trong trang xuất và chúng tôi rất tốt để đi.

Ngoài ra, bạn có thể xác định các phông chữ cho PDF đã xuất. Kendo UI đi kèm với một số phông chữ theo mặc định cho PDF đã xuất nhưng bạn có thể thêm các phông chữ tùy chỉnh vào PDF đã xuất của mình bằng cách xác định phần sau trong thẻ tập lệnh của bạn -kept together.

Một tính năng khác của việc xuất PDF với Kendo UI là một phần của việc xác định mẫu cho tiêu đề và chân trang của tài liệu như vậy,

kendo.drawing
    .drawDOM("#myCanvas", 
    { 
        forcePageBreak: ".page-break", // add this class to each element where you want manual page break
        paperSize: "A4",
        margin: { top: "1cm", bottom: "1cm" },
        scale: 0.8,
        height: 500, 
        template: $("#page-template").html(),
        keepTogether: ".prevent-split"
    })
        .then(function(group){
        kendo.drawing.pdf.saveAs(group, "Exported.pdf")
    });

Bây giờ, nội dung & nbsp; của HTML cũng có thể vượt ra ngoài một trang. Vì vậy, Kendo UI hỗ trợ xuất PDF nhiều trang, cũng được hỗ trợ trong tất cả các lựa chọn thay thế mà tôi đã đề cập khi bắt đầu blog này.keepTogether attribute in the drawdom function of kendo and use that class name in your HTML wherever you want things to stick together and this will result in a document similar to the one below –

(Nhấp vào hình ảnh để xem tài liệu PDF)

Vì vậy, đây là các liên kết đến Kendo UI StyleSheet-

Chỉ cần thêm hai bảng kiểu trên trong trang xuất và chúng tôi rất tốt để đi.

Ngoài ra, bạn có thể xác định các phông chữ cho PDF đã xuất. Kendo UI đi kèm với một số phông chữ theo mặc định cho PDF đã xuất nhưng bạn có thể thêm các phông chữ tùy chỉnh vào PDF đã xuất của mình bằng cách xác định phần sau trong thẻ tập lệnh của bạn -HTML to pdf javascript, you will know about How to generate PDF documents using a JavaScript library.

Một tính năng khác của việc xuất PDF với Kendo UI là một phần của việc xác định mẫu cho tiêu đề và chân trang của tài liệu như vậy,Jspdf parallax,  and then click on the first result or simply click here (https://parall.ax/products/jspdf)

Bây giờ, nội dung & nbsp; của HTML cũng có thể vượt ra ngoài một trang. Vì vậy, Kendo UI hỗ trợ xuất PDF nhiều trang, cũng được hỗ trợ trong tất cả các lựa chọn thay thế mà tôi đã đề cập khi bắt đầu blog này.HTML5 client solution for generating PDFs.

Nhưng các tính năng mà những người khác không có hoặc lợi thế mà Kendo UI có để xuất HTML/CSS sang PDF là nó có thể có một lần ngắt trang tự động dựa trên chiều cao của nội dung hoặc ngắt trang thủ công, có thể được kích hoạt bởi Chuyển thêm tham số có tên ForcePageBreak trong khi gọi phương thức Drawdom.syntax, how you can make pdf from HTML using javascript like shown in the below image.

Đây là mã cho điều đó -generate an image form of pdf, this is the board.

tại sao chúng ta sử dụng nó?

Đó là một thực tế từ lâu là một người đọc sẽ bị phân tâm bởi nội dung có thể đọc được của một trang khi nhìn vào bố cục của nó. Điểm sử dụng Lorem Ipsum là nó có phân phối các chữ cái bình thường hơn, trái ngược với việc sử dụng ‘nội dung ở đây, nội dung ở đây, làm cho nó trông giống như tiếng Anh có thể đọc được. Nhiều gói xuất bản máy tính để bàn và trình chỉnh sửa trang web hiện sử dụng Lorem Ipsum làm văn bản mô hình mặc định của họ và tìm kiếm ‘Lorem Ipsum, sẽ phát hiện ra nhiều trang web vẫn còn trong giai đoạn trứng nước. Các phiên bản khác nhau đã phát triển qua nhiều năm, đôi khi là do tai nạn, đôi khi có mục đích (được đưa ra sự hài hước và tương tự).

Hãy để tôi cho bạn thấy PDF như thế nào.

Tệp PDF (ví dụ PDFMake HTML đến PDF)

Đây là một dạng hình ảnh & nbsp; hình ảnh của pdf. image form of PDF.

Và bạn có thể tạo các vòng tròn, vì vậy đây là tổng quan PDF về điều đó, bạn cũng có thể tạo hình chữ nhật.generate circles, so this is the PDF overview of that, you can also generate rectangles.

Bạn có thể nhìn thấy tất cả mọi thứ, bạn cũng có thể thay đổi màu có màu xanh lá cây màu đỏ.

Bây giờ, hãy để Lừa chuyển sang tài liệu, vì vậy chỉ cần nhấp vào đây để chuyển hướng đến trang tài liệu.documentation, so just click here to redirect to the Documentation page.

Dưới đây là các phương pháp khác nhau ở đó, bạn có thể sử dụng trong các dự án của mình. Vì vậy, chỉ cần đi qua nó, tôi sẽ không trải qua mọi phương pháp.

Vì vậy, tôi sẽ chỉ tạo một tài liệu PDF đơn giản bằng cách sử dụng JavaScript.PDF document using javascript.

Trước hết, để tạo một PDF từ HTML JavaScript, chúng tôi chỉ cần bao gồm CDN này, đó là mạng phân phối nội dung. Chỉ cần đưa tập lệnh này vào JavaScript của bạn.Content Delivery Network. Just include this script into your JavaScript.

OK, chúng tôi sẽ tạo ra một tài liệu HTML mới.

Notepad mở đầu tiên.open Notepad.

Vì vậy, bấm mới.click new.

Và lưu dưới dạng index.html, sau đó nhấp vào lưu và có.save as index.html, then click on save and Yes.

Vì vậy, trong tệp notepad của bạn, hãy viết cấu trúc của thẻ HTML, thẻ đầu, thẻ cơ thể, chỉ cần sao chép tập lệnh và dán nó vào tệp đó mà bạn sẽ tạo tài liệu PDF của mình như được hiển thị bên dưới.

Bây giờ, hãy mở tệp HTML đó, bạn chỉ cần khai báo một biến để chuyển đổi bản PDF này để tài liệu lưu trữ PDF cho bạn.variable in order to convert this PDF so the document is storing the PDF for you.

Vì vậy, hãy dán mã dưới đây vào tệp HTML đó.

Và sau đó, bạn chỉ cần cung cấp chỉnh sửa văn bản, chỉ cần sao chép mã dưới đây.

Vì vậy, PDF sẽ chứa JavaScript HTML đến PDF ở các tọa độ 10, 10 này.pdf will contain Javascript html to pdf at these coordinates 10, 10.

Và sau đó chỉ cần áp dụng phương pháp này

Điều này chỉ cần lưu tệp của bạn với tên PDFMake HTML này vào ví dụ PDF, sau đó lưu cái này. (Bạn có thể sử dụng bất kỳ tên nào bạn muốn thay vì & nbsp;pdfmake html to pdf example, then save this. (You can use any name you want instead of  pdfmake html to pdf example.pdf)

Bây giờ nếu bạn mở tệp HTML đó, sẽ ngay lập tức nhận được PDFMake HTML này thành ví dụ PDF.PDF tài liệu hoặc tệp PDF được tạo cho bạn.pdfmake html to pdf example.pdf document or PDF file generated for you.

Nếu bạn mở tệp PDFMake HTML đến PDF.pdfmake html to pdf example.pdf” file, inside you, can see “Javascript html to pdf ” is printed inside this PDF document.

Vì vậy, nó rất dễ dàng, bạn cũng có thể làm điều đó.

Bạn chỉ cần viết tập lệnh này và sau đó, bạn có thể tạo PDF bằng JavaScript trong vài giây.

Nếu bạn có bất kỳ nghi ngờ nào, xin vui lòng cho chúng tôi biết thông qua bình luận !!

Theo dõi chúng tôi trên & nbsp; Facebook & nbsp; | & nbsp; Twitter & nbsp; | & nbsp; LinkedIn.Facebook | Twitter | LinkedIn.

Hãy để Cronj hỗ trợ bạn ..!

Cảm ơn bạn !!!

Những bài viết liên quan:

https://www.cronj.com/blog/how-can-ai-video-analytics-prevent-coronavirus-covid-19-transmission/

Làm thế nào để tải lên, lưu hình ảnh vào node.js và express.js bằng javascript?

Mảng trong JavaScript: Tuyên bố | Thuộc tính | Phương pháp mảng

Virtual Dom | Trình duyệt DOM Những gì trong React JS là gì?

Hiểu tìm kiếm đàn hồi - nó hoạt động như thế nào?

Phương pháp chuỗi JavaScript | Thuộc tính | Các đối tượng

• Xử lý hình ảnh không gian màu (được giải thích với các mô hình RGB, CMY, HSI, màu sắc) 2020
• Reactjs Pagination: Làm thế nào để trang dữ liệu của bạn với phân trang ReactJS?
• HTML sang PDF JavaScript: Xuất HTML/CSS sang PDF bằng JavaScript
• Làm thế nào để tải lên, lưu hình ảnh vào node.js và express.js bằng javascript?
• Mảng trong JavaScript: Tuyên bố | Thuộc tính | Phương pháp mảng
• Virtual Dom | Trình duyệt DOM Những gì trong React JS là gì?
  
• Hiểu tìm kiếm đàn hồi - nó hoạt động như thế nào?
  
• Phương pháp chuỗi JavaScript | Thuộc tính | Các đối tượng