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:

<script src="https://unpkg.com/[email protected]/dist/jspdf.umd.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/jspdf.plugin.autotable.js"></script>

1. Load the data you need and add a table to display it. (As an example, we'll use the table with user data.)

2. Create a new action of the JavaScript Code type and add the following code:

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');

Please note that this code is exemplary and needs to be changed based on your table and necessary file structure.

1. Next, add the Button component to your working area that will download the generated file.

2. 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.

Downloading PDF with a JS code action

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

// 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 in the Custom Code tab using the following script:

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

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

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
});

1. 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.