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… Show 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 server sử dụng Node. js để chuyển đổi 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 Chuyển đổi HTML sang PDF bằng cách sử dụng Nút. js + Người múa rốiTrướ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ị Tùy chọn 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 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áchPuppeteer 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àngSau 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ếtQua 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
Tài liệu tham khảo
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
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é |