# Generate a PDF from a Container The recommended way to generate a PDF document with Appfarm Create is by using the [Generate Document action node](https://docs.appfarm.io/library/action-nodes/generate-document). Sometimes though, for example when you'd like to include charts, it may not be possible to create the required PDF using Generate Document. In this case, you could design your document in a [View](https://docs.appfarm.io/reference/apps/ui/views) and then make use of the browser's built-in print functionality to print the page as a PDF. You can even trigger the browser's print dialog to open using the [Open Print Dialog action node](https://docs.appfarm.io/library/action-nodes/open-print-dialog). A third option, detailed in this guide, is to use the [Run Code action node](https://docs.appfarm.io/library/action-nodes/run-code) to generate a PDF based on the contents of a [Container](https://docs.appfarm.io/library/ui-components/container). This method relies on the external JavaScript library [html2pdf](https://ekoopmans.github.io/html2pdf.js/) to convert the Container to an image and then generate a PDF which is automatically downloaded. {% hint style="warning" %} **Important** This setup uses an external JavaScript library provided by a third-party that you use at your own risk. Appfarm does not provide support for third-party libraries and will not be responsible for any issues, conflicts, errors, or damages that may occur as a result of their use. {% endhint %} {% hint style="info" %} **Example** A [working example](https://showroom.appfarm.app/use-cases/generate-pdf-container) is available in our [Showroom](https://docs.appfarm.io/getting-started/appfarm-showroom). {% endhint %} ## 1. Design your document in a Container In a new or existing [View](https://docs.appfarm.io/reference/apps/ui/views): * Add a new [Container](https://docs.appfarm.io/library/ui-components/container) that will hold the contents of the document. * In the Container's component properties, enter an **Element ID**. For example, `report`. Don't use spaces. * In the Container's style properties, enter an explicit **Width** in pixels. * Fill the Container with your desired UI components and configure them just as you normally would when building a View. * Add a new Button, outside of the Container, that will be used to trigger the PDF generation.

The active Container is configured to be used as the source for a PDF, with the Element ID highlighted.

## 2. Add the html2pdf library using a custom header tag Head to [https://ekoopmans.github.io/html2pdf.js/](https://ekoopmans.github.io/html2pdf.js/#cdn) to find the CDN URL for the latest version of the html2pdf JavaScript library. Then, under [Environments](https://docs.appfarm.io/reference/configuration/environments), for each environment in which you'd like to generate PDFs, add a new [custom header tag](https://docs.appfarm.io/reference/configuration/environments#custom-header-tags). Use the following values: | Property | Value | | --------------- | --------------------------------------------------------------------------------------------------------------------------- | | **Description** | `html2pdf` | | **Tag Type** | `Script URL` | | **Script URL** | The CDN URL of the script. For example: `https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js`. | The above properties are enough to use the library in your app. You might want to consider adding custom attributes such as `integrity` with the hash provided on the library's website.

An example of the html2pdf library added with a custom header tag.

## 3. Create an action with Run Code * Click the **On Click** event handler of the Button created in step 1 to open the **Select Action** dialog. * Click **Create New Action**. * Enter a name for the action. * Add a [Run Code action node](https://docs.appfarm.io/library/action-nodes/run-code). * Click **Code** and paste in the code below. Make sure to change the Element ID to match the one you entered in step 1 and configure any other options. This code sets the following basic options, but [more options](https://ekoopmans.github.io/html2pdf.js/#options) are available: * A 10mm margin on all sides * A filename for the generated PDF. * The width of the Container configured in step 1. * Click **OK**. ```javascript // Change 'highScorers' to match the Element ID used in step 1. const element = document.getElementById('highScorers'); /* Change the margin, in millimeters, as desired. Change the filename as desired. Change the width, in pixels, to match the width used in step 1. */ const opt = { margin: 10, // mm filename: 'High Scorers Report.pdf', html2canvas: { width: 900, useCORS: true } // width in pixels }; html2pdf().set(opt).from(element).save(); resolve(); ``` Now you can preview your app and click the button to generate a PDF. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.appfarm.io/how-to/enhance-your-app/generate-pdf-from-container.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.