HTML monthly financial statement template

This repo contains a monthly statement template for financial institutions. Both React + styled components and plain HTML & CSS are supported here. The template contains all information needed to produce a compliant monthly statement according to the Electronic Fund Transfer Act / Regulation E (12 CEFR part 1005). Download it, clone it, fork it, and customize to fit your business needs.

The template is intended to be 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. It can also be used in a browser.

Rendered as a PDF via the Anvil HTML to PDF API:

And rendered in a browser:

Installing

Fork or clone this repo and run yarn install at the root.

Rendering as a PDF

You can render the statement to PDF with either React + styled-components, or plain HTML and CSS. For use with React, see the react-pdf directory.

First get an API key

First sign up for Anvil and get your API key.

Rendering a PDF with React

See the react-pdf directory for full details on using React to generate an statement PDF. The react-pdf/generate-pdf.js script is used to generate the 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=<YOURKEY> yarn generate-pdf:react && open ./generate-react.output.pdf

Rendering a PDF with plain HTML + CSS

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

Plain HTML and CSS for the statement template is in the root of this repo. Feel free to view and edit these files to change the output PDF:

• statement.html - the statement's HTML
• statement.css - the statement's CSS
• statement-pdf.css - the statement'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('./statement.html').toString()
  const css =
    fs.readFileSync('./statement.css').toString() +
    fs.readFileSync('./statement-pdf.css').toString()
  return {
    type: 'html',
    title: 'HTML Monthly Statement',
    data: {
      html,
      css,
    },
  }
}
const exampleData = buildHTMLToPDFPayload()
const { statusCode, data, errors } = await client.generatePDF(exampleData)

Running in a browser

You can run both the React and plain HTML versions of the template from the browser:

yarn web:plain-html
# Visit http://localhost:8085

yarn web:react
# Visit http://localhost:8086

See index.html for more information

Template provided by Anvil

This repo is provided by Anvil. 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 our Anvil developer page. See the API guide and the GraphQL reference for full documentation.

License

MIT