HTML-taulukon ja PDF-tiedoston luominen Node & Google Puppeteer -sovelluksella

Conoce la tierra.

NodeJS: n ymmärtäminen sisäisesti voi olla hieman pelottavaa (tiedän, että se oli minulle kerran). Solmu on erittäin tehokas kieli, ja se voi tehdä paljon asioita.

Halusin tänään paljastaa solmun sisäänrakennetun apuohjelman fs (tiedostojärjestelmä) tehon

Kuten fs-asiakirjoissa:

fsModuuli sisältää API vuorovaikutuksessa tiedostojärjestelmän tavalla tiiviisti mallinnettu noin standardi POSIX toiminnot.

Mikä on vain hieno tapa sanoa, että tiedostojärjestelmä on solmuun tapa olla vuorovaikutuksessa tiedostojen kanssa sekä luku- että kirjoitusoperaatioissa.

Nyt tiedostojärjestelmä on NodeJS: n suuri apuohjelma, jolla on paljon hienoja ominaisuuksia. Tässä artikkelissa käsittelen kuitenkin vain 3:

  • Haetaan tiedostotietoja: fs.statSync
  • Tiedoston poistaminen: fs.unlinkSync
  • Tietojen kirjoittaminen tiedostoon: fs.writeFileSync

Toinen asia, jonka käsittelemme tässä artikkelissa, on Google Puppeteer, joka on tämä todella siisti ja tyylikäs työkalu, jonka ovat luoneet jotkut mahtavat ihmiset Googlessa.

Joten mikä on nukketeatteri? Asiakirjojen mukaan he sanovat:

Puppeteer on solmukirjasto, joka tarjoaa korkean tason sovellusliittymän ohjaamaan päätöntä Chromea tai Chromiumia DevTools-protokollan kautta. Se voidaan myös määrittää käyttämään täyttä (ei päätä) Chromea tai Chromiumia.

Joten se on pohjimmiltaan työkalu, jonka avulla voit tehdä kaikki hienot selaimeen liittyvät asiat palvelimella. Kuten verkkosivuston kuvakaappausten hankkiminen, verkkosivustojen indeksointi ja ennalta renderoidun sisällön luominen yhden sivun sovelluksille. Voit jopa tehdä lomakelomakkeita NodeJS-palvelimen kautta.

Jälleen nukketeatteri on valtava työkalu, joten katamme vain pienen mutta erittäin hienon piirteen nukketeatterista. Katsotaan, miten luoda mukava PDF-tiedosto luodun HTML-taulukotiedoston perusteella. Prosessin aikana opimme pupeteer.launch () ja ymmärrämme hieman sivusta () ja pdf ().

Joten antaa jälleen lyhyt katsaus asioihin, joita käsittelemme:

  • Oman datan luominen (laskuille) online-työkalulla.
  • Luomalla HTML-taulukko, jossa on vähän muotoilua ja johon on luotu tietoja, käyttämällä automatisoitua solmusarjaa.
  • Lisätietoja tiedostojen olemassaolon tarkistamisesta fs.statSyncin avulla
  • Lisätietoja tiedoston poistamisesta fs.unlinkSync-sovelluksella
  • Lisätietoja tiedoston kirjoittamisesta fs.writeFileSync-sovelluksella
  • Luomalla PDF-tiedosto HTML-tiedostosta, joka on luotu Google-nukketeatterilla
  • Tehdäänkö niistä npm-komentosarjoja käytettäväksi myöhemmin? ?
Myös ennen aloittamista tässä on opetusohjelman koko lähdekoodi, jonka kaikkien on seurattava. Sinun ei tarvitse kirjoittaa mitään, mutta sinun pitäisi kirjoittaa koodi tämän opetusohjelman mukana. Se osoittautuu hyödyllisemmäksi ja ymmärrät enemmän. LÄHTEEN OHJEET

Ennen kuin aloitamme, varmista, että koneellesi on asennettu ainakin seuraavat

  • Solmun versio 8.11.2
  • Node Package Manager (NPM) -versio 6.9.0

Sinun ei tarvitse, mutta voit myös katsoa esittelyvideon (ensimmäinen, jonka olen koskaan tehnyt), jossa kerrotaan tiedoston lukemisen, kirjoittamisen ja poistamisen perusteista NodeJS: ssä. Tämä auttaa sinua ymmärtämään tämän opetusohjelman. (Anna palautetta). ?

Aloitetaan

Vaihe 1:

Kirjoita päätelaitteen tyyppi seuraavasti:

npm init -y

Tämä alustaa tyhjän projektin puolestasi.

Vaihe 2:

Toiseksi, luo samaan kansioon uusi tiedosto nimeltä data.jsonja pidä siinä joitain pilkattuja tietoja. Voit käyttää seuraavaa JSON-näytettä.

Voit saada pilkatut JSON-tynkätiedot täältä . Tämän datan tuottamiseen olen käyttänyt mahtavaa työkalua nimeltä //mockaroo.com/ Se on online-tietojenkäsittelytyökalu.

JSON-tiedoilla, joita käytän, on tällainen rakenne:

[ {}, {}, { "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 }, {}, {} ]
Voit ladata tämän opetusohjelman täydellisen JSON-taulukon täältä .

Vaihe 3:

Luo seuraavaksi uusi tiedosto nimeltä buildPaths.js

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

Joten path.resolvevie suhteellisen polun ja palauttaa meille kyseisen hakemiston absoluuttisen polun.

Joten path.resolve('./build.html');palauttaa esimerkiksi jotain tällaista:

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

Vaihe 4:

Luo samaan kansioon tiedosto nimeltä nimeltä createTable.jsja lisää seuraava koodi:

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).

Yksi asia, joka on huomioitava tässä, emme ehkä tarvitse vaihetta 4, jossa tarkistamme onko tiedosto olemassa ja jos se sitten poistaa sen. Tämä johtuu siitä, että writeFileSync tekee sen meille. Lisäsin juuri koodiin oppimistarkoituksia varten.

Vaihe 7:

Mene päätelaitteessasi kansion polku, jolla sinulla on createTable.jsja kirjoita

$ npm run ./createTable.js

Heti kun suoritat tämän komentosarjan, se luo uuden tiedoston samaan kansioon nimeltä. build.htmlVoit avata kyseisen tiedoston selaimessasi ja se näyttää tältä.

Siistiä? Toistaiseksi niin hyvä. ?

Voit myös lisätä npm scriptpaketin.json näin:

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

Tällä tavalla kirjoittamisen sijaan npm run ./createTable.jsvoit kirjoittaa vain npm run build:table.

Seuraava: PDF- HTMLtiedoston luominen luotusta tiedostosta.

Vaihe 8:

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.

Ensin kutsutaan init () -menetelmässä printPdf () -menetelmää, joka on jälleen asynkkimenetelmä , joten meidän on odotettava sen vastausta. PrintPdf () -menetelmä palauttaa meille PDF-ilmentymän, jonka kirjoitamme sitten tiedostoon rivillä 33.

Joten mitä printPdf()menetelmä tekee? Kaivetaan syvälle siihen.

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;

Käynnistämme ensin päätön selaininstanssin nukketeatterilla seuraavasti:

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

jota käytämme sitten verkkosivun avaamiseen:

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

Kun tyhjä sivu on auki, voimme siirtyä sivulle. Koska verkkosivumme on paikallisesti järjestelmässämme, me yksinkertaisesti

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

Tämä waitUntil: 'networkidle0;on tärkeää, koska se kehottaa nukketeatteria odottamaan 500 / ms, kunnes verkkoyhteyksiä ei enää ole.

Huomaa: Siksi käytimme polkua.resolve () absoluuttisten polkujen saamiseksi, koska web-sivun avaamiseksi nukketeatterilla tarvitsemme absoluuttisen polun.

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:

Ja se on, olemme valmiit.

Olet oppinut seuraavat:

  • Kuinka tarkistaa onko tiedosto olemassa / tet-tiedostotiedot (solmussa)
  • Tiedoston poistaminen solmusta
  • Kuinka kirjoittaa tiedostoon
  • Kuinka käyttää Google Puppeteeria PDF-tiedoston luomiseen

Hyvää oppimista, haluaisin kuulla mielipiteesi tästä artikkelista. Voit tavoittaa minut Twitterissäyhtä hyvin.