dynamically generate pdf with the html-pdf package

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.stack.imgur.com/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:

 <form action="/crm" method="post">
 <label>First Name</label>
 <input type="text" name="fname"><br />

 <label>Last Name</label>
 <input type="text" name="lname"><br />

 <label>Email</label>
 <input type="text" name="email"><br />

 <label>Phone number</label>
 <input type="text" name="phone"><br />

 <label>Address</label>
 <textarea name="address"></textarea><br />

 <button>Save</button>

</form>

crm.ejs:

<html>
<head>
<title>BillBook</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
 #billbook
 height:845px;
 width:595px;
 background-repeat: no-repeat;
 background-size: 595px 845px;
 border:1px solid red;
 /*margin:0px auto;*/
 margin:0px !important;
 

 table
 width: 92% !important;

 margin: 0px auto;
 color:#7f7f7f;
 border-radius: 0px 0px 6px 6px;
 -moz-border-radius: 6px 6px 6px 6px;
 -webkit-border-radius: 6px 6px 6px 6px;
 border-width: 0.5px !important;
 border-style: solid !important;
 border-color: #f3f3f3 !important;
 
 tr
 border:1px solid #f3f3f3;
 
 td
 border:1px solid #f3f3f3;
 padding: 5px 0px 5px 6px;
 font-size:12px; 
 
</style>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
 <!--<img src="../images/final.jpg" width="595" height="842" alt="">--> 
 <section id="billbook">
 <table style=" margin-top: 175px !important;">
 <tr>
 <td width="59%" style="padding-left:7px;">Name :<span><%= details.fname + " " +details.lname; %></span></td>
 <td class="text-center">INVOICE</td>
 </tr>
 <tr>
 <td>Address :<%= details.address %></td>
 <td>GSTIN : <span style="padding-left:40px;">547etbdjh787jfh</span></td>
 </tr>

 <tr>
 <td></td>
 <td>Invoice No :</td>
 </tr>

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

 </table>

 <table style="margin-top:11px;">
 <tr class="text-center">
 <td width="6.5%">SNo</td>
 <td width="39.5%">Description</td>
 <td width="13%">HSN</td>
 <td width="9.5%">Qty</td>
 <td width="15.5%">Rate</td>
 <td width="16%">Amount</td>
 </tr>

 <tr style="height:242px">
 <td></td>
 <td></td>
 <td></td>
 <td></td>
 <td></td>
 <td></td>
 </tr>

 <tr>
 <td colspan="3" rowspan="2">Rupees In Words : yrtyrtyrty ryrty rty rtyrtyrty ryrty</td>
 <td colspan="2" class="text-center">Taxable Value :</td>
 <td>&nbsp;</td>
 </tr>
 <tr>
 <td colspan="2" style="padding-left:30px;">SGST................%</td>
 <!--<td></td>-->
 <td>&nbsp;</td>
 </tr>

 <tr>
 <td colspan="3" rowspan="3">Terms and Conditions:</td>
 <td colspan="2" style="padding-left:30px;">SGST................%</td>
 <!--<td></td>-->
 <td>&nbsp;</td>
 </tr>

 <tr>
 <td colspan="2" style="padding-left:30px;">SGST................%</td>
 <!--<td></td>-->
 <td>&nbsp;</td>
 </tr>

 <tr>
 <td colspan="2" style="padding-left:30px;">Grand Total</td>
 <!--<td></td>-->
 <td>&nbsp;</td>
 </tr>
 </table>
 </section> 
</body>

<script>
 window.onload = function()
 <%=
 pdf.create(html, options).toFile('public/pdf/businesscard.pdf', function(err, res) 
 if (err) 
 console.log(err);
 
 elseconsole.log(res);

 ); 
 %>
 
</script>
</html>

edited Nov 13 '18 at 21:28

mihai

23.5k73968

asked Nov 13 '18 at 10:37

deepak sharma

134

add a comment |

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.stack.imgur.com/LPjN7.png

Now let me explain my node app:

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:

 <form action="/crm" method="post">
 <label>First Name</label>
 <input type="text" name="fname"><br />

 <label>Last Name</label>
 <input type="text" name="lname"><br />

 <label>Email</label>
 <input type="text" name="email"><br />

 <label>Phone number</label>
 <input type="text" name="phone"><br />

 <label>Address</label>
 <textarea name="address"></textarea><br />

 <button>Save</button>

</form>

crm.ejs:

<html>
<head>
<title>BillBook</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
 #billbook
 height:845px;
 width:595px;
 background-repeat: no-repeat;
 background-size: 595px 845px;
 border:1px solid red;
 /*margin:0px auto;*/
 margin:0px !important;
 

 table
 width: 92% !important;

 margin: 0px auto;
 color:#7f7f7f;
 border-radius: 0px 0px 6px 6px;
 -moz-border-radius: 6px 6px 6px 6px;
 -webkit-border-radius: 6px 6px 6px 6px;
 border-width: 0.5px !important;
 border-style: solid !important;
 border-color: #f3f3f3 !important;
 
 tr
 border:1px solid #f3f3f3;
 
 td
 border:1px solid #f3f3f3;
 padding: 5px 0px 5px 6px;
 font-size:12px; 
 
</style>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
 <!--<img src="../images/final.jpg" width="595" height="842" alt="">--> 
 <section id="billbook">
 <table style=" margin-top: 175px !important;">
 <tr>
 <td width="59%" style="padding-left:7px;">Name :<span><%= details.fname + " " +details.lname; %></span></td>
 <td class="text-center">INVOICE</td>
 </tr>
 <tr>
 <td>Address :<%= details.address %></td>
 <td>GSTIN : <span style="padding-left:40px;">547etbdjh787jfh</span></td>
 </tr>

 <tr>
 <td></td>
 <td>Invoice No :</td>
 </tr>

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

 </table>

 <table style="margin-top:11px;">
 <tr class="text-center">
 <td width="6.5%">SNo</td>
 <td width="39.5%">Description</td>
 <td width="13%">HSN</td>
 <td width="9.5%">Qty</td>
 <td width="15.5%">Rate</td>
 <td width="16%">Amount</td>
 </tr>

 <tr style="height:242px">
 <td></td>
 <td></td>
 <td></td>
 <td></td>
 <td></td>
 <td></td>
 </tr>

 <tr>
 <td colspan="3" rowspan="2">Rupees In Words : yrtyrtyrty ryrty rty rtyrtyrty ryrty</td>
 <td colspan="2" class="text-center">Taxable Value :</td>
 <td>&nbsp;</td>
 </tr>
 <tr>
 <td colspan="2" style="padding-left:30px;">SGST................%</td>
 <!--<td></td>-->
 <td>&nbsp;</td>
 </tr>

 <tr>
 <td colspan="3" rowspan="3">Terms and Conditions:</td>
 <td colspan="2" style="padding-left:30px;">SGST................%</td>
 <!--<td></td>-->
 <td>&nbsp;</td>
 </tr>

 <tr>
 <td colspan="2" style="padding-left:30px;">SGST................%</td>
 <!--<td></td>-->
 <td>&nbsp;</td>
 </tr>

 <tr>
 <td colspan="2" style="padding-left:30px;">Grand Total</td>
 <!--<td></td>-->
 <td>&nbsp;</td>
 </tr>
 </table>
 </section> 
</body>

<script>
 window.onload = function()
 <%=
 pdf.create(html, options).toFile('public/pdf/businesscard.pdf', function(err, res) 
 if (err) 
 console.log(err);
 
 elseconsole.log(res);

 ); 
 %>
 
</script>
</html>

edited Nov 13 '18 at 21:28

mihai

23.5k73968

asked Nov 13 '18 at 10:37

deepak sharma

134

add a comment |

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.stack.imgur.com/LPjN7.png

Now let me explain my node app:

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:

 <form action="/crm" method="post">
 <label>First Name</label>
 <input type="text" name="fname"><br />

 <label>Last Name</label>
 <input type="text" name="lname"><br />

 <label>Email</label>
 <input type="text" name="email"><br />

 <label>Phone number</label>
 <input type="text" name="phone"><br />

 <label>Address</label>
 <textarea name="address"></textarea><br />

 <button>Save</button>

</form>

crm.ejs:

<html>
<head>
<title>BillBook</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
 #billbook
 height:845px;
 width:595px;
 background-repeat: no-repeat;
 background-size: 595px 845px;
 border:1px solid red;
 /*margin:0px auto;*/
 margin:0px !important;
 

 table
 width: 92% !important;

 margin: 0px auto;
 color:#7f7f7f;
 border-radius: 0px 0px 6px 6px;
 -moz-border-radius: 6px 6px 6px 6px;
 -webkit-border-radius: 6px 6px 6px 6px;
 border-width: 0.5px !important;
 border-style: solid !important;
 border-color: #f3f3f3 !important;
 
 tr
 border:1px solid #f3f3f3;
 
 td
 border:1px solid #f3f3f3;
 padding: 5px 0px 5px 6px;
 font-size:12px; 
 
</style>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
 <!--<img src="../images/final.jpg" width="595" height="842" alt="">--> 
 <section id="billbook">
 <table style=" margin-top: 175px !important;">
 <tr>
 <td width="59%" style="padding-left:7px;">Name :<span><%= details.fname + " " +details.lname; %></span></td>
 <td class="text-center">INVOICE</td>
 </tr>
 <tr>
 <td>Address :<%= details.address %></td>
 <td>GSTIN : <span style="padding-left:40px;">547etbdjh787jfh</span></td>
 </tr>

 <tr>
 <td></td>
 <td>Invoice No :</td>
 </tr>

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

 </table>

 <table style="margin-top:11px;">
 <tr class="text-center">
 <td width="6.5%">SNo</td>
 <td width="39.5%">Description</td>
 <td width="13%">HSN</td>
 <td width="9.5%">Qty</td>
 <td width="15.5%">Rate</td>
 <td width="16%">Amount</td>
 </tr>

 <tr style="height:242px">
 <td></td>
 <td></td>
 <td></td>
 <td></td>
 <td></td>
 <td></td>
 </tr>

 <tr>
 <td colspan="3" rowspan="2">Rupees In Words : yrtyrtyrty ryrty rty rtyrtyrty ryrty</td>
 <td colspan="2" class="text-center">Taxable Value :</td>
 <td>&nbsp;</td>
 </tr>
 <tr>
 <td colspan="2" style="padding-left:30px;">SGST................%</td>
 <!--<td></td>-->
 <td>&nbsp;</td>
 </tr>

 <tr>
 <td colspan="3" rowspan="3">Terms and Conditions:</td>
 <td colspan="2" style="padding-left:30px;">SGST................%</td>
 <!--<td></td>-->
 <td>&nbsp;</td>
 </tr>

 <tr>
 <td colspan="2" style="padding-left:30px;">SGST................%</td>
 <!--<td></td>-->
 <td>&nbsp;</td>
 </tr>

 <tr>
 <td colspan="2" style="padding-left:30px;">Grand Total</td>
 <!--<td></td>-->
 <td>&nbsp;</td>
 </tr>
 </table>
 </section> 
</body>

<script>
 window.onload = function()
 <%=
 pdf.create(html, options).toFile('public/pdf/businesscard.pdf', function(err, res) 
 if (err) 
 console.log(err);
 
 elseconsole.log(res);

 ); 
 %>
 
</script>
</html>

edited Nov 13 '18 at 21:28

mihai

23.5k73968

asked Nov 13 '18 at 10:37

deepak sharma

134

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.stack.imgur.com/LPjN7.png

Now let me explain my node app:

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:

 <form action="/crm" method="post">
 <label>First Name</label>
 <input type="text" name="fname"><br />

 <label>Last Name</label>
 <input type="text" name="lname"><br />

 <label>Email</label>
 <input type="text" name="email"><br />

 <label>Phone number</label>
 <input type="text" name="phone"><br />

 <label>Address</label>
 <textarea name="address"></textarea><br />

 <button>Save</button>

</form>

crm.ejs:

<html>
<head>
<title>BillBook</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
 #billbook
 height:845px;
 width:595px;
 background-repeat: no-repeat;
 background-size: 595px 845px;
 border:1px solid red;
 /*margin:0px auto;*/
 margin:0px !important;
 

 table
 width: 92% !important;

 margin: 0px auto;
 color:#7f7f7f;
 border-radius: 0px 0px 6px 6px;
 -moz-border-radius: 6px 6px 6px 6px;
 -webkit-border-radius: 6px 6px 6px 6px;
 border-width: 0.5px !important;
 border-style: solid !important;
 border-color: #f3f3f3 !important;
 
 tr
 border:1px solid #f3f3f3;
 
 td
 border:1px solid #f3f3f3;
 padding: 5px 0px 5px 6px;
 font-size:12px; 
 
</style>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
 <!--<img src="../images/final.jpg" width="595" height="842" alt="">--> 
 <section id="billbook">
 <table style=" margin-top: 175px !important;">
 <tr>
 <td width="59%" style="padding-left:7px;">Name :<span><%= details.fname + " " +details.lname; %></span></td>
 <td class="text-center">INVOICE</td>
 </tr>
 <tr>
 <td>Address :<%= details.address %></td>
 <td>GSTIN : <span style="padding-left:40px;">547etbdjh787jfh</span></td>
 </tr>

 <tr>
 <td></td>
 <td>Invoice No :</td>
 </tr>

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

 </table>

 <table style="margin-top:11px;">
 <tr class="text-center">
 <td width="6.5%">SNo</td>
 <td width="39.5%">Description</td>
 <td width="13%">HSN</td>
 <td width="9.5%">Qty</td>
 <td width="15.5%">Rate</td>
 <td width="16%">Amount</td>
 </tr>

 <tr style="height:242px">
 <td></td>
 <td></td>
 <td></td>
 <td></td>
 <td></td>
 <td></td>
 </tr>

 <tr>
 <td colspan="3" rowspan="2">Rupees In Words : yrtyrtyrty ryrty rty rtyrtyrty ryrty</td>
 <td colspan="2" class="text-center">Taxable Value :</td>
 <td>&nbsp;</td>
 </tr>
 <tr>
 <td colspan="2" style="padding-left:30px;">SGST................%</td>
 <!--<td></td>-->
 <td>&nbsp;</td>
 </tr>

 <tr>
 <td colspan="3" rowspan="3">Terms and Conditions:</td>
 <td colspan="2" style="padding-left:30px;">SGST................%</td>
 <!--<td></td>-->
 <td>&nbsp;</td>
 </tr>

 <tr>
 <td colspan="2" style="padding-left:30px;">SGST................%</td>
 <!--<td></td>-->
 <td>&nbsp;</td>
 </tr>

 <tr>
 <td colspan="2" style="padding-left:30px;">Grand Total</td>
 <!--<td></td>-->
 <td>&nbsp;</td>
 </tr>
 </table>
 </section> 
</body>

<script>
 window.onload = function()
 <%=
 pdf.create(html, options).toFile('public/pdf/businesscard.pdf', function(err, res) 
 if (err) 
 console.log(err);
 
 elseconsole.log(res);

 ); 
 %>
 
</script>
</html>

javascript node.js express npm ejs

edited Nov 13 '18 at 21:28

mihai

23.5k73968

asked Nov 13 '18 at 10:37

deepak sharma

134

edited Nov 13 '18 at 21:28

mihai

23.5k73968

asked Nov 13 '18 at 10:37

deepak sharma

134

edited Nov 13 '18 at 21:28

mihai

23.5k73968

edited Nov 13 '18 at 21:28

mihai

23.5k73968

edited Nov 13 '18 at 21:28

mihai

23.5k73968

asked Nov 13 '18 at 10:37

deepak sharma

134

asked Nov 13 '18 at 10:37

deepak sharma

134

asked Nov 13 '18 at 10:37

deepak sharma

134

add a comment |

1 Answer
1

active

oldest

votes

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 bussiness card I was able to create using your code (which is not bad by the way):

card

answered Nov 13 '18 at 21:18

mihai

23.5k73968

add a comment |

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);

);

draft saved

draft discarded

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53279129%2fdynamically-generate-pdf-with-the-html-pdf-package%23new-answer', 'question_page');

);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

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

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

card

answered Nov 13 '18 at 21:18

mihai

23.5k73968

add a comment |

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

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

card

answered Nov 13 '18 at 21:18

mihai

23.5k73968

add a comment |

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

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

card

answered Nov 13 '18 at 21:18

mihai

23.5k73968

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

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

card

answered Nov 13 '18 at 21:18

mihai

23.5k73968

answered Nov 13 '18 at 21:18

mihai

23.5k73968

answered Nov 13 '18 at 21:18

mihai

23.5k73968

answered Nov 13 '18 at 21:18

mihai

23.5k73968

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Myujth