Repository files navigation

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'sHTML to PDF API. Learn more using Anvil to fill, generate, and sign PDFs on ourdeveloper 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 thereact-pdf directory.

Firstsign up for Anvil and get yourAPI key.

There is anexample 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:

• 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.

functionbuildHTMLToPDFPayload(){consthtml=fs.readFileSync('./invoice.html').toString()constcss=fs.readFileSync('./invoice.css').toString()+fs.readFileSync('./invoice-pdf.css').toString()return{type:'html',title:'HTML Invoice',data:{      html,      css,},}}constexampleData=buildHTMLToPDFPayload()const{ statusCode, data, errors}=awaitclient.generatePDF(exampleData)

See thereact-pdf directory for full details on using React to generate an invoice PDF.

The tl;dr to generate a PDF with React is toyarn 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 visitindex.html. e.g.

python -m SimpleHTTPServer 8080

Visithttp://localhost:8080

Seeindex.html for more information

This repo is provided byAnvil. Anvil provides easy APIs for all things paperwork.

1. PDF filling API - fill out a PDF template with a web request and structured JSON data.
2. PDF generation API - send markdown or HTML and Anvil will render it to a PDF.
3. Etch e-sign with API - customizable, embeddable, e-signature platform with an API to control the signing process end-to-end.
4. Anvil Workflows (w/ API) - Webforms + PDF + e-sign with a powerful no-code builder. Easily collect structured data, generate PDFs, and request signatures.

Learn more on ourAnvil developer page. See theAPI guide and theGraphQL reference for full documentation.

MIT