Creating PDF with HTML and CSS using Socket.io + Puppeteer + Node.js

Viewed 320

I am currently trying to create a PDF file on the server side with Node.js from HTML with still the CSS working. Then I wanted to attach that to an email that I haven't found how, but I got a bigger problem.

I am new to Node.js and I can't get in a function. There is my code on server side.

const fs = require('fs');
const puppeteer = require('puppeteer')
const ConnectionPort = 8080;
const path = require('path');
const app = require('express')();
const http = require('http').createServer(app);
const io = require('socket.io')(http);

io.on('connection', (socket) => {

  console.log('a user connected'); 

  socket.on('disconnect', () => {
    console.log('user disconnected');   
  });
  socket.on('Creation of PDF Document', (PageHTML, NumberOfTheFile, HeadHTML) => {
    console.log('A creation was requested'); // I see that on the console
    (async function(){
      try{
        console.log('Got in the try') // I can't see that on the console
        const browser = await puppeteer.launch();
        const page = await browser.newPage();

        await page.setContent('<head>' + HeadHTML + '</head><body>' + PageHTML + '</body>');
        await page.emulateMedia('screen');
        await page.pdf({
          path: path.join(__dirname, 'Files', NumberOfTheFile + '.pdf'),
          format: "Legal",
          printBackground: true
        });

        console.log('Creation done!');
        await browser.close();
        process.exit();

      } catch (e)
      {
        console.log('Error: ', e)
      }
    })
  });
  ///////////////   Other stuff I was going for that works   ////////////////////
  socket.on('Asking ID', () => {

    console.log('a user is trying to ask for an ID');

    var array = fs.readFileSync('ID_Liste.txt').toString().split("\n");
    var i = 0;
    
    for(i in array) 
    {
        console.log(array[i]);
    }
    
    var ID_BonCommande = parseInt(array[i]) + 1;
    
    fs.appendFile('ID_Liste.txt', " \n  \n  \n" + "Operation Time  : " + "\n" + Date() + "  \n\n"  + "ID_BonCommande : " + "\n"  + ID_BonCommande + '', function (err) {
     if (err) throw err;
     console.log('ID added : ' + ID_BonCommande);
    });

    
    io.emit('Reception ID', ID_BonCommande);
  });
////////////////////////////////////////////////////////////////////////////////
});

http.listen(ConnectionPort , () => {
  console.log('listening on *: ' +ConnectionPort );
});

There is how I call my function on client side:

 socket.emit('Creation of PDF Document',
     document.getElementById('Page').innerHTML, 
     document.getElementById(NumberOfThePage).innerHTML, 
     document.getElementsByTagName('head').innerHTML // I need the head for the CSS
);

function AddID()
{           
    socket.emit('Asking ID');   
}
        
var receive = function(ID_Receved){
        
document.getElementById('PlaceToPutID').innerHTML = ID_Receved.toString();
            
}
socket.on('Reception ID', receive)

The Youtube video that helped me
1 Answers

I tried this:

  socket.on('Creation of PDF Document', (PageHTML, NumberOfTheFile, HeadHTML) => {
    console.log('A creation was requested'); // can't go further
    
    async function Test(){
      try{
        console.log('Got in the try')
        const browser = await puppeteer.launch();
        const page = await browser.newPage();
    
        await page.setContent('<head>' + HeadHTML + '</head><body>' + PageHTML + '</body>');
        await page.emulateMedia('screen');
        await page.pdf({
          path: path.join(__dirname, 'Files', NumberOfTheFile + '.pdf'),
          format: "Legal",
          printBackground: true
        });
    
        console.log('Creation done!');
    
      } catch (e)
      {
        console.log('Error: ', e)
      }
    }
    Test();
  });

It didn't worked as expected... I didn't got my CSS on the PDF, but still, it kind of worked.

I need the CSS to really use it. Can we use the tag name style on the client side like this:

document.getElementsByTagName('style').innerHTML 

or anything that can transfer The CSS to the server. My CSS is in the tag Style for now, but i am not sur it is the correct decision.

I am going in the wrong direction?

EDITED*

GOT IT!

I just put the style tag in the body and was able to use it.

Related