HTML invoice template

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.

Here it is rendered in a browser:

And rendered as a PDF via the HTML to PDF API:

Rendering as a PDF

You can render the invoice with vanilla 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 vanilla HTML and CSS. Run the following command at the root of this repo

$ ANVIL_API_TOKEN=<YOURKEY> node ./generate-pdf.js && open ./generate.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:

invoice.html - the invoice's HTML
invoice.css - the invoice's CSS
invoice-pdf.css - the invoice's PDF-specific CSS

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)

Running in a browser

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

License

MIT

git-e-001/html-pdf-invoice-template

HTML invoice template

Rendering as a PDF

Running in a browser

License