PRINTING from bubble

I know this comes as trivial question, but really I couldn’t find the solution on forum.

HOW IS IT POSSIBLE TO PRINT from Bubble?

I’m still a tester but I find this annoying issue…you have an application builder that is without an option to print your work, database, table or whatsoever.

Please help! THANKS. Bob

Hey Bob,

There are few ways to accomplish this. No, there isn’t a built-in “Print” action, but I’ve used a print script in an HTML element and it works just fine. Here’s my script, which I styled to be transparent so that I can put it over a button I created in Bubble. Clicking on it brings up the browser’s print dialog.

 <html>
<head>
<style>
.button {
     background-color: Transparent;
    background-repeat:no-repeat;
    border: none;
    cursor:pointer;
    overflow: hidden;
    outline:none;
    width: 100px;
    height: 30px;
}
</style>
</head>
<body>
<button onclick="myFunction()"; button class="button"></button>

<script>
function myFunction() {
    window.print();
}
</script>
</body>
</html>

You could use the data action “Download Data as CSV” if saving a spreadsheet of a data type is more what you need.

And, you could install the Excel-like Handson Table plugin to view your data on a page and print from there if that offers a better route for viewing/printing your data.


Gaby | Coaching Bubble

13 Likes

Hi Bob,

You can also make use of the SelectPDF plugin if you want to print PDF documents

1 Like

Hm, I will try this, but is there a way to have customizable report like whether to have page header printed or not, page footer printed or not…or end of document=“globalTextVariable” etc. ?
I have this in desktop application and it is used, for example, for users who wants to print on a memo (without header) or other option is to get customized text from database(reportHeader or reportFooter) and display it in the header and footer.
This is highly appreciated by end users because they can adjust reports more to their needs.
THANKS.

I think the SelectPDF plugin is best for this because you could design multiple pages for different preferences and go to the right page based on a user’s preference input (separate workflows).

1 Like

I have tried with SelectPDF but no success! Although, it should be simple but somehow I’m doing something wrong. Can you give some tips? I have a page with the excel table on it and I want to print only data from the table with some info in the header…
Thanks!

Hey @romanmg,

I’ve tried using your script and my page seems to be zoomed in when I go to print. Any idea how to fix this?

Uploading… Uploading…

Figured out a workaround. If you decrease the width of the browser it will print (or generate a pdf) correctly. I’m just prompting the user once they click the button (if you have trouble printing, decrease the width of your page and try again). Then I show the html element on the same button. Good enough.

Thank you!

1 Like

Great, good to hear. Yeah, I think different browsers may respond to it a little differently. In one of my apps, I have a repeating group with a shape in the cell to do alternating row colors, and the color only shows up when you enable the graphics option in the print settings. So, I also had to prompt users for that to make sure they could print properly.

1 Like

Hi,

On the question of printing, is it possible to print elements but as full pages?

Have a look at the Documental plugin

Thank you. Is there some sort of documentation around how to use the plugin?

https://documental-demo.bubbleapps.io/

More info here:

Hi Vincent, thank you for pointing me to Documental. It works perfectly except for what seems to be a small glitch. I am not sure if you could maybe point me in the right direction in resolving seeing that you have more experience using Documental than I do. Below is a message I posted on the forum but thought I should maybe direct to you for quicker assistance if possible:

Issue
I am experiencing some issues when taking a snapshot of an element with an amChart graph on it. Everything else is perfect however only the text elements of the graph appear. The graph element itself is not displayed inside an iframe. Below is a sample of what it should look like and what it looks like from a snapshot taken using Documental.and downloaded as a pdf.

As it Should Be

As it Appears When Snapshot is Used

@phuthi I think this is your answer, you have the same problem that @romanmg had.

Used this script to print the page, It works excellent. How to hide the print button after i clicked the HTML element (Actually a group to be made hidden) How to do that…?