Hướng dẫn puppeteer html to pdf - puppeteer html sang pdf
|
Cũng khá lâu rồi, tầm mấy năm trước, mình có tạo một ứng dụng Android để convert webpage HTML sang PDF. Mặc 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 in ấn mà không sợ mất định dạng, hầu hết máy tính bây giờ đều cài sẵn ứng dụng đọc PDF… Về kỹ thuật chung, bạn có 2 lựa chọn:
Bài viết hôm nay, mình sẽ hướng dẫn các bạn tạo một server sử dụng Node.js để convert HTML sang PDF. Kỹ thuật sử dụng trong bài viết:
Chúng ta bắt đầu thôi nào! Nội dung chính của bài viết
Trước khi bắt tay thực hành, chúng ta cùng ngó qua xem Pupperteer là gì đã nhé? Nguyên bản định nghĩa của tác giả: Puppeteer is a Node library which provides a high-level API to control Chrome or Chromium over the DevTools Protocol. Puppeteer runs headless by default, but can be configured to run full (non-headless) Chrome or Chromium.Puppeteer Official DocumentPuppeteer Official Document Về cơ bản, bạn hiểu Puppeteer là một trình duyệt chạy trên nền Node.js. Nếu bạn đọc tài liệu của Puppeteer, điều đầu tiên tác giả nhắc tới đó 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 + PuppeteerBà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 + Puppeteer #1- Cài đặt và sử dụng Puppeteer cơ bản#2- Xử lý Style npm i puppeteer # or "yarn add puppeteer" #3- Send PDF file tới client const puppeteer = require('puppeteer')
async function printPDF() {
const browser = await puppeteer.launch({ headless: true });
const page = await browser.newPage();
await page.goto('https://vntalking.com', {waitUntil: 'networkidle0'});
const pdf = await page.pdf({ format: 'A4' });
await browser.close();
return pdf
})
Thay lời kết Trước khi bắt tay thực hành, chúng ta cùng ngó qua xem Pupperteer là gì đã nhé? Nguyên bản định nghĩa của tác giả: Puppeteer is a Node library which provides a high-level API to control Chrome or Chromium over the DevTools Protocol. Puppeteer runs headless by default, but can be configured to run full (non-headless) Chrome or Chromium.Puppeteer Official Document Về cơ bản, bạn hiểu Puppeteer là một trình duyệt chạy trên nền Node.js. Nếu bạn đọc tài liệu của Puppeteer, điều đầu tiên tác giả nhắc tới đó là khả năng tạo ảnh chụp màn hình và PDF từ các trang web. Hàm 🔥 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 + Puppeteer await page.type('#email', process.env.PDF_USER)
await page.type('#password', process.env.PDF_PASSWORD)
await page.click('#submit')
Để cài đặt Puppeteer, bạn thực hiện giống như mọi module khác thôi. Dùng NPM thì gõ lệnh sau:: 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ý Style#3- Send PDF file tới client await page.addStyleTag({ content: '.nav { display: none} .navbar { border: 0px} #print-button {display: none}' })#3- Send PDF file tới clientThay lời kết Trước khi bắt tay thực hành, chúng ta cùng ngó qua xem Pupperteer là gì đã nhé? printPDF.then(pdf => {
res.set({ 'Content-Type': 'application/pdf', 'Content-Length': pdf.length })
res.send(pdf)
Nguyên bản định nghĩa của tác giả: Puppeteer is a Node library which provides a high-level API to control Chrome or Chromium over the DevTools Protocol. Puppeteer runs headless by default, but can be configured to run full (non-headless) Chrome or Chromium.Puppeteer Official Document function getPDF() {
return axios.get(`${API_URL}/your-pdf-endpoint`, {
responseType: 'arraybuffer',
headers: {
'Accept': 'application/pdf'
}
})
Về cơ bản, bạn hiểu Puppeteer là một trình duyệt chạy trên nền Node.js. Nếu bạn đọc tài liệu của Puppeteer, điều đầu tiên tác giả nhắc tới đó 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 + Puppeteer 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 **/)
}
...
Để cài đặt Puppeteer, bạn thực hiện giống như mọi module khác thôi. Dùng NPM thì gõ lệnh sau: Thay lời kếtTrước khi bắt tay thực hành, chúng ta cùng ngó qua xem Pupperteer là gì đã nhé? Nguyên bản định nghĩa của tác giả: Puppeteer is a Node library which provides a high-level API to control Chrome or Chromium over the DevTools Protocol. Puppeteer runs headless by default, but can be configured to run full (non-headless) Chrome or Chromium.Puppeteer Official DocumentĐọc thêm bài viết về Node.js
Tài liệu tham khảo:
 |
