dynamically generate pdf with the html-pdf package

Question

I am using the npm package html-pdf

I was trying to dynamically generate invoices. Eventually it creates PDF files but instead of saving values to the PDF it saves ejs code. Anyone knows what went wrong?

You can check the screenshot below of the PDF output with ejs variables:

https://i.sstatic.net/LPjN7.png

Now let me explain my node app:

I am using two ejs pages. One is home.ejs from where we post input values which need to be filled in the PDF. Second page is crm.ejs where my invoice template is. In crm.ejs I am using window.onload function so when everything is loaded to my crm.ejs template . Then it will generate PDF. But still it only save ejs variables.

Now here is the code

app.js

var express = require("express");
var app = express();
var webshot = require('webshot');
var fs = require('fs');
var pdf = require('html-pdf');
var html = fs.readFileSync('views/crm.ejs', 'utf8');
var options = { format: 'a4' };
var bodyParser = require("body-parser");
app.use(bodyParser.urlencoded({extended:true}));

app.locals.pdf = require("html-pdf");
app.locals.html = fs.readFileSync('views/crm.ejs', 'utf8');
app.locals.options =  { format: 'a4' };
app.locals.fs = require("fs");
app.use(express.static("public"));

app.get("/",function(req,res){
    res.render("home.ejs");
});

app.post("/crm",function(req,res){
    // res.render("crm.ejs");
    console.log(req.body);
    var details = req.body;
    res.render("crm.ejs",{details:details});
});

app.listen(process.env.PORT,process.env.IP,function(){
    console.log("Server started successfully!!");
});

home.ejs:

 
    First Name
    


    Last Name
    


    Email
    


    Phone number
    


    Address

crm.ejs:



BillBook






      
    
        
            
                Name :<%= details.fname + " " +details.lname; %>
                INVOICE
            
            
                Address :<%= details.address %>
                GSTIN   :   547etbdjh787jfh
            

            
                
                Invoice No :
            

             
                Phone Number :<%= details.phone%>
                Invoice Date :
            

        

        
            
                SNo
                Description
                HSN
                Qty
                Rate
                Amount
            

            
                
                
                
                
                
                
            

            
                Rupees In Words : yrtyrtyrty ryrty rty rtyrtyrty ryrty
                Taxable Value :
                 
            
            
                SGST................%
                
                 
            

            
                Terms and Conditions:
                SGST................%
                
                 
            

            
                SGST................%
                
                 
            

            
                Grand Total

mihai · Accepted Answer

You need to do the rendering on the server, so remove the window.onload script and add this little piece of magic to your app.js

app.post("/crm",function(req,res){
  console.log(req.body);
  var details = req.body;

  res.render("crm.ejs", { details: details }, function (err, html) {
    pdf.create(html, options).toFile('./public/pdf/businesscard.pdf', function (err, res) {
      if (err) {
        console.log(err);
      }
      else { console.log(res); }
    });

    res.send(html);
  });
});

To understand the code, you need to think of your server response as the following sequence:

render the ejs to a html string
create a pdf from the html string and save it to the local drive
send the html string as a response to the browser

Calling res.render with a callback allows your view to be rendered to a string, without getting sent to the browser. This allows you to call pdf.create in the callback and then manually send the response with res.send

This is a screenshot of the business card I was able to create using your code (which is not bad by the way):

card

dynamically generate pdf with the html-pdf package

Answers (1)

Related Questions