HTML sang PDF js

Tạo PDF là một trong những tính năng quan trọng nhất trong việc xây dựng trang web. Tạo PDF từ định dạng HTML sẽ hữu ích ở nhiều nơi trong khi xây dựng trang web để tạo báo cáo

Đây là một số công cụ tạo PDF mà tôi đã tạo cho khách hàng của mình trong khi cung cấp dịch vụ tự do

1. Công cụ đánh giá khách hàng – Báo cáo kế hoạch dùng thuốc
2. Công cụ đánh giá bán hàng – API thông qua báo cáo bán hàng của Amazon
3. Công cụ quản lý nguyên vật liệu – Báo cáo tồn kho

Các công cụ này chuyển đổi các mẫu HTML hoặc dữ liệu động dựa trên cơ sở dữ liệu thành PDF và cung cấp bản tải xuống

Khi thêm tính năng thực hiện chuyển HTML sang PDF nên linh hoạt lấy nguồn dưới mọi hình thức. Các dạng nguồn HTML khác nhau cho quá trình tạo PDF có thể là,

1. chuỗi HTML
2. Đối tượng HTML có tham chiếu bộ chọn
3. tệp HTML

Thư viện JavaScript jsPDF hỗ trợ các dạng đầu vào khác nhau để tạo PDF. Ví dụ: nó sử dụng phụ thuộc “dompurify” để triển khai chuyển đổi HTML sang PDF

jsPDF là thư viện JavaScript tốt nhất để tạo tệp PDF ở phía máy khách. Chúng ta đã thấy ví dụ jsPDF để chuyển đổi các nguồn HTML thành PDF. Bài viết này sẽ tạo một ví dụ để lấy tệp HTML để tạo PDF trong JavaScript

Các công cụ hiện có để tạo PDF

Có một số công cụ phổ biến tồn tại trực tuyến để xử lý chuyển đổi HTML sang PDF. Bạn có thể tìm thấy trình đọc và trình chuyển đổi PDF tốt nhất trong bài viết được liên kết

Dompdf là thư viện chuyển đổi HTML sang PDF giúp chuyển đổi các tệp HTML thành PDF. Nó cũng chấp nhận đánh dấu HTML được nhập thủ công. Tải xuống Dompdf từ Github để cài đặt nó vào một ứng dụng

Về ví dụ jsPDF này

Ví dụ này chỉ đơn giản là chuyển đổi HTML sang PDF bằng JavaScript với một vài dòng mã

Nó sử dụng thư viện jsPDF để xây dựng một công cụ tạo PDF tùy chỉnh ở phía máy khách

Chúng ta đã thấy một số ví dụ jsPDF về chuyển đổi HTML sang PDF. Nếu bạn muốn có một ví dụ về cách tạo một tệp PDF nhiều trang từ một tài liệu HTML dài

Ví dụ này cho phép người dùng duyệt tệp HTML đầu vào. Trang đích hiển thị giao diện người dùng biểu mẫu có trường nhập tệp để chọn tệp HTML nguồn

Nó bao gồm 2 bước để đạt được việc tạo HTML sang PDF trong JavaScript

1. Bước 1. Đọc dữ liệu HTML và hiển thị bản xem trước trong giao diện người dùng
2. Bước 2. Tạo PDF và cung cấp tùy chọn tải xuống tệp đầu ra

Nó xử lý xác thực JavaScript và hạn chế loại tệp trước khi bắt đầu tạo PDF. Nó chứa JavaScript để nhập và khởi tạo jsPDF. Nó sử dụng phụ thuộc htmltocanvas để chuyển đổi nội dung tệp HTML đã tải lên thành PDF

Tệp ví dụ HTML sang PDF

Hình ảnh bên dưới hiển thị cấu trúc tệp của ví dụ tạo HTML sang PDF này

Nó chứa một mẫu HTML mẫu trong thư mục Mẫu. Bạn có thể sử dụng mẫu để kiểm tra tập lệnh ví dụ này

chỉ mục. php có giao diện người dùng dạng HTML để duyệt qua “. tài nguyên tệp html”

Nó xử lý quá trình tạo PDF hai bước với chuyển đổi. tập tin js. Nó đọc tệp HTML và gửi nội dung đến chức năng thư viện phụ thuộc vào jsPDF. Nó sử dụng nội dung HTML để tạo PDF đầu ra

Các node_modules chứa tất cả các thành phần phụ thuộc bắt buộc của thư viện jsPDF. Bằng cách chạy lệnh npm thích hợp, nó tạo ra node_modules

npm install jspdf --save

Tạo giao diện người dùng để tải lên mã nguồn HTML

Thêm tập lệnh này để hiển thị biểu mẫu để chọn nguồn của hoạt động phụ trợ HTML sang PDF. Nó chứa một nút gửi gọi JavaScript để đọc nội dung HTML đã tải lên

Nó có một vùng chứa mục tiêu để hiển thị bản xem trước của nội dung tệp đã tải lên. Trong màn hình xem trước, giao diện người dùng chứa nút “Tạo” để tải tệp PDF đầu ra xuống trình duyệt

mục lục. php

Convert HTML file to PDF




    

        Convert HTML file to PDF
        
            

                Upload HTML file:  
            
            

                
            
            

                 
                
                
            





        
    

    
    
    

Đây là mẫu HTML mẫu được tạo cho ví dụ Javascript PDF này. Bạn có thể chọn bất kỳ tệp HTML mẫu nào từ máy tính của mình

Điều này sẽ giúp bạn tiết kiệm công sức tạo nguồn để thử nghiệm ban đầu mã tạo HTML sang PDF

Mẫu/html-mẫu. html

	Thank you for registering with us.
	
This is the acknowledgement of your registeration for attending the
		event.
	

		Event Name:
Machine learning introduction for kids
	
	

		Event Date:
27 May 2021
	
	

		Time:
10:30 AM
	
	

		Venue:
AMC Graduate Center,
25, AMC Street,
New York, USA.
	
	

		Contact our Organizers' Team if you need any support.
	

Tôi đã sử dụng CSS đơn giản để thiết kế mẫu mã nguồn. Nó giúp tạo biên nhận đăng ký sự kiện trong HTML

nội dung/css/kiểu. css

#container {
    -webkit-font-smoothing: antialiased;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: .9em;
    color: #1e2a28;
    width: 740px;
    margin: 0 auto;
    padding: 12px 12px 0px 36px;
}

.input-form {
    background: #ffffff;
    padding: 10px 25px;
    border-radius: 3px;
    text-align: left;
    border: #ccc 1px solid;
}

.row {
    margin: 18px 0;
}

.input-file {
    border-radius: 3px;
    border: #a6a6a6 1px solid;
    padding: 10px;
    margin-bottom: 10px;
}

.btn-preview {
    padding: 10px 30px;
    border-radius: 3px;
    display: inline-block;
    cursor: pointer;
    color: #211c1c;
    background-color: #36de5c;
    border: #27a544 1px solid;
}

.btn-generate {
    padding: 10px 30px;
    border-radius: 3px;
    display: inline-block;
    cursor: pointer;
    color: #211c1c;
    background-color: #36de5c;
    border: #27a544 1px solid;
    display: none;
}

.preview {
    display: none;
    padding: 20px;
    border-radius: 3px;
    box-shadow: 0 1px 6px rgb(32 33 36/ 28%);
    border-color: rgba(223, 225, 229, 0);
}

.heading {
    text-align: center;
}

.form-label {
    display: block;
    margin-bottom: 5px;
}

.error {
    color: #ee0000;
    margin-left: 10px;
}

hàm jsPDF để tạo PDF trong JavaScript

Trong JavaScript, chuyển đổi PDF được thực hiện theo hai bước. Đầu tiên, nó đọc nội dung tệp và hiển thị bản xem trước trong giao diện người dùng. Sau đó, nó lấy nội dung xem trước và tạo PDF bằng JavaScript

Chuyển đổi. js thực hiện việc này bằng hai hàm readHTML() và convertHTMLToPDF()

readHTML() lấy đường dẫn tạm thời của tệp đã tải lên và đọc nội dung bằng FileReader(). Nó tải bản xem trước vào mục tiêu được chỉ định. Bước này giúp người dùng yên tâm về nội dung trước khi gọi JavaScript chuyển đổi PDF

Tệp HTML chuyển đổi PDF() nhập thư viện jsPDF và khởi tạo nó. Nó gọi. html() phụ thuộc vào htmltocanvas. Nó chuyển đổi trang xem trước HTML sang định dạng PDF từ nó

Sau đó, cuối cùng, các. save() trong lời nhắc gọi lại để tải xuống tài liệu PDF đã tạo

nội dung/js/chuyển đổi. js

function readHTML() {
	// get the HTML source file path
	var path = document.getElementById("fileUpload").files[0];
	var contents;
	$("#error-message").html("");
	$("#fileUpload").css("border", "#a6a6a6 1px solid");
	if ($(path).length != 0) {
		var r = new FileReader();
		r.onload = function(e) {
			// read HTML file content
			contents = e.target.result;
			// show JavaScript PDF preview
			$(".preview").show();
			$("#temp-target").html(contents);
			
			$(".btn-preview").hide();
			$(".btn-generate").show();
		}
		r.readAsText(path);
	} else {
		$("#error-message").html("required.").show();
		$("#fileUpload").css("border", "#d96557 1px solid");
	}
}

function converHTMLFileToPDF() {
	const { jsPDF } = window.jspdf;
	var doc = new jsPDF('l', 'mm', [1200, 1210]);

	var pdfjs = document.querySelector('#temp-target');

	// Convert HTML to PDF in JavaScript
	doc.html(pdfjs, {
		callback: function(doc) {
			doc.save("output.pdf");
		},
		x: 10,
		y: 10
	});
}

Xuất ảnh chụp màn hình để tải lên tệp HTML

Ảnh chụp màn hình này hiển thị giao diện người dùng với tùy chọn tải tệp lên. Nó hiển thị bản xem trước mẫu của HTML đã tải lên

Nút “Tạo PDF” trong hình bên dưới ban đầu bị ẩn. Sau đó, khi xem trước, tập lệnh sẽ bật nó lên

Sự kiện nhấp chuột vào nút “Tạo PDF” sẽ kích hoạt chuyển đổi HTML sang PDF để lưu. file PDF

Phần kết luận

Tập lệnh ví dụ được tạo trong bài viết này giải thích cách dễ dàng thực hiện việc tạo HTML sang PDF trong JavaScript bằng cách sử dụng jsPDF

Chúng tôi đã thấy các loại nguồn HTML đầu vào có thể có cho quy trình tạo PDF

jsPDF là thư viện phù hợp nhất để triển khai công cụ tạo HTML sang PDF

Ví dụ jsPDF này có sự tách biệt rõ ràng giữa việc đọc nội dung nguồn và tạo HTML thành PDF trong JavaScript. Bước xem trước chương trình có thể giúp xem qua trước khi tải xuống tệp PDF. Bạn tải về kịch bản ví dụ dưới đây

Làm cách nào để tạo PDF trong JS?

Làm cách nào để chuyển đổi HTML sang PDF trong React js?

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

Làm cách nào để tạo PDF từ HTML trong nút JS?