Tạo pdf từ html

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('https://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 **/)
 }
...

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/

Tạo pdf từ html

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


TẢI XUỐNG

Tạo pdf từ html

  • THẺ
  • jav
  • nodejs

Facebook

Twitter

liên kết

Pinterest

WhatsApp

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é