Hướng dẫn adobe pdf javascript

Một trường hợp sử dụng phổ biến trong JavaScript cho chuyển đổi HTML-to-PDF là cung cấp cho khách truy cập trang web của bạn khả năng tải xuống nội dung HTML dưới dạng tệp PDF. Ví dụ: hóa đơn, vé buổi hòa nhạc và vé chuyến bay có xu hướng có sẵn dưới dạng tải xuống PDF.

Nội dung chính Show

Ưu điểm và nhược điểm
Sự kết luận

Trong bài đăng này, chúng tôi sẽ xem xét hai thư viện JavaScript phổ biến để chuyển đổi các trang HTML thành PDFS. Đầu tiên, chúng tôi sẽ xem xét HTML2PDF. Sau đó, chúng tôi sẽ đi qua Puppeteer. Cuối cùng, chúng tôi sẽ bao gồm những ưu điểm và nhược điểm của cả hai thư viện.

html2pdf

Thư viện HTML2PDF cho phép bạn nhúng nó vào trang web của mình và tạo các phần trên trang web của bạn có thể tải xuống dưới dạng PDF, nhưng hôm nay, chúng tôi sẽ tập trung vào việc tạo PDF trong ứng dụng của chúng tôi có thể tải xuống. Ví dụ của chúng tôi, tôi đã sử dụng mẫu hóa đơn HTML đơn giản và tôi đã gõ một cách tĩnh vào hóa đơn mà chúng tôi sẽ sử dụng. Tuy nhiên, bạn có thể dễ dàng tạo HTML cho hóa đơn của riêng bạn trong phần phụ trợ của bạn nếu bạn thích.

Tôi đã tải trực tiếp thư viện HTML2PDF JavaScript đi kèm và nhập nó vào trang web của chúng tôi. Bạn có thể tải xuống từ kho lưu trữ GitHub hoặc nếu bạn đã có một người đóng gói trong trang web của mình, bạn có thể cài đặt nó qua

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<title>HTML-to-PDF Example</title>
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<script src="html2pdf.bundle.min.js"></script>

		<script>
			function generatePDF() {
				// Choose the element that our invoice is rendered in.
				const element = document.getElementById('invoice');
				// Choose the element and save the PDF for our user.
				html2pdf().from(element).save();
			}
		</script>
	</head>
	<body>
		<button onclick="generatePDF()">Download as PDF</button>
		<div id="invoice">
			<h2>Our Invoice</h2>
		</div>
	</body>
</html>

4 hoặc

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<title>HTML-to-PDF Example</title>
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<script src="html2pdf.bundle.min.js"></script>

		<script>
			function generatePDF() {
				// Choose the element that our invoice is rendered in.
				const element = document.getElementById('invoice');
				// Choose the element and save the PDF for our user.
				html2pdf().from(element).save();
			}
		</script>
	</head>
	<body>
		<button onclick="generatePDF()">Download as PDF</button>
		<div id="invoice">
			<h2>Our Invoice</h2>
		</div>
	</body>
</html>

Để bắt đầu, trước tiên chúng tôi xác định chức năng

yarn add puppeteer

0 sẽ nhận được phần tử mà chúng tôi đã hiển thị hóa đơn và sau đó gọi

yarn add puppeteer

1 với phần tử đó để tải xuống trực tiếp trên máy khách người dùng của chúng tôi. Sau đó, chúng tôi sẽ gọi chức năng này trong một nút tải xuống:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<title>HTML-to-PDF Example</title>
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<script src="html2pdf.bundle.min.js"></script>

		<script>
			function generatePDF() {
				// Choose the element that our invoice is rendered in.
				const element = document.getElementById('invoice');
				// Choose the element and save the PDF for our user.
				html2pdf().from(element).save();
			}
		</script>
	</head>
	<body>
		<button onclick="generatePDF()">Download as PDF</button>
		<div id="invoice">
			<h2>Our Invoice</h2>
		</div>
	</body>
</html>

Trong ví dụ trên, chúng tôi chỉ hiển thị tiêu đề hóa đơn của chúng tôi, nhưng kết quả cuối cùng được hiển thị bên dưới.

PUPPETEER

Puppeteer là một thư viện nút cung cấp cho bạn một API để kiểm soát phiên bản Chrome hoặc Chrom không đầu. Điều này cho phép bạn thực hiện hầu hết những việc mà bạn cũng có thể thực hiện thủ công trong trình duyệt và một trong những điều đó là tạo PDF từ trang web của bạn. Sự khác biệt giữa Puppeteer và HTML2PDF là bạn cần chạy Puppeteer trên máy chủ của mình và phục vụ PDF cho người dùng của bạn.

Đối với ví dụ Puppeteer, hãy để xây dựng một máy chủ Node.js nhỏ và phục vụ người dùng của chúng tôi một tệp PDF được tải xuống.

Hãy bắt đầu bằng cách tạo một dự án nút mới:

Sau khi khởi tạo dự án nút, chúng ta nên có một

yarn add puppeteer

2 trong thư mục của chúng tôi. Bây giờ, thời gian để thêm Puppeteer làm phụ thuộc vào dự án của chúng tôi:

yarn add puppeteer

npm add puppeteer

yarn add puppeteer

2 của bạn sẽ trông tương tự như thế này:

// package.json
{
	"name": "puppeteer-pdf-example",
	"version": "1.0.0",
	"description": "Example of how to generate a PDF with Puppeteer",
	"main": "index.js",
	"license": "MIT",
	"private": false,
	"dependencies": {
		"puppeteer": "^1.10.0"
	}
}

Ví dụ của chúng tôi, chúng tôi sẽ giả sử bạn có trang của mình với hóa đơn chạy trên

yarn add puppeteer

Bây giờ chúng tôi sẽ tạo một tệp

yarn add puppeteer

5 nơi chúng tôi sẽ yêu cầu Puppeteer, khởi chạy phiên trình duyệt mới, truy cập trang hóa đơn của chúng tôi và lưu tệp PDF:

yarn add puppeteer

Khi chúng tôi chạy tập lệnh qua

yarn add puppeteer

6, chúng tôi sẽ thấy một bản PDF được tạo độc đáo với tên

yarn add puppeteer

7 trong thư mục của chúng tôi.

Tuy nhiên, những gì chúng tôi thực sự muốn là phục vụ người dùng của chúng tôi PDF khi họ nhấp vào nút Tải xuống. Đối với điều này, chúng tôi sẽ sử dụng mô -đun

yarn add puppeteer

8 từ nút và trả lời với PDF hóa đơn khi người dùng truy cập trang của chúng tôi trên

yarn add puppeteer

Đầu tiên, chúng ta cần yêu cầu

yarn add puppeteer

8 trong kịch bản của chúng tôi. Chúng tôi sẽ bắt đầu một máy chủ nhỏ và đặt các tiêu đề thành

npm add puppeteer

1 để nói với trình duyệt rằng chúng tôi sẽ trả lời bằng PDF. Thay vì ghi vào một tệp khi tạo PDF, chúng tôi sẽ trực tiếp phục vụ bộ đệm mà Lôi đã trả lại từ

npm add puppeteer

2. Để thực hiện điều này, chúng tôi chỉ cần xóa tùy chọn

npm add puppeteer

yarn add puppeteer

Tuy nhiên, đôi khi chúng tôi đã giành chiến thắng muốn phục vụ một trang từ máy chủ web của chúng tôi và thay vào đó chúng tôi muốn sử dụng HTML mà chúng tôi đã tạo trực tiếp trên máy chủ của mình. Điều này có thể dễ dàng được thực hiện với chức năng Puppeteer từ

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<title>HTML-to-PDF Example</title>
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<script src="html2pdf.bundle.min.js"></script>

		<script>
			function generatePDF() {
				// Choose the element that our invoice is rendered in.
				const element = document.getElementById('invoice');
				// Choose the element and save the PDF for our user.
				html2pdf().from(element).save();
			}
		</script>
	</head>
	<body>
		<button onclick="generatePDF()">Download as PDF</button>
		<div id="invoice">
			<h2>Our Invoice</h2>
		</div>
	</body>
</html>

04, lấy HTML cần được hiển thị trên trang web làm đối số:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<title>HTML-to-PDF Example</title>
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<script src="html2pdf.bundle.min.js"></script>

		<script>
			function generatePDF() {
				// Choose the element that our invoice is rendered in.
				const element = document.getElementById('invoice');
				// Choose the element and save the PDF for our user.
				html2pdf().from(element).save();
			}
		</script>
	</head>
	<body>
		<button onclick="generatePDF()">Download as PDF</button>
		<div id="invoice">
			<h2>Our Invoice</h2>
		</div>
	</body>
</html>

Ưu điểm và nhược điểm

Ưu điểm lớn nhất của HTML2PDF là nó thực sự dễ dàng tạo PDF từ HTML của bạn trên máy khách của bạn, điều đó có nghĩa là bạn không cần máy chủ. Tuy nhiên, nhược điểm của phương pháp này là HTML2PDF chỉ chụp ảnh màn hình trang web của bạn và tạo ra PDF từ đó, điều đó có nghĩa là văn bản sẽ trông mờ khi bạn phóng to hoặc nếu bạn sử dụng màn hình võng mạc.

Bạn có thể định cấu hình HTML2PDF để sử dụng PNG thay vì JPEG, nhưng điều này khiến kích thước của PDF tăng đáng kể: đối với cùng độ phân giải trong đó phiên bản JPEG chỉ là 280 & nbsp; KB, phiên bản PNG là 28 & NBSP; MB.

Để chống lại điều này, tôi đã khuyên bạn nên chọn một độ phân giải lớn hơn để làm cho PDF của bạn trông sắc nét hơn. Để thực hiện việc này, thay đổi hàm

npm add puppeteer

5 và thêm các tham số cho tỷ lệ vào nó:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<title>HTML-to-PDF Example</title>
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<script src="html2pdf.bundle.min.js"></script>

		<script>
			function generatePDF() {
				// Choose the element that our invoice is rendered in.
				const element = document.getElementById('invoice');
				// Choose the element and save the PDF for our user.
				html2pdf().from(element).save();
			}
		</script>
	</head>
	<body>
		<button onclick="generatePDF()">Download as PDF</button>
		<div id="invoice">
			<h2>Our Invoice</h2>
		</div>
	</body>
</html>

Ưu điểm lớn nhất của Puppeteer là nó tạo ra một tệp PDF thực tế với nội dung văn bản thay vì chỉ sử dụng một hình ảnh. Bạn có thể chọn và sao chép văn bản từ PDF và bạn không cần phải lo lắng về độ phân giải vì nó sẽ luôn luôn sắc nét. Ngoài ra, kích thước tệp thấp hơn đáng kể; So với ví dụ HTML2PDF, Puppeteer, kết quả PDF nhỏ hơn khoảng bốn lần.

Nhược điểm chính của việc sử dụng Puppeteer là bạn sẽ cần chạy một máy chủ thay vì tạo PDF trên máy khách.

Sự kết luận

Nếu bạn cần một cái gì đó nhanh chóng và không muốn xây dựng bất cứ thứ gì trên máy chủ của mình để tạo các tệp PDF, bạn sẽ rất tốt để đi với HTML2PDF. Tuy nhiên, xem xét kích thước tệp và hình ảnh kết quả tăng lên, tôi đã khuyên bạn nên xây dựng một thành phần trên máy chủ của mình với Puppeteer để bạn có thể phục vụ các tệp PDF đẹp.

Và nếu bạn muốn tiết kiệm thời gian với giải pháp ngoài hộp, hãy đảm bảo kiểm tra thế hệ PDF cho bộ xử lý PSPDFKIT, cung cấp hỗ trợ cho:

Các biểu mẫu - Các hình thức và đầu vào HTML sẽ được chuyển đổi thành các biểu mẫu PDF có thể điền, hiện không có thể với Puppeteer. — HTML forms and inputs will be converted to fillable PDF forms, which currently isn’t possible with Puppeteer. — HTML forms and inputs will be converted to fillable PDF forms, which currently isn’t possible with Puppeteer.
API HTTP - Bộ xử lý có thể được kiểm soát thông qua API HTTP với cơ chế xác thực/ủy quyền linh hoạt, làm cho nó phù hợp cho cả phụ trợ và sử dụng frontend. — Processor can be controlled via an HTTP API with a flexible authentication/authorization mechanism, making it suitable for both backend and frontend use. — Processor can be controlled via an HTTP API with a flexible authentication/authorization mechanism, making it suitable for both backend and frontend use.
Quy trình công việc mở rộng - Bạn có thể kết hợp thế hệ PDF với các hoạt động khác. Ví dụ: bạn có thể tạo một tài liệu, tạo trang giới thiệu được xác định trước và Watermark tất cả các trang trong một yêu cầu API duy nhất. — You can combine PDF generation with other operations. For example, you can generate a document, prepend a predefined introduction page, and watermark all pages in a single API request. — You can combine PDF generation with other operations. For example, you can generate a document, prepend a predefined introduction page, and watermark all pages in a single API request.

Bộ xử lý PSPDFKIT kết hợp thế hệ PDF với các hoạt động tài liệu mạnh mẽ có thể hợp lý hóa các tác vụ lặp đi lặp lại như hợp nhất và mờ. Kiểm tra nó với bản dùng thử miễn phí của chúng tôi.

Tùy chỉnh các tệp PDF bằng JavaScript dựa trên phiên bản JavaScript 1.5 của ISO-16262 (trước đây gọi là ECMAScript), JavaScript trong phần mềm Adobe Acrobat thực hiện các đối tượng, phương thức và thuộc tính cho phép bạn điều khiển các tệp PDF, tạo các tệp PDF do cơ sở dữ liệu, của các tệp PDF, và nhiều hơn nữa.implements objects, methods, and properties that enable you to manipulate PDF files, produce database-driven PDF files, modify the appearance of PDF files, and much more.implements objects, methods, and properties that enable you to manipulate PDF files, produce database-driven PDF files, modify the appearance of PDF files, and much more.

Rõ ràng mã JavaScript trong PDF thường được gọi là Acrojs hoặc Acrobat JavaScript.JavaScript code in PDFs is frequently called AcroJS or Acrobat JavaScript.JavaScript code in PDFs is frequently called AcroJS or Acrobat JavaScript.