PDF files

Generate PDF document

You might want to generate PDF files from your tables for reporting and other purposes. Here's how you can do it in UI Bakery:

1. In the Custom Code tab, specify the code below:

<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 your data and add a table to display it. For example, we will load a table with users' data.

3. Add a new act

ion - Code. Specify the below code:

const doc = new jspdf.jsPDF();

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

doc.save('users.pdf');

Please note the code is exemplary and needs to be changed based on your table's and necessary file's structure

4. As the next step, add a Button that will download the generated file.

5. Open the Button's settings, navigate Triggers section and assign the generatePDF action to the On Click trigger.

Print PDF files

If you need to print the PDF files directly from UI Bakery, it can be achieved the following way:

1. Connect a JS library https://printjs.crabbly.com/#documentation in the Custom Code tab:

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

2. Add a Code action and specify a similar 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.pdfFileInput.value[0]}})
	
printJS({
  printable: base64.replace('data:application/pdf;base64,', ''),
  type: 'pdf',
  base64: true
});

where ui.pdfFileInput.value is an input component with field type=file.