An HTML invoice template for use in a browser and with HTML to PDF generation.
This repo contains an HTML invoice template you can customize to fit your business needs.
The template is meant to be used either in a browser, or rendered as a PDF with Anvil's HTML to PDF API. Learn more using Anvil to fill, generate, and sign PDFs on our developer page.
Here it is rendered in a browser:
And rendered as a PDF via the HTML to PDF API:
You can render the invoice with plain HTML and CSS or with React and styled-components. For use with React, see the react-pdf directory.
First sign up for Anvil and get your API key.
There is an example node script you can use to generate the PDF from plain HTML and CSS. Run the following command at the root of this repo
$ ANVIL_API_TOKEN=<YOURKEY> node ./generate-pdf.js && open ./generate-plain-html.output.pdf
Vanilla HTML and CSS for the invoice template is in the root of this repo. Feel free to view and edit these files to change the output PDF:
The script simply reads the HTML and CSS from this repo, then generates a PDF.
function buildHTMLToPDFPayload () {
const html = fs.readFileSync('./invoice.html').toString()
const css =
fs.readFileSync('./invoice.css').toString() +
fs.readFileSync('./invoice-pdf.css').toString()
return {
type: 'html',
title: 'HTML Invoice',
data: {
html,
css,
},
}
}
const exampleData = buildHTMLToPDFPayload()
const { statusCode, data, errors } = await client.generatePDF(exampleData)
See the react-pdf directory for full details on using React to generate an invoice PDF.
The tl;dr to generate a PDF with React is to yarn install
at the root of this repo, then run:
ANVIL_API_TOKEN=your_token yarn generate-pdf:react && open ./generate-react.output.pdf
Just get a server running at the root of this repo, and visit index.html
. e.g.
python -m SimpleHTTPServer 8080
Visit http://localhost:8080
See index.html for more information
This repo is provided by Anvil. Anvil provides easy APIs for all things paperwork.
Learn more on our Anvil developer page. See the API guide and the GraphQL reference for full documentation.
MIT