dynamically generate pdf with the html-pdf package
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
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> </td>
</tr>
<tr>
<td colspan="2" style="padding-left:30px;">SGST................%</td>
<!--<td></td>-->
<td> </td>
</tr>
<tr>
<td colspan="3" rowspan="3">Terms and Conditions:</td>
<td colspan="2" style="padding-left:30px;">SGST................%</td>
<!--<td></td>-->
<td> </td>
</tr>
<tr>
<td colspan="2" style="padding-left:30px;">SGST................%</td>
<!--<td></td>-->
<td> </td>
</tr>
<tr>
<td colspan="2" style="padding-left:30px;">Grand Total</td>
<!--<td></td>-->
<td> </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
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:
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> </td>
</tr>
<tr>
<td colspan="2" style="padding-left:30px;">SGST................%</td>
<!--<td></td>-->
<td> </td>
</tr>
<tr>
<td colspan="3" rowspan="3">Terms and Conditions:</td>
<td colspan="2" style="padding-left:30px;">SGST................%</td>
<!--<td></td>-->
<td> </td>
</tr>
<tr>
<td colspan="2" style="padding-left:30px;">SGST................%</td>
<!--<td></td>-->
<td> </td>
</tr>
<tr>
<td colspan="2" style="padding-left:30px;">Grand Total</td>
<!--<td></td>-->
<td> </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
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:
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> </td>
</tr>
<tr>
<td colspan="2" style="padding-left:30px;">SGST................%</td>
<!--<td></td>-->
<td> </td>
</tr>
<tr>
<td colspan="3" rowspan="3">Terms and Conditions:</td>
<td colspan="2" style="padding-left:30px;">SGST................%</td>
<!--<td></td>-->
<td> </td>
</tr>
<tr>
<td colspan="2" style="padding-left:30px;">SGST................%</td>
<!--<td></td>-->
<td> </td>
</tr>
<tr>
<td colspan="2" style="padding-left:30px;">Grand Total</td>
<!--<td></td>-->
<td> </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
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> </td>
</tr>
<tr>
<td colspan="2" style="padding-left:30px;">SGST................%</td>
<!--<td></td>-->
<td> </td>
</tr>
<tr>
<td colspan="3" rowspan="3">Terms and Conditions:</td>
<td colspan="2" style="padding-left:30px;">SGST................%</td>
<!--<td></td>-->
<td> </td>
</tr>
<tr>
<td colspan="2" style="padding-left:30px;">SGST................%</td>
<!--<td></td>-->
<td> </td>
</tr>
<tr>
<td colspan="2" style="padding-left:30px;">Grand Total</td>
<!--<td></td>-->
<td> </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
javascript node.js express npm ejs
edited Nov 13 '18 at 21:28
mihai
24.8k74169
24.8k74169
asked Nov 13 '18 at 10:37
deepak sharmadeepak sharma
134
134
add a comment |
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 ahtml
string - create a
pdf
from thehtml
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):
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
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
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 ahtml
string - create a
pdf
from thehtml
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):
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 ahtml
string - create a
pdf
from thehtml
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):
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 ahtml
string - create a
pdf
from thehtml
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):
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 ahtml
string - create a
pdf
from thehtml
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):
edited Mar 9 at 15:01
marc_s
584k13011241270
584k13011241270
answered Nov 13 '18 at 21:18
mihaimihai
24.8k74169
24.8k74169
add a comment |
add a comment |
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.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown