Hogyan készítsünk HTML-táblázatot és PDF-fájlt a Node & Google Puppeteer segítségével

Conoce la tierra.

A NodeJS belső megértése kissé ijesztő lehet (tudom, hogy egyszer nekem szólt). A csomópont nagyon hatékony nyelv, és sok mindenre képes.

Ma szerettem volna felfedni a Node beépített segédprogramjának fs nevű eszközét (fájlrendszer)

Az fs dokumentumok szerint:

A fsmodul API-t biztosít a fájlrendszerrel való interakcióhoz, a szokásos POSIX-funkciók köré mintázva.

Ez csak egy fantasztikus módja annak, hogy azt mondjuk, hogy a fájlrendszer a Node-on keresztül kölcsönhatásba léphet a fájlokkal mind az olvasási, mind az írási műveletek során.

A fájlrendszer a humán segédprogram a NodeJS-ben, amely sok divatos funkcióval rendelkezik. Ebben a cikkben azonban csak 3-at tárgyalok:

  • Fájlinformációk beszerzése: fs.statSync
  • Fájl törlése: fs.unlinkSync
  • Adatok írása fájlba: fs.writeFileSync

Egy másik dolog, amellyel foglalkozunk ebben a cikkben, a Google Puppeteer, amely ez a nagyon jó, csúszós eszköz, amelyet a Google néhány félelmetes embere hozott létre.

Mi az a bábos? A dokumentumok szerint azt mondják:

A Puppeteer egy Node könyvtár, amely magas szintű API-t biztosít a fej nélküli Chrome vagy Chromium vezérléséhez a DevTools protokoll felett. Beállítható teljes (nem fej nélküli) Chrome vagy Chromium használatára is.

Tehát alapvetően egy olyan eszköz, amely lehetővé teszi a böngészővel kapcsolatos minden jó dolog elvégzését a szerveren. Mint például egy webhely képernyőképeinek megszerzése, a webhelyek feltérképezése és az egyoldalas alkalmazások előkészítő tartalom előállítása. Akár a NodeJS-kiszolgálón keresztül is küldhet űrlapokat.

Ismét a bábjátékos hatalmas eszköz, ezért a bábosoknak csak egy apró, de nagyon jó tulajdonságát mutatjuk be. Megvizsgáljuk, hogyan lehet létrehozni egy szép PDF fájlt a létrehozott HTML tábla fájlunk alapján. Ennek során megismerjük a puppeteer.launch () fájlt, és megértünk egy kicsit a page () és a pdf () fájlokról.

Tehát, hogy ismét rövid áttekintést adjak, a következőkről fogunk foglalkozni:

  • Csonkadatok generálása (számlákhoz) egy online eszköz segítségével.
  • HTML tábla létrehozása egy kis formázással, benne generált adatokkal, automatizált csomópont-szkript használatával.
  • Tudnivalók arról, hogy ellenőrizze, létezik-e fájl vagy sem, az fs.statSync használatával
  • Tudnivalók a fájl törléséről az fs.unlinkSync használatával
  • Tudnivalók a fájl írásáról az fs.writeFileSync használatával
  • PDF fájl létrehozása abból a HTML fájlból, amelyet a Google bábjátékos készített
  • Npm szkriptekké alakításuk későbbi felhasználásra? ?
Mielőtt itt kezdenénk, itt van a bemutató teljes forráskódja, amelyet mindenki követhet. Nem kell semmit írni, de ehhez az oktatóanyaghoz kódot kell írnia. Ez hasznosabbnak bizonyul, és többet fog megérteni. A TUTORIAL FORRÁSKÓDEXE

Mielőtt elkezdenénk, ellenőrizze, hogy legalább a következőket telepítette-e a gépére

  • Csomópont 8.11.2 verziója
  • Node Package Manager (NPM) 6.9.0 verzió

Nem kell, de megnézhetsz egy bevezető videót is (az egyiket, amit először készítettem), amely a fájl olvasásának, írásának és törlésének alapjairól szól a NodeJS-ben. Ez segít megérteni ezt az oktatóanyagot. (Kérjük, adjon visszajelzést). ?

Kezdjük el

1. lépés:

A terminál típusába írja be a következőket:

npm init -y

Ez egy üres projektet inicializál az Ön számára.

2. lépés:

Másodszor, ugyanabban a mappában hozzon létre egy új nevű fájlt, data.jsonés legyen benne néhány csúfolt adat. Használhatja a következő JSON mintát.

Tudod kap a kigúnyolt JSON csonk adatok itt . Ezen adatok előállításához egy fantasztikus //mockaroo.com/ eszközt használtam. Ez egy online adatgeneráló eszköz.

Az általam használt JSON-adatok felépítése ilyen:

[ {}, {}, { "invoiceId": 1, "createdDate": "3/27/2018", "dueDate": "5/24/2019", "address": "28058 Hazelcrest Center", "companyName": "Eayo", "invoiceName": "Carbonated Water - Peach", "price": 376 }, { "invoiceId": 2, "createdDate": "6/14/2018", "dueDate": "11/14/2018", "address": "6205 Shopko Court", "companyName": "Ozu", "invoiceName": "Pasta - Fusili Tri - Coloured", "price": 285 }, {}, {} ]
Akkor töltse le a teljes JSON ez a bemutató re van .

3. lépés:

Ezután hozzon létre egy új fájlt buildPaths.js

const path = require('path'); const buildPaths = { buildPathHtml: path.resolve('./build.html'), buildPathPdf: path.resolve('./build.pdf') }; module.exports = buildPaths;

Tehát path.resolveviszonylagos utat fog megadni, és visszaadja nekünk az adott könyvtár abszolút útvonalát.

Így path.resolve('./build.html');például valami ilyesmit ad vissza:

$ C:\\Users\\Adeel\\Desktop\\articles\\tutorial\\build.html

4. lépés:

Ugyanebben a mappában hozzon létre egy nevű fájlt, createTable.jsés adja hozzá a következő kódot:

const fs = require('fs'); // JSON data const data = require('./data.json'); // Build paths const { buildPathHtml } = require('./buildPaths'); /** * Take an object which has the following model * @param {Object} item * @model * { * "invoiceId": `Number`, * "createdDate": `String`, * "dueDate": `String`, * "address": `String`, * "companyName": `String`, * "invoiceName": `String`, * "price": `Number`, * } * * @returns {String} */ const createRow = (item) => ` ${item.invoiceId}${item.invoiceName}${item.price}${item.createdDate}${item.dueDate}${item.address}${item.companyName} `; /** * @description Generates an `html` table with all the table rows * @param {String} rows * @returns {String} */ const createTable = (rows) => ` 
     ${rows} 
     
Invoice Id Invoice Name Price Invoice Created Due Date Vendor Address Vendor Name
`; /** * @description Generate an `html` page with a populated table * @param {String} table * @returns {String} */ const createHtml = (table) => ` table { width: 100%; } tr { text-align: left; border: 1px solid black; } th, td { padding: 15px; } tr:nth-child(odd) { background: #CCC } tr:nth-child(even) { background: #FFF } .no-content { background-color: red; } ${table} `; /** * @description this method takes in a path as a string & returns true/false * as to if the specified file path exists in the system or not. * @param {String} filePath * @returns {Boolean} */ const doesFileExist = (filePath) => { try { fs.statSync(filePath); // get information of the specified file path. return true; } catch (error) { return false; } }; try { /* Check if the file for `html` build exists in system or not */ if (doesFileExist(buildPathHtml)) { console.log('Deleting old build file'); /* If the file exists delete the file from system */ fs.unlinkSync(buildPathHtml); } /* generate rows */ const rows = data.map(createRow).join(''); /* generate table */ const table = createTable(rows); /* generate html */ const html = createHtml(table); /* write the generated html to file */ fs.writeFileSync(buildPathHtml, html); console.log('Succesfully created an HTML table'); } catch (error) { console.log('Error generating table', error); }

I know that is a lot of code, but let’s divide it into chunks and start understanding it piece by piece.

Go to line 106 (github gist)

In our try/catch block we first check if the build file for HTML exists in the system or not. This is the path of the file where our NodeJS script will generate our HTML.

if (doesFileExist(buildPathHtml){} calls doesFileExist() method which simply returns true/false. For this we use

fs.statSync(filePath);

This method actually returns information about the file like the size of the file, when the file was created, and so on. However if we provide it an invalid file path, this method returns as a null error. Which we use here to our benefit and wrap the fs.statSync() method in a try/catch. If Node is successfully able to read the file in our try block, we return true — otherwise it throws an error which we get in our catch block and returns false.

If the file exists in the system we end up deleting the file using

fs.unlinkSync(filePath); // takes in a file path & deletes it

After deleting the file, we need to generate rows to put in the table.

Step 5:

So first we import data.json which we do at line 3 & then on line 115 we iterate each item using map(). You can read more about Array.prototype.map() here.

The map method takes a method createRow which takes in an object through each iteration and returns a string which has content like this:

"invoice idinvoice nameinvoice priceinvoice created dateinvoice due dateinvoice addressinvoice sender company name"
const row = data.map(createdRow).join('');

The join('') part is important here, because I want to concatenate all of my array into a string.

An almost similar principle is used for generating a table on line 117 & then the html table on line 119.

Step 6:

The important part is where we write to our file on line 121:

fs.writeFileSync(buildPathHtml, html); 

It takes in 2 parameters: one is the build path (string) and the html content (string) and generates a file (if not created; and if it is created, it overwrites the already existing file).

Itt meg kell jegyeznünk, hogy nincs szükségünk a 4. lépésre, ahol ellenőrizzük, hogy létezik-e a fájl, és ha mégis, akkor töröljük. Ez azért van, mert az writeFileSync ezt megteszi helyettünk. Csak azt tettem hozzá, hogy a kódban tanulási célokra.

7. lépés:

A terminálban lépjen a mappa elérési útjára, ahol megvan a createTable.jsés a típus

$ npm run ./createTable.js

Amint futtatja ezt a szkriptet, létrehoz egy új fájlt ugyanabban a mappában. build.htmlMegnyithatja azt a fájlt a böngészőjében, és valami ilyennek fog kinézni.

Hűvös, igaz? Eddig jó. ?

npm scriptIlyen módon hozzáadhat egy -et a package.json-hoz is:

"scripts": { "build:table": "node ./createTable.js" },

Így az írás helyett npm run ./createTable.jscsak beírhatja npm run build:table.

Következő lépés: PDF létrehozása a létrehozott HTMLfájlból.

8. lépés:

First things first we need to install a fancy tool, so go in your terminal in your application folder and type in

npm install puppeteer

Step 9:

In the same folder where you have files createTable.js , buildPaths.js & data.json, create a new file called createPdf.js and add content to it like below:

 const fs = require('fs'); const puppeteer = require('puppeteer'); // Build paths const { buildPathHtml, buildPathPdf } = require('./buildPaths'); const printPdf = async () => { console.log('Starting: Generating PDF Process, Kindly wait ..'); /** Launch a headleass browser */ const browser = await puppeteer.launch(); /* 1- Ccreate a newPage() object. It is created in default browser context. */ const page = await browser.newPage(); /* 2- Will open our generated `.html` file in the new Page instance. */ await page.goto(buildPathHtml, { waitUntil: 'networkidle0' }); /* 3- Take a snapshot of the PDF */ const pdf = await page.pdf({ format: 'A4', margin: { top: '20px', right: '20px', bottom: '20px', left: '20px' } }); /* 4- Cleanup: close browser. */ await browser.close(); console.log('Ending: Generating PDF Process'); return pdf; }; const init = async () => { try { const pdf = await printPdf(); fs.writeFileSync(buildPathPdf, pdf); console.log('Succesfully created an PDF table'); } catch (error) { console.log('Error generating PDF', error); } }; init();

As we did with createTable.js script, let’s break this down into chunks and start understanding this script step by step.

Let’s start with line 40: here we call a method init() which calls the method on line 30. Onething to focus on is that our init() method is an async method. Read more on this async function.

Először az init () metódusban hívjuk a printPdf () metódust, amely ismét aszinkron metódus, tehát várnunk kell a válaszára. A printPdf () metódus egy PDF példányt ad vissza nekünk, amelyet aztán a 33. sorba írunk egy fájlba .

Tehát mit csinál a printPdf()módszer? Vájjunk bele mélyen.

const browser = await puppeteer.launch(); const page = await browser.newPage(); await page.goto(buildPathHtml, { waitUntil: 'networkidle0' }); const pdf = await page.pdf({ format: 'A4', margin: { top: '20px', right: '20px', bottom: '20px', left: '20px'} }); await browser.close(); return pdf;

Először egy fej nélküli böngészőpéldányt indítunk bábjátékos használatával, a következő módon:

await puppeteer.launch(); // this returns us headless browser

amellyel aztán megnyitunk egy weboldalt:

await browser.newPage(); // open a blank page in headless browser

Ha van egy üres oldal nyitva, navigálhatunk egy oldalra. Mivel weboldalunk lokálisan van a rendszerünkben, egyszerűen

page.goto(buildPathHtml, { waitUntil: 'networkidle0' });

Itt waitUntil: 'networkidle0;is fontos, mert jelzi, bábos várni a 500 / ms-ig nincs több hálózati kapcsolatokat.

Megjegyzés: Ezért használtuk az path.resolve () -t abszolút elérési utak megszerzéséhez, mert ahhoz, hogy bábosokkal nyissuk meg a weboldalt, szükségünk van egy abszolút útvonalra.

After we have a web page opened in the headless browser on the server, we save that page as a pdf:

await page.pdf({ });

As soon as we have a pdf version of the web page, we need to close the browser instance opened by puppeteer to save resources by doing this:

await browser.close();

& then we return the pdf saved, which we then write to the file.

Step 10:

In your terminal type

$ npm ./createPdf.js

Note: Before running the above script, ensure that you the build.html file generated by createTable.js script. This ensures we always have the build.html prior to running the createPdf.js script. In your package,json do the following.

"scripts": { "build:table": "node ./createTable.js", "prebuild:pdf": "npm run build:table", "build:pdf": "node ./createPdf.js" },

Now if you run $ npm run build:pdf it will execute the createTable.js script first and then createPdf.js script. You can read more on NPM scripts on their official docs.

When you run

$ npm run build:pdf

It will run and create a build.pdf which will look like this:

És ez van, készen vagyunk.

Megtanulta a következőket:

  • Hogyan ellenőrizhető, hogy létezik-e fájl / tet fájlinformáció (a csomópontban)
  • Fájl törlése a csomópontban
  • Hogyan lehet fájlba írni
  • A Google Puppeteer használata PDF fájl létrehozásához

Boldog tanulást, szívesen hallanám a gondolatait erről a cikkről. Elérheted a twitterenis.