React.js Bootstrap 5 PDF Invoice Generator Using jsPDF,Filesaver.js & Html2Canvas in Browser Using JSX

 

 

npx create-react-app pdfinvoice

 

cd pdfinvoice

 

 

npm i bootstrap

 

 

npm i react-icons

 

 

npm i react-bootstrap

 

 

npm i file-saver

 

 

npm i html2canvas

 

 

npm i jspdf

 

 

App.js

 

 

 

 

App.css

 

 

 

 

Make a components folder and inside it make a InvoiceForm.jsx

 

 

 

 

Invoice Generator – React App

React 

An Invoice creator project built with React. Add itemized items, configure quantity, prices, tax rates and discounts. Download Invoice as PDFs to your device. Uses jspdf-react to capture the data from the modal and covert it from canvas -> pdf.

Live Demo

https://invoice-generator-react.netlify.app/

Screenshots

Installation

To-Do

  •  Finish parsing data into Preview Modal

  •  Currency Picker

  •  Calculate Tax and Discounts

  •  Store invoices in Firebase DB

 

 

https://github.com/johnuberbacher/invoice-generator

 

 

Leave a Reply