# 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>" %}