Using NodeJS and Puppeteer.
Creating a fake data server with ExpressJS, EJS and TailwindCSS.
npm installnpm start to start server (port 3000)npm run print to create report.pdf file#NeverStopLearning https://app.rocketseat.com.br
| { | |
| "name": "create-with-node-pdf", | |
| "version": "1.0.0", | |
| "description": "", | |
| "main": "server.js", | |
| "scripts": { | |
| "start": "node server.js", | |
| "print": "node print.js" | |
| }, | |
| "keywords": [ | |
| "NodeJS", | |
| "Puppeteer", | |
| "ExpressJS", | |
| "EJS", | |
| "TailwindCSS" | |
| ], | |
| "author": "Mayk Brito", | |
| "license": "MIT", | |
| "dependencies": { | |
| "ejs": "^3.1.6", | |
| "express": "^4.17.1", | |
| "puppeteer": "^7.1.0" | |
| } | |
| } |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Relatório</title> | |
| <link href="https://unpkg.com/tailwindcss/dist/tailwind.min.css" rel="stylesheet"> | |
| <style> | |
| table { | |
| width: 100%; | |
| } | |
| th { | |
| text-align: left; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-purple-100"> | |
| <div class="m-8"> | |
| <h1 class="text-3xl mb-8">Listagem de passageiros</h1> | |
| <table> | |
| <thead> | |
| <tr> | |
| <th>Nome</th> | |
| <th>Número do voo</th> | |
| <th>Horário</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <% if (passengers.length > 0) { %> | |
| <% passengers.forEach(passenger => { %> | |
| <tr> | |
| <td><%= passenger.name %></td> | |
| <td><%= passenger.flightNumber %></td> | |
| <td><%= passenger.time %></td> | |
| </tr> | |
| <% }); %> | |
| <% } %> | |
| </tbody> | |
| <tfoot> | |
| <tr><td colspan="2"><%=passengers.length%> passageiros</td></tr> | |
| </tfoot> | |
| </table> | |
| </div> | |
| </body> | |
| </html> |
| const puppeteer = require('puppeteer') | |
| const { writeFile } = require('fs'); | |
| (async() => { | |
| const browser = await puppeteer.launch() | |
| const page = await browser.newPage() | |
| await page.goto('http://localhost:3000/', { | |
| waitUntil: 'networkidle0' | |
| }) | |
| const pdf = await page.pdf({ | |
| printBackground: true, | |
| format: 'Letter' | |
| }) | |
| await browser.close() | |
| writeFile("./report.pdf", pdf, {}, (err) => { | |
| if(err){ | |
| return console.error('error') | |
| } | |
| console.log('success!') | |
| }) | |
| })() |
| // data server | |
| const express = require('express') | |
| const ejs = require('ejs') | |
| const path = require('path') | |
| const app = express() | |
| const passengers = [ | |
| { | |
| name: "Joyce", | |
| flightNumber: 7859, | |
| time: "18h00", | |
| }, | |
| { | |
| name: "Brock", | |
| flightNumber: 7859, | |
| time: "18h00", | |
| }, | |
| { | |
| name: "Eve", | |
| flightNumber: 7859, | |
| time: "18h00", | |
| }, | |
| ]; | |
| app.get('/', (request, response) => { | |
| const filePath = path.join(__dirname, "print.ejs") | |
| ejs.renderFile(filePath, { passengers }, (err, html) => { | |
| if(err) { | |
| return response.send('Erro na leitura do arquivo') | |
| } | |
| // enviar para o navegador | |
| return response.send(html) | |
| }) | |
| }) | |
| app.listen(3000, () => console.log('The server is running on port 3000')) |
Tailwind wasn't working, but when I replaced
<link href="https://unpkg.com/tailwindcss/dist/tailwind.min.css" rel="stylesheet">with<script src="https://cdn.tailwindcss.com"></script>it works! Thanks <3