Create a PDF from app

Questions about Thunkable
1

Hi everyone,
for my app I need to generate a bill/ ticket in PDF taking the data from firebase.

Does anyone of you know a function ( or a third party service that allows to do that)?

I was thinking about creating a Template and filling it from the app.
I found this service that uses API but idk if it could suit my needs since i can’t really understand how it works.

here’s the link: https://us1.pdfgeneratorapi.com/dashboard

Thank you in advance.

2

@wikilinks.infooleua0, did you ever find a way to do this?

How about something like this?

3

Has there been any further investigation of this topic? I am wanting to do the same thing. I was looking at the link @domhnallohanlon provided, but I don’t know how to implement it. I would like to make a PDF from a google sheet or local table.

1 Like
4

In Google sheet, you can create an app script to print to PDF.
You will need to populate the sheet with required data and then call the script.

I have not tried it but this is what I think.

1 Like
5

In summery (so I know what kind of YouTube videos to look up), how do I incorporate an app script with Thunkable? I found this in a Google Search. How to Print Google Sheet to PDF Using Apps Script - xFanatical Is this what I am looking for or does it need to be in a different format? I haven’t’ worked with this side of Thunkable before, but I would love to learn. I just need to know what questions to ask :slight_smile:

1 Like
6

if it can be done with HTML and javascrip
I’ve done it but the web view won’t let me download the PDF and I get stuck there
I’m going to look for the web I made so you can see it, I hope I haven’t deleted it :grimacing:

1 Like
7

Yes, you are in the right track.

@Vaiper_watafai you will not be able to do it direct.

The idea is to make an app script inside the Google sheet and test it to see it works.
Next you need to publish the app script to the web. Once this is done, you will use the URL produced by publishing to web to call it from Thunkable.

As I said earlier, I have NOT tried it but this is the way it should be.

Why I’m saying this because I have my own HTML pages that I execute app scripts from the page using same method I explained above.

3 Likes
8

Thank you for that. So surprisingly, I was able to have some luck. I found and then modified a script that now returns the created pdf URL in the doGet() of the script. So now I have the script, how do I implement it into the app? Once I get a solid solution, I will share it.

1 Like
9

Now you need to convert the doGet() to a URL by choosing “Publish to web” and then test the generated URL in a browser to see that the PDF file is generated.

10

The file does successfully generate. I was able to see and view it earlier because it is already published. The function doGet is called here: (and the exportSpreadsheet returns the sheet URL)
Function

and I get this string in return with the Published web app (:
URL
If I paste this link in the browser, it does bring me to the file.

Here are my publish settings:

Deploy
Deploy879×623 38.5 KB

When I paste the URL in Export PDF, it runs the script successfully and I get something like the link I posted earlier. With this info, what do I need to do to get it into something like a variable? The Thunkable Pull was the same project but as a API deployment. I didn’t know which one I needed.

1 Like
11

Are you using templateHTML in your app script?

If yes, go to the example and also create the HTML file that should go with the app script function.

I can’t really give much suggestion without seeing the script and the sheet itself.

12

Here is the sheet:

Here is the .txt file of the script for what I have. Is this enough info? Sorry for all of the questions. This is the first time I have done this, and the documentation was not making sense. It is safe to assume that I have no idea what I am doing, and what I have gotten done this far was mostly from the git repo I found with the source code, a YouTube video which told me about the doGet(), and a basic understanding of programing to rearrange a few things and guess and check.

Original source.

Code.txt (3.4 KB)

1 Like
13

Can you use this link and see if a file named export.pdf" is created under your google drive?

https://script.googleusercontent.com/macros/echo?user_content_key=GQCSgAQTAZv0ARAslEwHyKxs1DObk3qMx_RreW5OQYsLXOyoBnQCnkA2uMz5SsU4ifmDPmsAWoOfh8l3AG6bEQqw_4GRCZhOm5_BxDlH2jW0nuo2oDemN9CCS2h10ox_1xSncGQajx_ryfhECjZEnJsskmBPdZX3F9jS7xiMmIoM2_K-HdCtuZM4PkKvEqvcM0CLSZr-ZAOsse6AgX0oGFi_8YPiHo40XtctqBb6iS0pm_arW1MzYdz9Jw9Md8uu&lib=MV2nX0A1eB76PUG68lRaC6hUooDZbrH6F

14

It does. The one I gave you initially did too (If that makes a difference)

1 Like
15

Now do it from a web viewer and make sure you get the file created. It is better to have the web viewer with default URL or no URL and have a button to assig this as the URL and see if it will create the file.

If it does (which it should) then your solution is already in production. You just need to tweak it for your requirements.

1 Like
16

It does indeed create it. Is there a way to grab the string URL which displays at the end and return that to the app? That is what my end goal is, to get that string. My other question, is there a way to pass a variable to the script from the app?

Example: There is a variable for the sheetID in the script, so is there a way to through new values through parameters to that script? Therefore generating a new PDF?

1 Like
17

Yes there is.

The best way is to have a specific row in one of the sheets that you fill it with the required info such as:

  • filename
  • print settings
  • paper size

This will require a few changes in the app script to read the values from this row and use them but these changes are very minor/

Have another specific row in this sheet for the app script to write the results in this row instead of the current “execution console”

Of course there always other ways but this will be the best as you can update the “parameter row” and get the info from the “results row” to your app.

2 Likes
18

Thank you for that. That would definitely work for me. I would also like to make something that is easy to use for everyone. I was looking into the WebViewer docs, and I found on the GitHub page this

<script type="text/javascript">
    // when the button is clicked, send a message to the app
    document.getElementById('messageButton').onclick = function() {
      ThunkableWebviewerExtension.postMessage('hello world');
    }

    // when we get a message from the app, display it on the page
    ThunkableWebviewerExtension.receiveMessage(function(message) {
      document.getElementById('messageDisplay').innerHTML = message;
    });
</script>

My thought process was to send a random message, and the received message would send back the URL. Am I able to use this in this way?

I also found this on a YouTube video. Thunkable Basics: Get and Set Web View String (with aia file) - YouTube. Does any of this apply? Thanks for helping me through this!

1 Like
19

That will not be easy with Google App Script but it would still be doable should you want to take that route.

[Edit]

This is an example of the HTML extension for the Web Viewer. As you might be aware there is no block in Thunkable to compute dates, You cannot get the date in 17 days from today, for example. So I made an extension to use JavaScript to compute the date using the Web Viewer Extension.

Check this
https://x.thunkable.com/projectPage/60d06b27eb9be10011749fcd

2 Likes
20

That looks like what I am wanting to do, but what does the HTML look like? I am not able to see it.

1 Like