I successfully set up a table with my desired Airtable fields and a header with my logo and a document title for a basic emergency contact list, but when I try to print it as a pdf it does not display the header logo or title. Any ideas?
1 Like
Hi, were you ever able to print the table as pdf with the header? i am having the same issue and was wondering how you did it
Same here… does anyone have some easy functionality to use for printing pages or blocks?
Hi @artur, this may be simple and I just couldn’t locate the answer in the forum and I appreciate you responding!
It’s not a video but an easy explanation. We use Airtable with Softr. All users are in Softr and only our admin access Airtable.
I have two scenarios -
(1) A script is run where a document is created through a click of a button and saved to a folder in google drive. The link and an attachment of the documented is saved in Airtable. Not sure how to set it up so the user in Softr can print the document that was created.
(2) Another situation we have is a list block in Softr where we would like the user to be able to click a button and just print the information populated in that block.
I have searched the topic and found mostly a good deal of coding required and I am not at that level of programming.
Thanks so much!
1 Like
@ssa thanks for the explanations.
(1) is it a PDF file ? Can you use our file type and link it so users can at least click and open it to print ?
(2) for this we would need a custom code if you could share the page (via DM or support) we could look into it
@artur Thanks so much for getting back to me. It is a doc but the result is the same. They don’t need a button on the page because they can just print after opening. I will reach out for the second situation. I appreciate it!
Hello,
here is a code that allows to click a button on a list or list details or table block and just print the information populated in that block.
<script>
let buttons = document.querySelectorAll('[data-action-button-id^="BLOCKID-visible-btn-"');
[...buttons].forEach(button => {
button.addEventListener("click", function() {
window.print();
});
})
</script>
Hey @bethseam you need to paste this code in your page settings → Custom code → Footer section in the page where you have your list block containing a button in the fields. And you will need to replace the BLOCKID with your block name. Save and publish. After clicking the button it should print the page content.
Thank you!
I did come up with a work around that opens a duplicate page in another URL (able to use a button in the block with the URL) and hides the other blocks. I also have it set to turn the page landscape since my table was too wide and the right side was getting cut off. *** Replace BLOCKID with your block name.
<!DOCTYPE html>
<html><br><center>
<head>
<style>
/* Style for the "Print" button */
.custom-button {
background-color: #4FA6D8; /* Change to match your button's color */
color: #fafafc; /* Change to match your text color */
font-size: 16px; /* Change to match your font size */
padding: 10px 10px; /* Adjust padding as needed */
font-family: Montserrat, sans-serif; /* Change to match your font family */
border: none; /* Remove border if not needed */
cursor: pointer;
border-radius: 10px; /* Add border radius to round the edges */
text-align: center; /* Center the text horizontally */
}
.custom-button:hover {
background-color: #4FA6D8; /* Change to match hover color */
}
/* Apply landscape orientation for printing */
@page {
size: landscape;
}
/* Hide additional elements you don't want to print */
#pagelist {
display: none;
}
#acctname {
display: none;
}
#list-details2 {
display: none;
}
#agency-header {
display: none;
}
#home-footer1 {
display: none;
}
</style>
</head>
<body>
<button id="print-button" class="custom-button" data-action-button-id="BLOCKID-visible-btn-visible-btn-print">Print / Create PDF</button>
<div id="BLOCKID-block">
<!-- Content of the block -->
</div>
<script>
let buttons = document.querySelectorAll('[data-action-button-id^="BLOCKID-visible-btn-"');
[...buttons].forEach(button => {
button.addEventListener("click", function() {
// Apply landscape orientation before printing
document.querySelector('style').textContent += '@page { size: landscape; }';
window.print();
// Reset the page orientation after printing
document.querySelector('style').textContent = '';
// Add the footer to the printable version
printWindow.document.write('<footer>©Your Organization Here</footer></body></html>');
printWindow.document.close();
});
});
</script>
</body>
</html>
1 Like
Hi @Astghik ,
Maybe you can help me. I’m trying to print a list block and I pasted your code, replacing the BLOCKID (in my case with “list1”), but it won’t work.
Actually I have a button for editing the list data (item button), does it has to be a custom button/cta appart from list block? could it be an item button or topbar button in the block?
Thank you for your time!
Alfie
Hay @Alfie, it should be a button in list block with no action set. Can we discuss a few more detail via DM?
Hi, it works for me, but I’m unable to save the pdf with the images. Any idea ?
Hi,
When using the print to PDF, you may need to enable the images/graphics as in the screenshot below. It’s in French but will give you an idea where to find it.
Bonjour Matthieu, merci beaucoup 
Est-ce que l’on peut ajouter ce paramètre dans le code de manière automatique ?
No, never, impossible to add this parameter automatically, due to browser restrictions for security.
We started replacing all of our “download” action buttons with link buttons to a Documint.me template we created for that table. It allows us to completely customize the page to be printed.
It’s not native but just some food for thought, wanted to share how we’re doing it.