Làm cách nào để xuất html sang pdf?

JavaScript đã đi một chặng đường dài trong việc phục vụ nhiều hơn là một 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ả những thứ mà chúng ta thường làm 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.

“html2canvas” thực sự tạo ảnh chụp màn hình và lưu nó dưới dạng pdf bằng cách sử dụng base64 , Vì vậy, chất lượng Pdf không tốt và “Jspdf” tốt hơn để tạo Pdf nội dung bảng bằng dữ liệu động nhưng với “Pdfmake”, bạn thực sự có thể xuất một Html/ thích hợp

Nhưng hôm nay chúng ta sẽ thảo luận về Kendo UI API có tính năng vẽ các phần tử dom và xuất chúng thành tài liệu Pdf. Tôi sẽ chỉ cho các bạn quy trình từng bước để xuất nội dung của HTML/CSS thành Tài liệu Pdf (HTML sang pdf javascript)

Cách một trong những nhà bán lẻ lớn nhất thế giới sử dụng giải pháp phân tích video để chống lại vi-rút corona và tăng cường độ an toàn một cách đáng kể

Các bước để xuất HTML sang pdf javascript.  

Trước tiên, bạn sẽ cần thêm thư viện bằng CDN (http. // kiếm đạo. cdn. điện thoại. com/2017. 2. 621/js/kiếm đạo. tất cả các. tối thiểu. 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 công nghiệp in ấn và sắp chữ. Lorem Ipsum đã trở thành văn bản giả tiêu chuẩn của ngành kể từ những năm 1500, khi một nhà in không xác định lấy một bộ sưu tập kiểu chữ và xáo trộn nó để tạo thành một cuốn sách mẫu. Nó đã tồn tại không chỉ năm thế kỷ, mà còn là bước nhảy vọt sang sắp chữ đ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ờ 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 trê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ó?

Một thực tế đã được khẳng định từ lâu là người đọc sẽ bị phân tâm bởi nội dung dễ đọc của một trang khi nhìn vào bố cục của nó. Điểm quan trọng của việc sử dụng Lorem Ipsum là nó có sự phân bố các chữ cái ít nhiều bình thường, trái ngược với việc sử dụng 'Nội dung ở đây, nội dung ở đây', khiến nó trông giống như tiếng Anh có thể đọc được. Nhiều gói xuất bản trê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ẫu 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 sơ khai. Nhiều phiên bản khác nhau đã phát triển qua nhiều năm, đôi khi là do tình cờ, đôi khi là có chủ đích (chèn sự hài hước và những thứ tương tự)

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

Một thực tế đã được khẳng định từ lâu là người đọc sẽ bị phân tâm bởi nội dung dễ đọc của một trang khi nhìn vào bố cục của nó. Điểm quan trọng của việc sử dụng Lorem Ipsum là nó có sự phân bố các chữ cái ít nhiều bình thường, trái ngược với việc sử dụng 'Nội dung ở đây, nội dung ở đây', khiến nó trông giống như tiếng Anh có thể đọc được. Nhiều gói xuất bản trê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ẫu 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 sơ khai. Nhiều phiên bản khác nhau đã phát triển qua nhiều năm, đôi khi là do tình cờ, đôi khi là có chủ đích (chèn sự hài hước và những thứ tương tự)

Nó đến từ đâu?

Trái ngược 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ó bắt nguồn từ một tác phẩm văn học Latinh cổ điển từ năm 45 trước Công nguyên, tức là nó đã hơn 2000 năm tuổi. Richard McClintock, giáo sư tiếng Latinh tại Đại học Hampden-Sydney ở Virginia, đã tra cứu một trong những từ tiếng Latinh khó hiểu hơn, consectetur, từ một đoạn văn của Lorem Ipsum, và xem qua các trích dẫn của từ này trong văn học cổ điển, đã phát hiện ra nguồn gốc chắc chắn. Lorem Ipsum đến từ phần 1. 10. 32 và 1. 10. 33 của “de Finibus Bonorum et Malorum” (Cực điểm của Thiện và Ác) của Cicero, viết năm 45 TCN. Cuốn sách này là một chuyên luận về lý thuyết đạo đức, rất phổ biến trong thời kỳ Phục hưng. Dòng đầu tiên của Lorem Ipsum, “Lorem ipsum dolor sit amet. ”, xuất phát từ một dòng trong phần 1. 10. 32

Văn bản kiểu arial 1 point
Văn bản kiểu arial 2 point
Văn bản kiểu arial 3 point
Arial 4 point
5 point arial type text
6 point arial type text
7 point arial type text

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

Ghi chú. cha mẹ

thẻ có thuộc tính id. Mã này sau đó sẽ được API Kendo UI sử dụng trong truy vấn bộ chọn

Thứ ba, chúng ta sẽ viết một hàm trong thẻ script –

Bây giờ, nếu bạn thấy trong đoạn mã trên, tôi đã sử dụng API giao diện người dùng Kendo và một trong những tính năng của nó là DrawDom (nội dung dom vẽ)

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

Nhưng trước khi áp dụng biểu định kiểu, Hãy để tôi cho bạn xem tài liệu đã xuất từ ​​đoạn mã trên –

(Click vào hình để xem tài liệu Pdf)

Vì vậy, đây là các liên kết đến biểu định kiểu giao diện người dùng Kendo-

1. https. // kiếm đạo. cdn. điện thoại. com/2017. 2. 621/phong cách/kiếm đạo. vật liệu phổ biến. tối thiểu. css
2. https. // kiếm đạo. cdn. điện thoại. com/2017. 2. 621/phong cách/kiếm đạo. vật chất. tối thiểu. css

Chỉ cần thêm hai biểu định kiểu trên vào trang đã xuất và chúng ta đã sẵn sàng

Ngoài ra, bạn có thể xác định phông chữ cho pdf đã xuất. Giao diện người dùng Kendo đi kèm với một số phông chữ theo mặc định cho Pdf đã xuất nhưng bạn cũng có thể thêm phông chữ tùy chỉnh vào pdf đã xuất của mình bằng cách xác định thông tin 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à phần xác định mẫu cho Đầu trang và Chân trang của tài liệu như vậy,

Giờ đây, Nội dung của HTML cũng có thể vượt ra ngoài một trang. Vì vậy, giao diện người dùng Kendo hỗ trợ xuất Pdf nhiều trang, điều này cũng được hỗ trợ trong tất cả các lựa chọn thay thế mà tôi đã đề cập ở phần đầu của 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ể 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, Điều này có thể được kích hoạt bởi

Đâ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ó?

Một thực tế đã được khẳng định từ lâu là người đọc sẽ bị phân tâm bởi nội dung dễ đọc của một trang khi nhìn vào bố cục của nó. Điểm quan trọng của việc sử dụng Lorem Ipsum là nó có sự phân bố các chữ cái ít nhiều bình thường, trái ngược với việc sử dụng 'Nội dung ở đây, nội dung ở đây', khiến nó trông giống như tiếng Anh có thể đọc được. Nhiều gói xuất bản trê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ẫu 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 sơ khai. Nhiều phiên bản khác nhau đã phát triển qua nhiều năm, đôi khi là do tình cờ, đôi khi là có chủ đích (chèn sự hài hước và những thứ tương tự)

Bây giờ hãy xem PDF trông như thế nào với tất cả các tính năng này –

(Click vào hình để xem tài liệu Pdf)

Một tính năng khác mà giao diện người dùng Kendo hỗ trợ là giữ nguyên các phần tử hoặc giữ chúng lại với nhau. Để tôi cho bạn xem một tài liệu theo ý tôi muốn nói –

(Click vào hình để xem tài liệu Pdf)

Một trong những phần mềm phát hiện PPE được sử dụng rộng rãi ở Dubai, Ả Rập Saudi, Qatar, Mỹ, Canada, Anh và Bahrain

HTML sang pdf javascript

Nếu bạn cuộn xuống tài liệu ở trên, bạn sẽ thấy rằng tiêu đề của đoạn cuối nằm trên một trang và nội dung của nó ở một trang khác. Vì vậy, để giải quyết loại tình huống này, giao diện người dùng Kendo cung cấp một tham số khác có thể được chuyển đến phương thức drawDom được giữ cùng nhau

Hãy xem mã để hiểu –

________số 8

Sử dụng thuộc tính keepTogether trong chức năng drawdom của kendo và sử dụng tên lớp đó trong HTML của bạn bất cứ nơi nào bạn muốn mọi thứ dính vào nhau và điều này sẽ dẫn đến một tài liệu tương tự như tài liệu dưới đây –

(Click vào hình để xem tài liệu Pdf)

Toàn bộ đoạn mã trên có thể được thử tại võ đường Kendo UI ( http. //võ đường. điện thoại. com/otugA )

Phương pháp 2. cho HTML sang pdf javascript

Trong phương pháp chuyển HTML sang pdf javascript thứ hai này, bạn sẽ biết về Cách tạo tài liệu PDF bằng thư viện JavaScript

Vì vậy, bạn chỉ cần gõ vào Google, thị sai Jspdf này, rồi nhấp vào kết quả đầu tiên hoặc chỉ cần nhấp vào đây (https. // song song. ax/sản phẩm/jspdf)

Đây là giải pháp máy khách HTML5 hàng đầu để tạo tệp PDF

Vì vậy, nếu bạn cuộn xuống, bạn có thể thấy một số cú pháp, cách bạn có thể tạo pdf từ HTML bằng cách sử dụng javascript như trong hình bên dưới

Vì vậy, bạn có thể tạo một dạng hình ảnh của pdf, đây là bảng

Đây là đầu ra mà chúng tôi có, bạn cũng có thể tải xuống

Chỉ cần nhấp vào tải xuống để lấy tệp PDF

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

Tệp Pdf (ví dụ pdfmake HTML sang pdf)

Đây là dạng hình ảnh của 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 các hình chữ nhật

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

Bây giờ, hãy chuyển sang phần 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

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 đ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 javascript

Trước hết, để tạo một tệp pdf từ HTML javascript, chúng tôi chỉ cần đưa CDN này vào, đó 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

Ok, chúng ta sẽ tạo một tài liệu HTML mới

Đầu tiên mở Notepad

Vì vậy, nhấp vào mới

Và lưu dưới dạng chỉ mục. html, sau đó nhấp vào lưu và Có

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ẻ body, 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 tệp PDF này để tài liệu lưu trữ tệp PDF cho bạn

Vì vậy, hãy dán đoạ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ã bên dưới

Vì vậy, pdf sẽ chứa Javascript html sang pdf tại các tọa độ 10, 10

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

Điều này chỉ đơn giản là lưu tệp của bạn với tên này ví dụ pdfmake html sang pdf, sau đó lưu tệp này. (Bạn có thể sử dụng bất kỳ tên nào bạn muốn thay vì ví dụ pdfmake html to pdf. pdf)

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

Nếu bạn mở “ví dụ pdfmake html sang pdf đó. pdf”, bên trong bạn có thể thấy “Javascript html to pdf” được in bên trong tài liệu PDF này