# Generate document

**Generate Document** lets you generate a PDF document that can be saved to a database-connected File Data Source. The file is generated by a **Template String** written in HTML. The Template String can be set using a **Data Binding**, a **Text Editor** or a **Function**. If using a Function, parameters can be added using `${parameterName}`.

If you are writing your own HTML for the document it might be useful to preview the result. This can be done by storing the code in its own file with the file extension _.html_ and then opening the document with your browser.

{% hint style="info" %}
An example setup of Generate Document is showcased in our [Showroom](https://showroom.appfarm.app/action-nodes/generate-document)! You may view a demo, as well as access the setup in Appfarm Create. **You may also use the HTML templates found in the Template String setting of the Generate Document actions in Create**. If you do not have access, you may register [here](https://showroom.appfarm.app/sign-up).
{% endhint %}

### Short about HTML elements:

* `<html>…</html>`: The root element of the HTML document that all other elements are contained in.
* `<head>…</head>`: The container element for processing information and metadata in the document. This container can include elements, as, for example `<style>…</style>`, which specifies the CSS style for the document. `<title>…</title>` specifies the document title and `<meta>…</meta>` can be used to specify additional metadata for the document.
* `<body>…</body>`: The container element for the visible content of the document. There is a long list of elements that can be used to generate the body of the document. Some elements are listed below:\
  – `<div>…</div>`: a generic container element with no semantic meaning\
  – `<p>…</p>`: a paragraph\
  – `<h1>…</h1> - <h6>…</h6>`: section headings, where `h1` is the highest level heading, while `h6` is the lowest-level heading.\
  – `<ol>…</ol>` ordered list or `<ul>…</ul>` unordered list, with `<li>…</li>` as list elements.\
  – `<table>…</table>` a table with `<tr>…</tr>` table rows, `<th>…</th>` table header cells and `<td>…</td>` table cells.\
  – `<img>…</img>`: an image tag used to display images.

{% file src="https://29237295-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MiLU-xcHu0eLZiTxcmZ%2Fuploads%2FyIzumErAZc3J4M3eaqmr%2FGenerateDocumentExample.txt?alt=media&token=6c16fb6a-182f-4a6c-a6c2-5da63227eca4" %}
Example of a simple HTML Template String for the Generate Document action node. This example is also found in Showroom.
{% endfile %}

### Background graphics

Printing of background colors and graphics from webpages is typically turned off by default. The same applies when using Generate Document. In order for background colors and graphics to be included in your PDF, you can add the following code to your document HTML. Note that even though the styling is applied to the `<body>` element, it will apply only to its descendants.

```
<style>
  body {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
</style>
```
