8 |

Notes

9 |

10 | </div>
11 | 
12 | <style>
13 | 	textarea {
14 | 		width: 100%;
15 | 	}
16 | </style>
17 |

--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"extends": "./.svelte-kit/tsconfig.json",
 3 | 	"compilerOptions": {
 4 | 		"target": "ESNext",
 5 | 		"useDefineForClassFields": true,
 6 | 		"module": "ESNext",
 7 | 		"resolveJsonModule": true,
 8 | 		"allowJs": true,
 9 | 		"checkJs": true,
10 | 		"isolatedModules": true
11 | 	},
12 | 	"include": ["src/**/*.d.ts", "src/**/*.ts", "src/**/*.svelte"]
13 | }
14 |

--------------------------------------------------------------------------------
/src/lib/Footer.svelte:
--------------------------------------------------------------------------------
 1 | <footer id="footer">
 2 | 	Quick and free invoice generator by Brandon Fowler.
 3 |     <a href="https://github.com/brandonxlf/invoice-generator" target="_blank">View source code</a>.
 4 | </footer>
 5 | 
 6 | <style>
 7 | 	#footer {
 8 | 		width: 8.5in;
 9 |         max-width: 100%;
10 |         margin: 1em auto 0;
11 |         color: #eee;
12 | 	}
13 | </style>
14 |

--------------------------------------------------------------------------------
/src/lib/PDFSection.ts:
--------------------------------------------------------------------------------
 1 | import type PDFWriter from './PDFWriter';
 2 | 
 3 | export default interface PDFSection {
 4 | 	/**
 5 | 	 * Add this PDF section to the given document
 6 | 	 *
 7 | 	 * @param writer - The PDFWriter
 8 | 	 * @param x - Horizontal coordinate of the section
 9 | 	 * @returns The height of the generated PDF section
10 | 	 */
11 | 	addTo(writer: PDFWriter, x: number): void;
12 | }
13 |

--------------------------------------------------------------------------------
/src/lib/NoteSection.ts:
--------------------------------------------------------------------------------
 1 | import type PDFSection from './PDFSection';
 2 | import PDFWriter from './PDFWriter';
 3 | 
 4 | export default class NoteSection implements PDFSection {
 5 | 	note: string = '';
 6 | 
 7 | 	addTo(writer: PDFWriter, x: number) {
 8 | 		if (!this.note) return;
 9 | 
10 | 		writer
11 | 			.addText('Notes', x, { bold: true })
12 | 			.moveDown(3)
13 | 			.addText(this.note, x);
14 | 	}
15 | }
16 |

--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | deploy.*
15 | .ht*
16 | .svelte-kit
17 | vite.config.ts.timestamp-*
18 | 
19 | # Editor directories and files
20 | .vscode/*
21 | .idea
22 | .DS_Store
23 | *.suo
24 | *.ntvs*
25 | *.njsproj
26 | *.sln
27 | *.sw?
28 |

--------------------------------------------------------------------------------
/src/app.css:
--------------------------------------------------------------------------------
 1 | * {
 2 | 	box-sizing: border-box;
 3 | }
 4 | 
 5 | body,
 6 | html {
 7 | 	width: 100%;
 8 | 	height: 100%;
 9 | }
10 | 
11 | body {
12 | 	font-family: sans-serif;
13 | 	color-scheme: dark;
14 | 	background: #222;
15 | 	color: white;
16 | 	margin: 0;
17 | }
18 | 
19 | #app {
20 | 	width: 100%;
21 | 	min-height: 100%;
22 | 	display: flex;
23 | 	flex-direction: column;
24 | 	padding: 1em;
25 | 	overflow: auto;
26 | }
27 |

--------------------------------------------------------------------------------
/src/lib/pageDimensions.ts:
--------------------------------------------------------------------------------
 1 | import type { PageSize } from './PageSize';
 2 | 
 3 | const pageDimensions: Record<
 4 | 	PageSize,
 5 | 	{
 6 | 		width: string;
 7 | 		height: string;
 8 | 	}
 9 | > = {
10 | 	letter: {
11 | 		width: '8.5in',
12 | 		height: '11in'
13 | 	},
14 | 	a4: {
15 | 		width: '210mm',
16 | 		height: '297mm'
17 | 	},
18 | 	legal: {
19 | 		width: '8.5in',
20 | 		height: '14in'
21 | 	}
22 | };
23 | 
24 | export default pageDimensions;
25 |

--------------------------------------------------------------------------------
/src/lib/InvoiceInfo.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import type InvoiceInfoSection from './InvoiceInfoSection';
 3 | 
 4 | 	export let data: InvoiceInfoSection;
 5 | </script>
 6 | 
 7 | <div class="grid" style="grid-template-columns: auto auto;">
 8 | 	<div>Invoice #</div>
 9 | 	<input bind:value={data.number} />
10 | 	<div>Invoice Date</div>
11 | 	<input bind:value={data.date} />
12 | 	<div>Due Date</div>
13 | 	<input bind:value={data.due} />
14 | </div>
15 |

--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Invoice Generator
 2 | 
 3 | Quick and free invoice generator created with Svelte.
 4 | 
 5 | See the live version at <https://www.brandonfowler.me/invoice-generator/>.
 6 | 
 7 | ## Building
 8 | 
 9 | Invoice Generator uses npm scripts for building and testing, so first, make sure npm is installed. To start a local development server with hot reloading run `npm run dev`. To create a production version ready for deployment run `npm run build`.
10 | 
11 | ## Code Checking
12 | 
13 | Code checking is performed with `npm run check` and code formatting with `npm run clean`.
14 |

--------------------------------------------------------------------------------
/src/lib/InvoiceInfoSection.ts:
--------------------------------------------------------------------------------
 1 | import type PDFSection from './PDFSection';
 2 | import PDFWriter from './PDFWriter';
 3 | 
 4 | export default class InvoiceInfoSection implements PDFSection {
 5 | 	number = 'INV-001';
 6 | 	date = new Date().toISOString().split('T')[0];
 7 | 	due = '';
 8 | 
 9 | 	static labels = {
10 | 		number: 'Invoice #',
11 | 		date: 'Invoice Date',
12 | 		due: 'Due Date'
13 | 	};
14 | 
15 | 	addTo(writer: PDFWriter, x: number) {
16 | 		(['number', 'date', 'due'] as const).forEach((key) => {
17 | 			if (!this[key]) return;
18 | 
19 | 			writer
20 | 				.addTextCell(InvoiceInfoSection.labels[key], x)
21 | 				.addTextCell(this[key], x + 30)
22 | 				.finishTextRow()
23 | 				.moveDown(3);
24 | 		});
25 | 	}
26 | }
27 |

--------------------------------------------------------------------------------
/src/lib/Address.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import type AddressSection from './AddressSection';
 3 | 
 4 | 	export let address: AddressSection;
 5 | </script>
 6 | 
 7 | <div class="grid">
 8 | 	<div class="title">{address.title}</div>
 9 | 	<input
10 | 		placeholder="Company"
11 | 		bind:value={address.name}
12 | 		on:input={(e) => address.onChange('name')}
13 | 	/>
14 | 	<input
15 | 		placeholder="Address"
16 | 		bind:value={address.street}
17 | 		on:input={(e) => address.onChange('street')}
18 | 	/>
19 | 	<input
20 | 		placeholder="Address 2"
21 | 		bind:value={address.street2}
22 | 		on:input={(e) => address.onChange('street2')}
23 | 	/>
24 | 	<input
25 | 		placeholder="City"
26 | 		bind:value={address.city}
27 | 		on:input={(e) => address.onChange('city')}
28 | 	/>
29 | </div>
30 |

--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"name": "invoice-generator",
 3 | 	"private": true,
 4 | 	"version": "0.0.0",
 5 | 	"type": "module",
 6 | 	"scripts": {
 7 | 		"dev": "vite",
 8 | 		"build": "vite build",
 9 | 		"preview": "vite preview",
10 | 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
11 | 		"format": "prettier --write ."
12 | 	},
13 | 	"devDependencies": {
14 | 		"@sveltejs/adapter-static": "^3.0.1",
15 | 		"@sveltejs/kit": "^2.5.5",
16 | 		"@sveltejs/vite-plugin-svelte": "^3.0.1",
17 | 		"@tsconfig/svelte": "^5.0.2",
18 | 		"prettier": "^3.1.1",
19 | 		"prettier-plugin-svelte": "^3.1.2",
20 | 		"svelte": "^4.2.8",
21 | 		"svelte-check": "^3.6.2",
22 | 		"tslib": "^2.5.0",
23 | 		"typescript": "^5.3.3",
24 | 		"vite": "^5.0.11"
25 | 	},
26 | 	"dependencies": {
27 | 		"jspdf": "^2.5.1"
28 | 	}
29 | }
30 |

--------------------------------------------------------------------------------
/svelte.config.js:
--------------------------------------------------------------------------------
 1 | import adapter from '@sveltejs/adapter-static';
 2 | import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 3 | 
 4 | /** @type {import('@sveltejs/kit').Config} */
 5 | export default {
 6 | 	// Consult https://svelte.dev/docs#compile-time-svelte-preprocess
 7 | 	// for more information about preprocessors
 8 | 	preprocess: [vitePreprocess({})],
 9 | 
10 | 
11 | 	kit: {
12 | 		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
13 | 		// If your environment is not supported or you settled on a specific environment, switch out the adapter.
14 | 		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
15 | 		adapter: adapter({
16 | 			// default options are shown. On some platforms
17 | 			// these options are set automatically — see below
18 | 			pages: 'dist',
19 | 			assets: 'dist',
20 | 			fallback: undefined,
21 | 			precompress: false,
22 | 			strict: true
23 | 		})
24 | 	}
25 | };
26 |

--------------------------------------------------------------------------------
/src/lib/ItemTableTotals.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import type ItemTableSection from './ItemTableSection';
 3 | 
 4 | 	export let itemTable: ItemTableSection;
 5 | </script>
 6 | 
 7 | <div class="row grid" style="grid-template-columns: 3fr 1fr 1fr 1fr;">
 8 | 	<div />
 9 | 	<div />
10 | 	<div>Sub-Total</div>
11 | 	<output>{itemTable.subTotal.toFixed(2)}</output>
12 | 	<hr />
13 | 	<div />
14 | 	<div />
15 | 	<div>
16 | 		Tax (<input
17 | 			type="number"
18 | 			class="tax-input"
19 | 			bind:value={itemTable.taxRate}
20 | 			on:input={itemTable.taxRateChanged.bind(itemTable)}
21 | 		/>%)
22 | 	</div>
23 | 	<output>{itemTable.tax.toFixed(2)}</output>
24 | 	<hr />
25 | 	<div />
26 | 	<div />
27 | 	<div class="title">Total</div>
28 | 	<output class="title">{itemTable.total.toFixed(2)}</output>
29 | </div>
30 | 
31 | <style>
32 | 	.tax-input {
33 | 		width: 3em;
34 | 		margin-right: 4px;
35 | 	}
36 | 
37 | 	.row {
38 | 		white-space: nowrap;
39 | 	}
40 | 
41 | 	hr {
42 | 		grid-column: 3 / 5;
43 | 		width: 100%;
44 | 		border: none;
45 | 		border-bottom: 1px solid #767676;
46 | 		margin: 0;
47 | 	}
48 | </style>
49 |

--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2024 Brandon Fowler
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |

--------------------------------------------------------------------------------
/src/lib/AddressSection.ts:
--------------------------------------------------------------------------------
 1 | import type PDFSection from './PDFSection';
 2 | import PDFWriter from './PDFWriter';
 3 | 
 4 | export default class AddressSection implements PDFSection {
 5 | 	static ORDER = ['name', 'street', 'street2', 'city'] as const;
 6 | 
 7 | 	name = '';
 8 | 	street = '';
 9 | 	street2 = '';
10 | 	city = '';
11 | 	storageKey?: string;
12 | 
13 | 	constructor(
14 | 		public title: string,
15 | 		public save = false
16 | 	) {
17 | 		this.storageKey = this.save
18 | 			? this.title.toLowerCase().replace(/ /g, '-')
19 | 			: undefined;
20 | 
21 | 		AddressSection.ORDER.forEach((key) => {
22 | 			if (!this.storageKey) this[key] = '';
23 | 			this[key] =
24 | 				globalThis.localStorage?.getItem(`invoice-${this.storageKey}-${key}`) ?? '';
25 | 		});
26 | 	}
27 | 
28 | 	onChange(key: (typeof AddressSection.ORDER)[number]): void {
29 | 		if (this.storageKey)
30 | 			globalThis.localStorage?.setItem(`invoice-${this.storageKey}-${key}`, this[key]);
31 | 	}
32 | 
33 | 	addTo(writer: PDFWriter, x: number) {
34 | 		const entries = AddressSection.ORDER.map((key) => this[key]).filter(
35 | 			(str) => str
36 | 		);
37 | 
38 | 		if (entries.length) {
39 | 			writer.addText(this.title, x, { bold: true }).moveDown(3);
40 | 		}
41 | 
42 | 		entries.forEach((str) => {
43 | 			writer.addText(str, x).moveDown(3);
44 | 		});
45 | 	}
46 | }
47 |

--------------------------------------------------------------------------------
/src/lib/ItemTable.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import type ItemTableSection from './ItemTableSection';
 3 | 
 4 | 	export let itemTable: ItemTableSection;
 5 | 
 6 | 	function onDescChange(i: number) {
 7 | 		const lastRow = itemTable.items.length - 1 === i;
 8 | 		const hasValues = !!itemTable.items[i].desc;
 9 | 
10 | 		if (lastRow && hasValues) {
11 | 			itemTable = itemTable.addItem();
12 | 			return;
13 | 		}
14 | 
15 | 		if (!lastRow && !hasValues) itemTable = itemTable.removeItem(i);
16 | 	}
17 | 
18 | 	itemTable.addItem();
19 | </script>
20 | 
21 | <div class="row grid" style="grid-template-columns: 3fr 1fr 1fr 1fr;">
22 | 	<div class="header">Description</div>
23 | 	<div class="header">Quantity</div>
24 | 	<div class="header">Rate</div>
25 | 	<div class="header">Amount</div>
26 | 	{#each itemTable.items as item, i}
27 | 		<hr />
28 | 		<textarea
29 | 			rows="2"
30 | 			bind:value={item.desc}
31 | 			on:input={() => onDescChange(i)}
32 | 		/>
33 | 		<input type="number" bind:value={item.quantity} />
34 | 		<input type="number" bind:value={item.rate} />
35 | 		<output>{item.amount.toFixed(2)}</output>
36 | 	{/each}
37 | 	<hr />
38 | </div>
39 | 
40 | <style>
41 | 	.header {
42 | 		font-size: 105%;
43 | 		font-weight: bold;
44 | 	}
45 | 
46 | 	hr {
47 | 		grid-column: 1 / 5;
48 | 		width: 100%;
49 | 		border: none;
50 | 		border-bottom: 1px solid #767676;
51 | 		margin: 0;
52 | 	}
53 | </style>
54 |

--------------------------------------------------------------------------------
/src/lib/ItemTableSection.ts:
--------------------------------------------------------------------------------
  1 | import type PDFSection from './PDFSection';
  2 | import Item from './Item';
  3 | import PDFWriter from './PDFWriter';
  4 | 
  5 | export default class ItemTableSection implements PDFSection {
  6 | 	items: Item[] = [];
  7 | 	taxRate: number = parseFloat(
  8 | 		globalThis.localStorage?.getItem('invoice-tax-rate') ?? '10'
  9 | 	);
 10 | 
 11 | 	taxRateChanged() {
 12 | 		globalThis.localStorage?.setItem('invoice-tax-rate', this.taxRate.toString());
 13 | 	}
 14 | 
 15 | 	addItem() {
 16 | 		this.items.push(new Item());
 17 | 		return this;
 18 | 	}
 19 | 
 20 | 	removeItem(i: number) {
 21 | 		this.items.splice(i, 1);
 22 | 		return this;
 23 | 	}
 24 | 
 25 | 	get subTotal() {
 26 | 		return this.items.reduce(
 27 | 			(currentTotal, item) => currentTotal + item.amount,
 28 | 			0
 29 | 		);
 30 | 	}
 31 | 
 32 | 	get tax() {
 33 | 		return this.subTotal * (this.taxRate / 100);
 34 | 	}
 35 | 
 36 | 	get total() {
 37 | 		return this.subTotal + this.tax;
 38 | 	}
 39 | 
 40 | 	addTo(writer: PDFWriter, x: number) {
 41 | 		const cols = [
 42 | 			x,
 43 | 			writer.pageSize.width - PDFWriter.MARGIN - 90,
 44 | 			writer.pageSize.width - PDFWriter.MARGIN - 60,
 45 | 			writer.pageSize.width - PDFWriter.MARGIN - 30
 46 | 		];
 47 | 
 48 | 		this.addHeaderTo(writer, cols);
 49 | 
 50 | 		for (let i = 0; i < this.items.length - 1; i++)
 51 | 			this.addItemTo(writer, this.items[i], cols);
 52 | 
 53 | 		writer.addLine(x, writer.pageSize.width - PDFWriter.MARGIN);
 54 | 
 55 | 		this.addTotalTo(writer, cols);
 56 | 	}
 57 | 
 58 | 	private addHeaderTo(writer: PDFWriter, cols: number[]) {
 59 | 		writer
 60 | 			.addTextCell('Description', cols[0], { bold: true })
 61 | 			.addTextCell('Quantity', cols[1], { bold: true })
 62 | 			.addTextCell('Rate', cols[2], { bold: true })
 63 | 			.addTextCell('Amount', cols[3], { bold: true })
 64 | 			.finishTextRow()
 65 | 			.moveDown(3);
 66 | 	}
 67 | 
 68 | 	private addItemTo(writer: PDFWriter, item: Item, cols: number[]) {
 69 | 		writer
 70 | 			.addLine(cols[0], writer.pageSize.width - PDFWriter.MARGIN)
 71 | 			.moveDown(3)
 72 | 			.addTextCell(item.desc, cols[0], {
 73 | 				maxWidth: cols[1] - cols[0] - 3
 74 | 			})
 75 | 			.addTextCell(item.quantity.toString(), cols[1])
 76 | 			.addTextCell(item.rate.toFixed(2), cols[2])
 77 | 			.addTextCell(item.amount.toFixed(2), cols[3])
 78 | 			.finishTextRow()
 79 | 			.moveDown(3);
 80 | 	}
 81 | 
 82 | 	private addTotalTo(writer: PDFWriter, cols: number[]) {
 83 | 		writer.moveDown(5);
 84 | 
 85 | 		if (this.taxRate) {
 86 | 			writer
 87 | 				.moveDown(3)
 88 | 				.addTextCell('Sub-Total', cols[2])
 89 | 				.addTextCell(this.subTotal.toFixed(2), cols[3])
 90 | 				.finishTextRow()
 91 | 				.moveDown(3)
 92 | 				.addLine(cols[2], writer.pageSize.width - PDFWriter.MARGIN)
 93 | 				.moveDown(3)
 94 | 				.addTextCell(`Tax (${this.taxRate}%)`, cols[2])
 95 | 				.addTextCell(this.tax.toFixed(2), cols[3])
 96 | 				.finishTextRow()
 97 | 				.moveDown(3)
 98 | 				.addLine(cols[2], writer.pageSize.width - PDFWriter.MARGIN);
 99 | 		}
100 | 
101 | 		writer
102 | 			.moveDown(3)
103 | 			.addTextCell('Total', cols[2], { bold: true, fontSize: 16 })
104 | 			.addTextCell(this.total.toFixed(2), cols[3], { bold: true, fontSize: 16 })
105 | 			.finishTextRow();
106 | 	}
107 | }
108 |

--------------------------------------------------------------------------------
/src/lib/Page.svelte:
--------------------------------------------------------------------------------
  1 | <script lang="ts">
  2 | 	import StreetAddress from './Address.svelte';
  3 | 	import InvoiceInfo from './InvoiceInfo.svelte';
  4 | 	import ProductTable from './ItemTable.svelte';
  5 | 	import ItemTableTotals from './ItemTableTotals.svelte';
  6 | 	import NoteRow from './NoteRow.svelte';
  7 | 	import InvoiceTitle from './InvoiceTitle.svelte';
  8 | 	import AddressSection from './AddressSection';
  9 | 	import InvoiceInfoSection from './InvoiceInfoSection';
 10 | 	import ItemTableSection from './ItemTableSection';
 11 | 	import NoteSection from './NoteSection';
 12 | 	import PDFWriter from './PDFWriter';
 13 | 	import InvoiceTitleSection from './InvoiceTitleSection';
 14 | 	import pageDimensions from './pageDimensions';
 15 | 	import type { PageSize } from './PageSize';
 16 | 
 17 | 	let invoiceTitle = new InvoiceTitleSection();
 18 | 	let fromAddress = new AddressSection('From', true);
 19 | 	let billAddress = new AddressSection('Bill To');
 20 | 	let invoiceInfo = new InvoiceInfoSection();
 21 | 	let items = new ItemTableSection();
 22 | 	let noteData = new NoteSection();
 23 | 	let pageSize: PageSize = globalThis.localStorage?.getItem('invoice-page-size') as PageSize ?? 'letter';
 24 | 
 25 | 	function createPDF() {
 26 | 		return new PDFWriter(pageSize)
 27 | 			.addSection(fromAddress)
 28 | 			.addSection(invoiceTitle, 0, true)
 29 | 			.finishRow()
 30 | 			.addSection(billAddress)
 31 | 			.addSection(invoiceInfo, 65, true)
 32 | 			.finishRow()
 33 | 			.addSection(items)
 34 | 			.finishRow()
 35 | 			.addSection(noteData)
 36 | 			.finishRow();
 37 | 	}
 38 | 
 39 | 	$: dimensions = pageDimensions[pageSize];
 40 | 	$: globalThis.localStorage?.setItem('invoice-page-size', pageSize);
 41 | </script>
 42 | 
 43 | <main id="page" style="max-width: {dimensions.width}; min-height: min(90vh, {dimensions.height});">
 44 | 	<div class="row flex-row">
 45 | 		<StreetAddress bind:address={fromAddress} />
 46 | 		<InvoiceTitle />
 47 | 	</div>
 48 | 	<div class="row flex-row">
 49 | 		<StreetAddress bind:address={billAddress} />
 50 | 		<InvoiceInfo bind:data={invoiceInfo} />
 51 | 	</div>
 52 | 	<ProductTable bind:itemTable={items} />
 53 | 	<ItemTableTotals bind:itemTable={items} />
 54 | 	<NoteRow bind:data={noteData} />
 55 | 	<div class="row button-row">
 56 | 		<label>
 57 | 			<span>Page Size:</span>
 58 | 			<select bind:value={pageSize}>
 59 | 				<option value="letter">Letter</option>
 60 | 				<option value="a4">A4</option>
 61 | 				<option value="legal">Legal</option>
 62 | 			</select>
 63 | 		</label>
 64 | 		<button on:click={() => createPDF().open()}>View PDF</button>
 65 | 		<button on:click={() => createPDF().save()}>Save PDF</button>
 66 | 	</div>
 67 | </main>
 68 | 
 69 | <style>
 70 | 	#page {
 71 | 		color-scheme: light;
 72 | 		background: white;
 73 | 		color: black;
 74 | 		padding: 1in;
 75 | 		margin: auto;
 76 | 	}
 77 | 
 78 | 	.button-row {
 79 | 		display: flex;
 80 | 		align-items: center;
 81 | 		gap: 1em;
 82 | 	}
 83 | 
 84 | 	:global(#page .title) {
 85 | 		font-size: 125%;
 86 | 		font-weight: bold;
 87 | 	}
 88 | 
 89 | 	:global(#page .row:not(:last-child)) {
 90 | 		margin-bottom: 0.5in;
 91 | 	}
 92 | 
 93 | 	:global(#page .flex-row) {
 94 | 		display: flex;
 95 | 		align-items: start;
 96 | 		justify-content: space-between;
 97 | 		gap: 8px;
 98 | 	}
 99 | 
100 | 	:global(#page .grid) {
101 | 		display: grid;
102 | 		align-items: start;
103 | 		gap: 8px;
104 | 	}
105 | 
106 | 	:global(#page input, #page textarea, #page select) {
107 | 		color-scheme: light;
108 | 		color: black;
109 | 		background: #eee;
110 | 		min-width: 20px;
111 | 		border: none;
112 | 		padding: 2px;
113 | 		margin: 0;
114 | 	}
115 | 
116 | 	:global(#page button) {
117 | 		margin: 0;
118 | 	}
119 | 
120 | 	:global(#page textarea) {
121 | 		resize: vertical;
122 | 	}
123 | 
124 | 	@media (max-width: 800px), (max-height: 800px) {
125 | 		#page {
126 | 			padding: 0.25in;
127 | 		}
128 | 	}
129 | </style>
130 |

--------------------------------------------------------------------------------
/src/lib/PDFWriter.ts:
--------------------------------------------------------------------------------
  1 | import jsPDF, { type TextOptionsLight } from 'jspdf';
  2 | import type PDFSection from './PDFSection';
  3 | 
  4 | export type PDFWriterTextOptions = {
  5 | 	bold?: boolean;
  6 | 	fontSize?: number;
  7 | } & TextOptionsLight;
  8 | 
  9 | export default class PDFWriter {
 10 | 	static MARGIN = 25.4;
 11 | 
 12 | 	pageSize: {
 13 | 		width: number;
 14 | 		height: number;
 15 | 	};
 16 | 
 17 | 	private static TEXT_OPTS = { baseline: 'top' } as const;
 18 | 	private static FONT_SIZE = 12;
 19 | 
 20 | 	private currentY = PDFWriter.MARGIN;
 21 | 	private rowMax = [0, 0];
 22 | 	private textRowMax = [0, 0];
 23 | 	private doc: jsPDF;
 24 | 
 25 | 	/**
 26 | 	 * Create a new PDFWriter
 27 | 	 *
 28 | 	 * @param pageSize The size of the page (a4, letter, etc.)
 29 | 	 */
 30 | 	constructor(pageSize: string) {
 31 | 		this.doc = new jsPDF('p', 'mm', pageSize);
 32 | 		this.pageSize = this.doc.internal.pageSize;
 33 | 
 34 | 		this.doc.setFontSize(PDFWriter.FONT_SIZE);
 35 | 	}
 36 | 
 37 | 	/**
 38 | 	 * Add a PDF section to the document
 39 | 	 *
 40 | 	 * @param section - The PDF section to add
 41 | 	 * @param x - The horizontal position of the PDF section
 42 | 	 * @param fromRight - True if `x` begins on the right side
 43 | 	 * @returns `this` for chaining methods
 44 | 	 */
 45 | 	addSection(section: PDFSection, x: number = 0, fromRight = false): this {
 46 | 		x = fromRight
 47 | 			? this.pageSize.width - x - PDFWriter.MARGIN
 48 | 			: x + PDFWriter.MARGIN;
 49 | 
 50 | 		const originalInfo = [
 51 | 			this.doc.getCurrentPageInfo().pageNumber,
 52 | 			this.currentY
 53 | 		];
 54 | 
 55 | 		section.addTo(this, x);
 56 | 
 57 | 		const newInfo = [this.doc.getCurrentPageInfo().pageNumber, this.currentY];
 58 | 
 59 | 		if (
 60 | 			newInfo[0] > this.rowMax[0] ||
 61 | 			(newInfo[0] === this.rowMax[0] && newInfo[1] > this.rowMax[1])
 62 | 		) {
 63 | 			this.rowMax = newInfo;
 64 | 		}
 65 | 
 66 | 		this.doc.setPage(originalInfo[0]);
 67 | 		this.currentY = originalInfo[1];
 68 | 
 69 | 		return this;
 70 | 	}
 71 | 
 72 | 	/**
 73 | 	 * Move the current y position down
 74 | 	 *
 75 | 	 * @param y - The amount to move it down by in mm
 76 | 	 * @returns `this` for chaining methods
 77 | 	 */
 78 | 	moveDown(y: number): this {
 79 | 		this.currentY += y;
 80 | 
 81 | 		if (this.currentY + PDFWriter.MARGIN > this.pageSize.height) {
 82 | 			this.doc.addPage();
 83 | 			this.currentY = PDFWriter.MARGIN;
 84 | 		}
 85 | 
 86 | 		return this;
 87 | 	}
 88 | 
 89 | 	/**
 90 | 	 * Add text to the document
 91 | 	 *
 92 | 	 * @param text - The text to add
 93 | 	 * @param x - The x position to add the text
 94 | 	 * @param options - Options for the text
 95 | 	 * @returns `this` for chaining methods
 96 | 	 */
 97 | 	addText(text: string, x: number, options?: PDFWriterTextOptions): this {
 98 | 		const opts = { ...PDFWriter.TEXT_OPTS, ...options };
 99 | 
100 | 		opts.maxWidth ??=
101 | 			options?.align === 'right'
102 | 				? x - PDFWriter.MARGIN
103 | 				: this.pageSize.width - x - PDFWriter.MARGIN;
104 | 
105 | 		const lines = text
106 | 			.split('\n')
107 | 			.flatMap((line) => this.doc.splitTextToSize(line, opts.maxWidth!));
108 | 
109 | 		if (opts.bold) {
110 | 			this.doc.setFont(undefined as unknown as string, 'bold');
111 | 		}
112 | 
113 | 		if (opts.fontSize !== undefined) {
114 | 			this.doc.setFontSize(opts.fontSize);
115 | 		}
116 | 
117 | 		lines.forEach((line) => {
118 | 			const height = this.doc.getTextDimensions(line, opts).h;
119 | 
120 | 			if (this.currentY + height + PDFWriter.MARGIN > this.pageSize.height) {
121 | 				this.doc.addPage();
122 | 				this.currentY = PDFWriter.MARGIN;
123 | 			}
124 | 
125 | 			this.doc.text(line, x, this.currentY, opts);
126 | 			this.currentY += height;
127 | 		});
128 | 
129 | 		if (opts.bold) {
130 | 			this.doc.setFont(undefined as unknown as string, 'normal');
131 | 		}
132 | 
133 | 		if (opts.fontSize !== undefined) {
134 | 			this.doc.setFontSize(PDFWriter.FONT_SIZE);
135 | 		}
136 | 
137 | 		return this;
138 | 	}
139 | 
140 | 	/**
141 | 	 * Add a text cell to the text row
142 | 	 *
143 | 	 * @param text - The text to add
144 | 	 * @param x - The x position to add the text
145 | 	 * @param options - Options for the text
146 | 	 * @returns `this` for chaining methods
147 | 	 */
148 | 	addTextCell(text: string, x: number, options?: PDFWriterTextOptions): this {
149 | 		const originalInfo = [
150 | 			this.doc.getCurrentPageInfo().pageNumber,
151 | 			this.currentY
152 | 		];
153 | 
154 | 		this.addText(text, x, options);
155 | 
156 | 		const newInfo = [this.doc.getCurrentPageInfo().pageNumber, this.currentY];
157 | 
158 | 		if (
159 | 			newInfo[0] > this.textRowMax[0] ||
160 | 			(newInfo[0] === this.textRowMax[0] && newInfo[1] > this.textRowMax[1])
161 | 		) {
162 | 			this.textRowMax = newInfo;
163 | 		}
164 | 
165 | 		this.doc.setPage(originalInfo[0]);
166 | 		this.currentY = originalInfo[1];
167 | 
168 | 		return this;
169 | 	}
170 | 
171 | 	/**
172 | 	 * Set the current y position to the largest item in the text row and create a new row
173 | 	 *
174 | 	 * @returns `this` for chaining methods
175 | 	 */
176 | 	finishTextRow(): this {
177 | 		if (this.textRowMax[0] > 0) {
178 | 			this.doc.setPage(this.textRowMax[0]);
179 | 			this.currentY = this.textRowMax[1];
180 | 		}
181 | 
182 | 		this.textRowMax = [0, 0];
183 | 
184 | 		return this;
185 | 	}
186 | 
187 | 	/**
188 | 	 * Add a horizontal line
189 | 	 *
190 | 	 * @param x1 - The start of the line
191 | 	 * @param x2 - The end of the line
192 | 	 * @returns `this` for chaining methods
193 | 	 */
194 | 	addLine(x1: number, x2: number): this {
195 | 		this.doc.line(x1, this.currentY, x2, this.currentY);
196 | 		return this;
197 | 	}
198 | 
199 | 	/**
200 | 	 * Add items to the current row and start a new row
201 | 	 *
202 | 	 * @returns `this` for chaining methods
203 | 	 */
204 | 	finishRow(): this {
205 | 		if (this.rowMax[0] > 0) {
206 | 			this.doc.setPage(this.rowMax[0]);
207 | 			this.currentY = this.rowMax[1];
208 | 		}
209 | 
210 | 		this.moveDown(PDFWriter.MARGIN / 2);
211 | 		this.rowMax = [0, 0];
212 | 
213 | 		return this;
214 | 	}
215 | 
216 | 	/**
217 | 	 * Save the PDF document
218 | 	 */
219 | 	save(): void {
220 | 		this.doc.save('invoice.pdf');
221 | 	}
222 | 
223 | 	/**
224 | 	 * Open the PDF document in a new browser tab
225 | 	 */
226 | 	open(): void {
227 | 		window.open(this.doc.output('bloburi'));
228 | 	}
229 | }
230 |

--------------------------------------------------------------------------------