Cũng khá lâu rồi, tầm mấy năm trước, mình đã tạo một ứng dụng Android để chuyển đổi trang web HTML sang PDF. Dù tính năng đơn giản nhưng mình thấy cũng có khá nhiều người sử dụng. Ưu điểm của PDF là bạn có thể mang đi trong ấn phẩm mà không sợ mất định dạng, hầu hết các máy tính bây giờ đều cài đặt sẵn ứng dụng đọc PDF…
Về kỹ thuật chung, bạn có 2 lựa chọn
- Một là chuyển đổi trực tiếp trên thiết bị di động. Với giải pháp này, bạn sẽ không cần đến máy chủ làm trung gian, tất cả sẽ xử lý hết trên ứng dụng di động. Nhưng nhược điểm là cần nhiều tài nguyên để xử lý, mà bạn biết rồi đó, tài nguyên của điện thoại luôn hạn chế, không thể nào bì với máy chủ được
- Hai là tạo một máy chủ để chuyển đổi html sang PDF, ứng dụng di động chỉ có nhiệm vụ tải tệp PDF về mà thôi
Bài viết hôm nay mình sẽ hướng dẫn các bạn tạo server sử dụng Node. js để chuyển đổi HTML sang PDF
Kỹ thuật sử dụng trong bài viết
- Nút. js. Cài đặt nút. js trên window/Ubuntu
- Thư viện múa rối
Chúng ta bắt đầu thôi nào
Nội dung chính của bài viết
Chuyển đổi HTML sang PDF bằng cách sử dụng Nút. js + Người múa rối
Trước khi bắt tay thực thi, chúng ta cùng nhìn qua xem Pupperteer là gì đã nhé?
Nguyên bản định nghĩa của tác giả
Puppeteer là thư viện Node cung cấp API cấp cao để kiểm soát Chrome hoặc Chromium qua Giao thức DevTools. Puppeteer chạy không đầu theo mặc định, nhưng có thể được định cấu hình để chạy Chrome hoặc Chromium đầy đủ [không đầu]. Tài liệu chính thức của nghệ sĩ múa rối
Về cơ bản, bạn hiểu Puppeteer là một trình duyệt chạy trên nút nền. js. Nếu bạn đọc tài liệu của Puppeteer, tác vụ đầu tiên được đề cập đến đó là khả năng tạo ảnh chụp màn hình và PDF từ các trang web
🔥 Bài viết hướng dẫn tạo ảnh chụp màn hình với Puppeteer. Chụp ảnh trang web với Node. js + Người múa rối
#1- Cài đặt và sử dụng Puppeteer cơ bản
Để cài đặt Puppeteer, bạn thực hiện giống như mọi mô-đun khác thôi. Use NPM thì gõ lệnh sau
npm i puppeteer # or "yarn add puppeteer"
Còn đây là mã đoạn sử dụng Puppeteer cơ bản
const puppeteer = require['puppeteer'] async function printPDF[] { const browser = await puppeteer.launch[{ headless: true }]; const page = await browser.newPage[]; await page.goto['//vntalking.com', {waitUntil: 'networkidle0'}]; const pdf = await page.pdf[{ format: 'A4' }]; await browser.close[]; return pdf }]
Trong ví dụ trên, chúng ta đơn giản là truyền vào một URL và yêu cầu Puppeteer chuyển sang PDF
Đầu tiên, chúng ta mở trình duyệt [việc tạo PDF chỉ được hỗ trợ ở chế độ headless, đó là lý do chúng ta phải tạo thiết lập giá trị headless: true
]. Sau đó, chúng ta mở một trang mới, đặt chế độ xem và điều hướng tới URL được cung cấp [trong ví dụ này là https. //vntalking. com]
Tùy chọn waitUntil: ‘networkidle0’
thực chất là chúng ta thiết lập thời gian chờ giá trị cho Puppeteer. Nếu không có kết nối mạng trong vòng 500 mili giây, Puppeteer sẽ tự động kết thúc yêu cầu tới URL. Tham khảo thông số cài đặt API của Puppeteer tại đây
Cuối cùng, chúng ta lưu PDF vào một biến và đóng trình duyệt và trả lại tệp PDF
Lưu ý. Hàm page.pdf[{...}
nhận một tùy chọn. Với tùy chọn này, bạn có thể cấu hình để lưu tệp PDF vào đĩa theo một đường dẫn chỉ định. Nếu bạn không chỉ định điều này, thì hàm này chỉ trả về một bộ đệm của PDF mà thôi
Trong một số trường hợp, bạn cần tạo PDF từ các trang web cần phải đăng nhập. Ví dụ. Bạn muốn xuất PDF từ trang Admin dashboard để báo cáo. Để làm được điều này, bạn cần phải điều hướng tới trang đăng nhập, kiểm tra trang đăng nhập để biết ID hoặc tên đăng nhập rồi đền thông tin đăng nhập
await page.type['#email', process.env.PDF_USER] await page.type['#password', process.env.PDF_PASSWORD] await page.click['#submit']
Lưu ý. Thông tin đăng nhập nên lưu vào các biến môi trường, không nên mã hóa chúng
#2- Xử lý phong cách
Puppeteer cũng có một số giải pháp để bạn thao tác và xử lý kiểu CSS của trang HTML trước khi tạo PDF
await page.addStyleTag[{ content: '.nav { display: none} .navbar { border: 0px} #print-button {display: none}' }]
#3- Gửi file PDF tới khách hàng
Sau khi chúng ta tạo PDF xong ở trên máy chủ, nhiệm vụ tiếp theo là gửi chúng đến máy khách
Để khách hàng có thể tải xuống bản PDF này về, nếu bạn không lưu tệp PDF thành tệp trên đĩa ở máy chủ, bạn cần phải gửi bộ đệm đó [phải đúng loại nội dung] cho khách hàng
printPDF.then[pdf => { res.set[{ 'Content-Type': 'application/pdf', 'Content-Length': pdf.length }] res.send[pdf]
Phía sau máy khách chỉ đơn giản là gửi yêu cầu tới máy chủ để lấy PDF về
Ví dụ javascript phía client
function getPDF[] { return axios.get[`${API_URL}/your-pdf-endpoint`, { responseType: 'arraybuffer', headers: { 'Accept': 'application/pdf' } }]
Khi đã có bộ đệm, việc chuyển bộ đệm sang PDF cũng do khách hàng thực hiện
Ví dụ Javascript lưu pdf phía client
savePDF = [] => { this.openModal[‘Loading…’] // open progress dialog return getPDF[] // API call .then[[response] => { const blob = new Blob[[response.data], {type: 'application/pdf'}] const link = document.createElement['a'] link.href = window.URL.createObjectURL[blob] link.download = `your-file-name.pdf` link.click[] this.closeModal[] // close progress dialog }] .catch[err => /** error handling **/] } ... Save as PDF
Vậy là xong rồi đấy, cuối cùng thì người dùng nhấp vào nút “save as PDF” để duyệt lưu PDF
Thay lời kết
Qua bài viết này, chúng ta đã biết cách xây dựng một máy chủ để chuyển đổi một trang web HTML sang PDF bằng Node. js + Người múa rối. Khi bạn đã có máy chủ như thế này rồi, việc bạn tạo ứng dụng khách rất đơn giản, nó có thể là ứng dụng Android, iOS hoặc ứng dụng web trên trình duyệt
Mình hi vọng bài viết giúp được các bạn trong dự án đang và sắp tới. Bạn có sử dụng phương pháp này để tạo PDF từ trang web HTML không?
💦 Đọc thêm bài viết về Node. js
- [JS] Xây dựng ứng dụng web với NodeJS + ExpressJS
- [JS] Xử lý LỖI trong NodeJS sao cho đúng?
- [JS] Hướng dẫn thu thập dữ liệu trang web bằng NodeJS
Tài liệu tham khảo
- https. //github. com/con rối/con rối
- https. //trung bình. com/the-node-js-collection/generating-pdf-from-html-with-node-js-and-puppeteer-c5a0622e8e0a
- https. //nodejs. org/vi/docs/
Nhận sách học Flutter qua 65 ứng dụng
Flutter là nền tảng thiết lập nền tảng đa nền tảng [Android & iOS] do Google chống lưng. Nếu bạn muốn học Flutter thì không nên bỏ qua cuốn sách này. Hiện sách này đang được bán trên Amazon với giá 19,99$ và giờ VNTALKING miễn phí cho bạn
- THẺ
- jav
- nodejs
liên kết
Bài trước 5 thủ thuật hay với Javascript Promise
Bài tiếp theo [QC] Kiểm tra CTR Chiến lược hiệu quả cho dòng trò chơi Thông thường
sơn dương
Tên đầy đủ là Dương Anh Sơn. Tốt nghiệp ĐH Bách Khoa Hà Nội. Mình bắt đầu nghiệp coder khi mà ra trường đúng là xin được làm đúng chuyên ngành. Mình tin rằng chỉ có chia sẻ kiến thức mới là cách học tập nhanh nhất. Các bạn góp ý bài viết của mình bằng cách comment bên dưới nhé