# Working with PDF files

## Generating PDF files

UI Bakery allows you to generate PDF files from your Tables for reporting and other purposes. Let's review how you can do that.

### To generate PDF:

1. Navigate to the **Custom code** tab and specify the following script:

```javascript
<script src="https://unpkg.com/jspdf@2.5.1/dist/jspdf.umd.min.js"></script>
<script src="https://unpkg.com/jspdf-autotable@3.5.25/dist/jspdf.plugin.autotable.js"></script>
```

2. Load the data you need and add a table to display it. (As an example, we'll use the table with *user* data.)
3. Create a new action of the **JavaScript Code** type and add the following code:

```javascript
const doc = new jspdf.jsPDF();

doc.autoTable({
  head: [['ID', 'Name', 'Email', 'Bio']],
  body: {{ui.table.value}}.map(({ id, fullName, email, bio }) => ([id, fullName, email, bio])),
});

doc.save('users.pdf');
```

{% hint style="warning" %}
Please note that this code is **exemplary** and needs to be changed based on your table and necessary file structure.
{% endhint %}

4. Next, add the **Button** component to your working area that will download the generated file.
5. Assign your *JavaScript Code action* to the Button's component **On Click** trigger.

That's it! Now you will be able to download your Table data in the PDF format.

{% @arcade/embed flowId="ZSYMGhAX5CVGfGzmKCYV" url="<https://app.arcade.software/share/ZSYMGhAX5CVGfGzmKCYV>" %}

### Downloading PDF with a JS code action

You can also use the following code in your **JavaScript Code** action to download a PDF file:

```javascript
// Result of the previous step is available as data

const pdf = {{data}};

const pdfstr = await fetch(`data:application/pdf;base64,${pdf}`);
const blobFromFetch = await pdfstr.blob();
const blob = new Blob([blobFromFetch], { type: 'application/pdf' });

const url = URL.createObjectURL(blob);

// Create a temporary link element and trigger the download
const downloadLink = document.createElement('a');
downloadLink.href = url;
downloadLink.download = 'yourfile.pdf'; // Name your file here
document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);
```

After running the action, the file will be downloaded automatically to your default *Downloads* folder.

## Printing PDF files

Now that you've generated your PDF file, you can also print it directly from the app. Let's review how you can do that.

### To print PDF:

1. Add the **File picker** component to your working area.
2. Next, connect the [Print.js library](https://printjs.crabbly.com/#documentation) in the **Custom Code** tab using the following script:

```javascript
 <script src="https://printjs-4de6.kxcdn.com/print.min.js"></script>
```

3. Create a **JavaScript Code** action and specify the following code:

```javascript
function getBase64(file) {
  return new Promise((resolve, reject) =>{
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => {
     resolve(reader.result);
    };
    reader.onerror = (error) => {
     reject(error);
    };
  })
}
	
const base64 = await getBase64({{ui.filepicker.value}})
	
printJS({
  printable: base64.replace('data:application/pdf;base64,', ''),
  type: 'pdf',
  base64: true
});
```

4. Now, select the file you want to print in the *File picker* component and execute the action from step 3.

A *Print window* will appear where you can choose your printing options and proceed to printing the file.

{% @arcade/embed flowId="nR2aHD3kqW04L96sWPfe" url="<https://app.arcade.software/share/nR2aHD3kqW04L96sWPfe>" %}


---

# 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.uibakery.io/how-tos/file-management/generate-a-pdf-document.md?ask=<question>
```

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.