CODEWITHSUNDEEP
javascriptjquerynode.jsexpresshandlebars.js
Umashankar Varma
Umashankar Varma

Reputation: 31

Generating PDF reports in Node JS/Express Web Application

I am a newbie trying to build a web-app using NodeJS/Express and Handlebars for templating needs.

A part of the application deals with generating invoice for sales. I have written a handlebars template along with some javascript code to deal with addition/deletion of items and calculating total etc which works fine.

There is a need to generate PDF form of this invoice at the NodeJS server which contains dynamic content added at client side.

I am unsure how to proceed in implementing this. I have evaluated client side PDF generation options but it is not desirable for my use case.

Could you please let me know if it is possible to generate pdf at server side when there are dynamic elements in client side html page?

The app is similar to the one in this link: http://www.smarttutorials.net/invoice-system-using-jquery-autocomplete/

Dynamic part of the code is below:

//adds extra table rows 

var i=$('table tr').length;
$(".addmore").on('click',function(){
    html = '<tr>';
    html += '<td><input class="case" type="checkbox"/></td>';
    html += '<td><input type="text" data-type="productCode" name="itemNo[]" id="itemNo_'+i+'" class="form-control autocomplete_txt" autocomplete="off"></td>';
    html += '<td><input type="text" data-type="productName" name="itemName[]" id="itemName_'+i+'" class="form-control autocomplete_txt" autocomplete="off"></td>';
    html += '<td><input type="text" name="price[]" id="price_'+i+'" class="form-control changesNo" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>';
    html += '<td><input type="text" name="quantity[]" id="quantity_'+i+'" class="form-control changesNo" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>';
    html += '<td><input type="text" name="total[]" id="total_'+i+'" class="form-control totalLinePrice" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>';
    html += '</tr>';
    $('table').append(html);
    i++;
});

//deletes the selected table rows 

$(".delete").on('click', function() {
    $('.case:checkbox:checked').parents("tr").remove();
    $('#check_all').prop("checked", false); 
});

Upvotes: 1

Views: 1982

Answers (2)

Asad Feroz Ali
Asad Feroz Ali

Reputation: 362

There is a github library called serverless-chrome that comes close to the functionality you are looking for.

It works with AWS lambda and nodejs. It uses serverless chrome to visit your website and take screenshot or save the whole website as a PDF file and displays the PDF file. The deployment is pretty simple and uses the serverless framework. I deployed the github library on a client's AWS account.

Here is how the demo link which you get after deployment.

https://1wphj1kzch.execute-api.ap-southeast-1.amazonaws.com/dev/pdf?url=http://www.gmail.com

Replace the http://www.gmail.com with the website link of your choice. It waits for the website to load completely and then takes the screenshot. You can deploy this and use the link like the one generated above to take screenshot and save them or you can use another lambda function and save the pdfs to your S3 bucket on AWS.

Best of all if you are new to AWS you get 400,000 lambda executions free every month.

Upvotes: 0

Keith
Keith

Reputation: 24191

Seen as your using express, and have the ability to create web pages with this data on.

I would use https://www.npmjs.com/package/phantom

This can be used to convert you webpage into PDF's, you can also control page breaks using the CSS attribute page-break-after.. etc.

Upvotes: 1

Related Questions