Url sang pdf javascript

Một trường hợp sử dụng biến phổ biến trong JavaScript để chuyển đổi HTML-to-PDF 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 định dạng tệp PDF. Ví dụ. hóa đơn, vé buổi hòa nhạc 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 Hiển thị

  • Ưu điểm và nhược điểm
  • Kết luận
  • JavaScript could create PDF not?
  • Làm cách nào để nhúng JavaScript vào PDF?
  • Làm cách nào để mở PDF JavaScript?
  • Làm cách nào để chuyển đổi các phần tử HTML thành PDF?

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ẽ tổng hợp những điểm ưu 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 để bạn có thể tải xuống bên dưới 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. . 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 đã nhập một cách thu 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 đơn hóa 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



	
		"utf-8" />
		"X-UA-Compatible" content="IE=edge" />
		HTML-to-PDF Example
		"viewport" content="width=device-width, initial-scale=1" />
		

		
	
	
		
		
"invoice">

Our Invoice

4 hoặc


	
		"utf-8" />
		"X-UA-Compatible" content="IE=edge" />
		HTML-to-PDF Example
		"viewport" content="width=device-width, initial-scale=1" />
		

		
	
	
		
		
"invoice">

Our Invoice

5

Để 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ị đơn hóa 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.


	
		"utf-8" />
		"X-UA-Compatible" content="IE=edge" />
		HTML-to-PDF Example
		"viewport" content="width=device-width, initial-scale=1" />
		

		
	
	
		
		
"invoice">

Our Invoice

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

Url sang pdf javascript

MÚA MÚA

Puppeteer là một nút thư viện cung cấp cho bạn một API để kiểm tra 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 công việc mà bạn cũng có thể thực hiện thủ công trong quá 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 Node máy chủ. 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

Vui lòng bắt đầu bằng cách tạo một nút dự án mới

Sau khi khởi tạo các nút dự án, 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
____7
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
4

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 động phiên bản 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
0

Khi chúng tôi chạy 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 PDF của chúng tôi 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 module -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
9

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

yarn add puppeteer
8 trong bản kịch 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 ____71 để nói với chương trình rằng chúng tôi sẽ trả lời bằng PDF. Thay vì ghi vào 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 ____73.
yarn add puppeteer
9

Tuy nhiên, đôi khi chúng tôi đã giành được chiến thắng muốn phục vụ một trang từ web máy chủ 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 from

npm add puppeteer
4, get HTML to be show on the page web as a number.


	
		"utf-8" />
		"X-UA-Compatible" content="IE=edge" />
		HTML-to-PDF Example
		"viewport" content="width=device-width, initial-scale=1" />
		

		
	
	
		
		
"invoice">

Our Invoice

1

Ư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ẽ bị 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 một tốc độ phân giải trong phiên bản JPEG đó chỉ là 280 & nbsp;

Để chống lại điều này, tôi đã khuyến nghị 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 công việc này, hãy thay đổi chức năng

npm add puppeteer
5 và thêm các tham số cho Tỷ lệ hợp lệ vào nó



	
		"utf-8" />
		"X-UA-Compatible" content="IE=edge" />
		HTML-to-PDF Example
		"viewport" content="width=device-width, initial-scale=1" />
		

		
	
	
		
		
"invoice">

Our Invoice

3

Ư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 lắng nghe về độ phân giải vì nó sẽ luôn sắc nét. Ngoài ra, kích thước tệp thấp hơn đáng kể;

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

Kết luận

Nếu bạn cần một thứ 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, thì bạn sẽ rất tuyệt khi sử dụng HTML2PDF. Tuy nhiên, hãy xem xét kích thước tệp và kết quả hình ảnh tăng lên, tôi đã khuyến nghị 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 điện hóa với hộp giải pháp bên ngoài, hãy đảm bảo kiểm tra thế hệ PDF để bộ xử lý PSPDFKIT, cung cấp hỗ trợ cho

  • Các biểu mẫu - Các biểu 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, không thể thực hiện được với Puppeteer. — Các biểu mẫu và thông tin đầu vào HTML sẽ được chuyển đổi thành các biểu mẫu PDF có thể điền, điều hiện không thể thực hiện được với Puppeteer

  • API HTTP - Bộ xử lý có thể được kiểm tra thông tin qua API HTTP với cơ chế xác thực/ủy quyền linh hoạt, làm cho nó phù hợp với cả phụ trợ và sử dụng giao diện người dùng. — 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, khiến nó phù hợp cho cả việc sử dụng phụ trợ và giao diện người dùng

  • 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 tài liệu, tạo giới hạn trang đã được xác định trước và Hình mờ cho tất cả các trang trong một yêu cầu API duy nhất. — Bạn có thể kết hợp tạo PDF với các thao tác khác. Ví dụ: bạn có thể tạo tài liệu, thêm vào trước trang giới thiệu được xác định trước và đánh dấu mờ tất cả các trang trong một yêu cầu API

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

JavaScript could create PDF not?

Chúng tôi có thể bắt đầu bằng cách giới thiệu JSPDF, JSPDF là một thư viện nguồn mở để tạo PDF chỉ bằng JavaScript. Nó chỉ đơn giản là tạo một trang PDF và áp dụng định dạng của bạn cho trang. Lưu ý rằng chúng tôi có thể thay đổi trình bày dữ liệu bên trong tệp PDF đã tải xuống bằng cách chỉnh sửa định hướng và định dạng đã chỉnh sửa. jsPDF là một thư viện mã nguồn mở để tạo pdf chỉ bằng JavaScript . Nó chỉ đơn giản là tạo một trang pdf và áp dụng định dạng của bạn cho trang. Lưu ý rằng chúng tôi có thể thay đổi cách trình bày dữ liệu bên trong tệp PDF đã tải xuống bằng cách chỉnh sửa hướng và định dạng.

Làm cách nào để nhúng JavaScript vào PDF?

Thêm JavaScript vào tài liệu PDF. .

Bước 1. Tải tài liệu PDF hiện có. Tải một tài liệu PDF hiện có bằng phương thức tĩnh () của lớp pddocument.

Bước 2. Tạo đối tượng pdactionjavascript

Bước 3. Nhúng tập lệnh Java vào tài liệu

Bước 4. Lưu tài liệu

Bước 5. Đóng tài liệu

Làm cách nào để mở PDF JavaScript?

Mở Adobe Acrobat Reader. Chuyển đến Chỉnh sửa > Tùy chọn Vào Chỉnh sửa > Tùy chọn. Trong Danh mục, hãy nhấp vào JavaScript. Trong phần JavaScript, hãy chọn Bật Acrobat JavaScript .

Làm cách nào để chuyển đổi các phần tử HTML thành PDF?

Cách chuyển đổi các trang HTML thành tệp PDF. .

Trên máy tính Windows, hãy mở một trang web HTML trong Internet Explorer, Google Chrome hoặc Firefox