adrianhajdin/tutorial_pdf_generation

This is a code repository for the corresponding article on Medium. In this tutorial, you will learn how to generate dynamic PDFs using HTML code as a template.

Generate Dynamic PDFs Using React and NodeJS

Currency Converter Tutorial

This is a code repository for the corresponding article on Medium.

In this tutorial, you will learn how to generate dynamic PDFs using HTML code as a template.

Project Setup

1. Create a new directory mkdir pdfGenerator && cd pdfGenerator
2. Create a new React App with create-react-app client and then move into newly created directory and install dependencies cd client && npm i -S axios file-saver
3. Create an Express server with mkdir server && cd server && touch index.js && npm init press enter a couple of times to initialize package.json and then run npm i -S express body-parser cors html-pdf to save all the necessary dependencies.
4. Add proxy inside of client/package.json, above the dependencies, simply add “proxy”: “http://localhost:5000/", so you can call the localhost from the client.
5. Open two different terminals: First one: go into the client directory and run npm start Second one: go into the server directory and run nodemon index.js

tutorial_pdf_generation's Issues

Concurrent file generation

Not sure because I haven't tested this yet, but it seems that this may get some bugs with high concurrency, because files are always being generated with the same name, please tell me if I am wrong. Maybe a way to fix this intuitive problem is to generate a random filename on creation, send to before fetching. Please tell me what do you think about this, have you tested the concurrency on this?

 createAndDownloadPdf = () => {
    axios.post('/create-pdf', this.state)
      .then((filename) => axios.get('fetch-pdf', { responseType: 'blob', filename}))
      .then((res) => {
        const pdfBlob = new Blob([res.data], { type: 'application/pdf' });

        saveAs(pdfBlob, 'newPdf.pdf');
      })
  }


app.post('/create-pdf', (req, res) => {
    const rndFilename = randomfilename(); /* you can implement this as you wish maybe using a your favourite hashfuncion*/
    pdf.create(pdfTemplate(req.body), {}).toFile( rndFilename  , (err, rndFilename ) => {
        if(err) {
            res.send(Promise.reject());
        }

        res.send(Promise.resolve(rndFilename));
    });
});

app.get('/fetch-pdf', (req, res) => {
    res.sendFile(`${__dirname}/${res.filename}`)
});

Dynamic data using for loop

Can you guide how to achieve dynamic data like creating table structure using loop