Hướng dẫn create pdf from images javascript - tạo pdf từ hình ảnh 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.

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 npm hoặc yarn.

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

yarn add puppeteer

yarn add puppeteer

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

		
	
	
		"generatePDF()">Download as PDF
		
"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.

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

yarn add puppeteer

npm add puppeteer

yarn add puppeteer

// 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

// index.js

// Require Puppeteer.
const puppeteer = require('puppeteer');

async function generatePDF() {
	// Launch a new browser session.
	const browser = await puppeteer.launch();
	// Open a new `Page`.
	const page = await browser.newPage();

	// Go to our invoice page that we serve on `localhost:8000`.
	await page.goto('http://localhost:8000');
	// Store the PDF in a file named `invoice.pdf`.
	await page.pdf({ path: 'invoice.pdf', format: 'A4' });

	await browser.close();
}

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

yarn add puppeteer

yarn add puppeteer

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

yarn add puppeteer

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

yarn add puppeteer

npm add puppeteer

npm add puppeteer

npm add puppeteer

// index.js
const puppeteer = require('puppeteer');
const http = require('http');

// Create an instance of the HTTP server to handle the request.
http
	.createServer(async (req, res) => {
		// Set the content type so the browser knows how to handle the response.
		res.writeHead(200, { 'Content-Type': 'application/pdf' });

		const browser = await puppeteer.launch();
		const page = await browser.newPage();
		await page.goto('http://localhost:8000');
		// By removing the `path` option, we'll receive a `Buffer` from `page.pdf`.
		const buffer = await page.pdf({ format: 'A4' });

		await browser.close();

		// We can directly serve this buffer to the browser.
		res.end(buffer);
	})
	.listen(3000);

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ừ

npm add puppeteer

// index.js
const puppeteer = require("puppeteer");
const http = require("http");

http.createServer(async (req, res) => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.setContent(`




  
  
  
  


  

    
Our Invoice
  


`)
  const buffer = await page.pdf({ format: "A4" });
  await browser.close();

    res.end(buffer);
}

Ư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

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()
		.set({ html2canvas: { scale: 4 } })
		.from(element)
		.save();
}

Ư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.

• 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.

• 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.

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.