Skip to content

Commit

Permalink
docs: add white space
Browse files Browse the repository at this point in the history
  • Loading branch information
schoero committed Nov 1, 2023
1 parent 3298346 commit 61f5e0a
Showing 1 changed file with 25 additions and 1 deletion.
26 changes: 25 additions & 1 deletion docs/how-to-create-a-complete-qr-bill.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,19 +5,25 @@
[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz_small.svg)
][stackblitz]

In this manual you will learn how you can use SwissQRBill to create a complete PDF file and then attach the QR slip to the bottom of the page. We will use [PDFKit][npm pdfkit] to create a PDF document with a Logo, title and the address of the biller, as well as the recipient. Then we use [SwissQRBill][npm swissqrbill] to create a table containing the billable items and add the QR slip to the bottom of the page.
In this manual you will learn how you can use SwissQRBill to create a complete PDF file and then attach the QR slip to the bottom of the page.
We will use [PDFKit][npm pdfkit] to create a PDF document with a Logo, title and the address of the biller, as well as the recipient.
Then we use [SwissQRBill][npm swissqrbill] to create a table containing the billable items and add the QR slip to the bottom of the page.

The methods used from PDFKit are documented on [pdfkit.org](http://pdfkit.org/docs/getting_started.html)
The documentation of SwissQRBill can be found in the [docs](./) directory of this repository.

The complete source code is available in [examples/how-to-create-a-complete-qr-bill][source code]. A live version of the example is available on [StackBlitz][stackblitz].

<br/>

## Prerequisites

To follow this manual you should have a basic understanding of JavaScript and Node.js.
You should also have Node.js and npm installed on your computer. If you haven't already, you can download Node.js from [nodejs.org](https://nodejs.org/en/download/).
Node.js comes with npm pre-installed.

<br/>

## Setup

[SwissQRBill][npm swissqrbill] can be installed from npm with the following command:
Expand All @@ -38,6 +44,8 @@ After the installation, PDFKit and SwissQRBill are available to be imported to t
import PDFDocument from "pdfkit";
```

<br/>

## Creating the PDF

We start by creating the PDF file itself. To do this, we create a new instance of [`PDFDocument`](pdfdocument) from PDFKit and pass it the size of `A4` as an option.
Expand All @@ -62,6 +70,8 @@ const pdf = new PDFDocument({ size: "A4" });
pdf.pipe(stream);
```

<br/>

### Adding content to the PDF

Thats all the setup we need to do to create the PDF file. Now we can start adding content to it.
Expand Down Expand Up @@ -93,6 +103,8 @@ const data = {
};
```

<br/>

#### Adding a logo

It is possible to add raster images like `.jpg` or `.png` using the built in `image()` method from PDFKit. Take a look at the [PDFKit documentation](http://pdfkit.org/docs/images.html) for further details on that.
Expand Down Expand Up @@ -135,6 +147,8 @@ Then we fill the path with our colors.

The `save()` and `restore()` methods are used to save the previous coordinates and restore them after the logo is rendered. This way we can change the positioning of the logo without affecting the rest of the document.

<br/>

#### Adding the addresses

Next, we add the address of our business and the customer address to the PDF. You can use `\n` to create a new line.
Expand All @@ -159,6 +173,8 @@ pdf.text(`${data.debtor.name}\n${data.debtor.address} ${data.debtor.buildingNumb
});
```

<br/>

#### Create a title and a date

We also add a title and the date to the PDF using the same methods as above.
Expand All @@ -181,6 +197,8 @@ pdf.text(`Musterstadt ${date.getDate()}.${date.getMonth() + 1}.${date.getFullYea
});
```

<br/>

#### Adding a table

Most invoices include some kind of table to list the items that are being billed.
Expand Down Expand Up @@ -327,6 +345,8 @@ const table = new Table({
});
```

<br/>

#### Adding the QR bill

To create the actual QR slip we use the [`SwissQRBill`][swissqrbill] class from SwissQRBill. Extend the import statement from above to also import the [`SwissQRBill`][swissqrbill] class.
Expand All @@ -341,6 +361,8 @@ The [`SwissQRBill`][swissqrbill] class takes an object as a parameter containing
const qrBill = new SwissQRBill(data);
```

<br/>

#### Combining PDF, Table and the QR bill

We now have all the information we need to create the QR bill. Now we need to combine them and add them to the PDF.
Expand All @@ -362,6 +384,8 @@ qrBill.attachTo(pdf);

Both `attachTo` methods are intelligent enough to add additional pages to the PDF if the content doesn't fit on the current page.

<br/>

#### Finalizing the document

Once our document is finished, we have to call the `end()` method from the [`PDFDocument`][pdfdocument] to finalize the document. Otherwise it will not be possible to open the generated pdf file.
Expand Down

0 comments on commit 61f5e0a

Please sign in to comment.