Create an .aix (app inventor2), from plugin jsPDF- AutoTable

548 views
Skip to first unread message

freedomman87

unread,
Feb 23, 2018, 7:42:04 AM2/23/18
to MIT App Inventor Forum
Hi again!
I have the following problem:
I need the autotable-plugin for app inventor as an extension. I know that there is one .aix extension on thunkable, but i need some customizations for this plugin. I have already install jdk, apache ant and git bash to create app inventor extensions. This enviroement works, but i dont know how to translate the javascript code from, https://github.com/simonbengtsson/jsPDF-AutoTable, to get a java file and git bash it. Is it possible to make an .aix from javascript? Unfortunately i am a beginner and have only very little experiences in programming. Hope you can help me. Many Thanks!

freedomman87

unread,
Feb 23, 2018, 2:27:17 PM2/23/18
to MIT App Inventor Forum
Or in common: how can i customize this extension: https://community.thunkable.com/t/extension-generar-pdf-offline-de-tablas/3675
I need a grid Layout..
Thank you.

Chris Ward

unread,
Feb 23, 2018, 9:08:08 PM2/23/18
to mitappinv...@googlegroups.com
Hello freedomman87

Have you asked the extension developer if he could enhance it? That could save you a lot of time. Writing AI extensions could not be described as beginner's level, though I'm sure a determined beginner could do it.

I have never tried this extension - Andre's description seems to suggest that the document conversion is actually performed with Google Chrome (print)?

You could produce your table (basically with AI text blocks) as a single HTML file to be passed to Chrome for PDF conversion, no extension required.

Here is the w3schools example in AI. With the HTML built from lists of text blocks, it is very easy to produce. You could enhance my Header example to use more text blocks (list items) to make it easier to modify. The Column Titles and Rows could be produced dynamically at runtime with User input if required.:


TableHTML.aia

freedomman87

unread,
Feb 24, 2018, 7:20:28 AM2/24/18
to MIT App Inventor Forum
Thank you so much!
I will try it out and come back later and Report.
Thanks again and
Many Greetings
Alex

freedomman87

unread,
Feb 26, 2018, 7:55:47 AM2/26/18
to MIT App Inventor Forum
Hi again!
I tried it, and actually i like it and it looks very good. But unfortunately i dont know how to get a pdf with it. In chrome the table is displayed very nicely. From this table i need a pdf. Hope you can help me again.
Thanks a lot!
Alex

TimAI2

unread,
Feb 26, 2018, 8:55:59 AM2/26/18
to mitappinv...@googlegroups.com
These blocks will call Chrome to make a pdf (so you must have Chrome installed on device and set it to default when asked)


Here is the full html file "built" by the blocks in the BuildFile procedure


<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h3>Making PDF</h3>
</body>
<script>
var doc = new jsPDF()
var reportTitle = "Lorem Ipsum simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.";
var splitTitle = doc.splitTextToSize(reportTitle, 180);
doc.text(15, 20, splitTitle);
doc.save('filename.pdf')
</script>
</html>


How does this work? The BuildFile procedure creates a full html file using the inputs of the content and filename which can be provided by the user. The button click calls the newly created file with activityStarter to be opened by Chrome.


Hopefully you can figure it out from here ?


freedomman87

unread,
Feb 26, 2018, 3:16:36 PM2/26/18
to MIT App Inventor Forum
Thanks a lot for this! I believe that i understand it. I have read it row for row very slowly :) I will try it out and come back later.
Lot of Greetings and Thanks again.
Alex

TimAI2

unread,
Feb 26, 2018, 5:37:26 PM2/26/18
to MIT App Inventor Forum
I have a similar one that makes a table, using the autotables js plugin, but need to work this up into a AI2 solution:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h3>Making PDF Table</h3>
</body>
<script>

var doc = new jsPDF();
doc.setFontSize(18);
doc.setFontStyle('bold');
doc.text(15, 30, "My PDF Table");
doc.setFontSize(11);
doc.setFontStyle('normal');
var cols = ["Apples", "Pears", "Oranges", "Cherries"];
var rows = [
    [50, 100, 150, 200],
    [250, 300, 350, 400],
    [450, 500, 550, 600],
];
doc.autoTable(cols, rows, {startY: 50, showHeader: 'firstPage'});

doc.save('table.pdf');

</script>
</html>

You can test this in your PC browser first, should offer to save a pdf, this gets you back to where you started with the extension, but does it without the extension, so you have the flexibility you were after!

Chris Ward

unread,
Feb 26, 2018, 6:28:27 PM2/26/18
to MIT App Inventor Forum
Hi Tim, Alex

I think the jsplugin is the best solution since the AI app can produce a PDF file independent of any other app.

The scripts can be AI media components and saved to the same folder as the HTML file -no internet connection required.

TimAI2

unread,
Feb 27, 2018, 3:14:14 AM2/27/18
to MIT App Inventor Forum
@ Chris

Yes,... exactly :)

TimAI2

unread,
Feb 27, 2018, 5:24:06 PM2/27/18
to mitappinv...@googlegroups.com
Have worked up an example aia file (attached) to create a pdf table using Chrome, it should work with any reasonable set of columns and rows (will probably only make one page of A4). Chrome browser is required on the device or in Companion. Have only tested so far in Companion App. More code required to be added for the user to set the output filename for the pdf (vNewFileName) and to use columns headers and rows generated by the app (vTableHeaders and vTableRows). Of course the developer can add more functionality to the js2pdf plugin - e.g. landscape, different page size or additional pages, or custom colours,fonts etc.




Enjoy :)


Credits: inspired by pdf extension from Andres Daniel Cotes


AI2TablePDF.aia

freedomman87

unread,
Feb 28, 2018, 2:53:35 PM2/28/18
to MIT App Inventor Forum
Many many thanks to you! You both have helped me a lot!
Now i still will try the last .aia.

Lot of Greetings
Alex

freedomman87

unread,
Mar 4, 2018, 5:57:29 PM3/4/18
to mitappinv...@googlegroups.com
Hi again!
Unfortunately i still have one problem: I dont know which js code i should write into the "<!doctype html>" string to get the "grid" layout for the pdf table..:(
Hope  you can help me. Lot of thanks!

(Luckely i have solve my problem i asked before in this post) Many thanks
Alex

TimAI2

unread,
Mar 5, 2018, 9:04:49 AM3/5/18
to MIT App Inventor Forum
I was just coming back to say I don't see the problem of returning from Chrome to the app, either using the companion or with a compiled app, but you seem to have resolved it and have a new issue!

Not sure what you mean by "grid" layout - do you mean borders around all the values?

If so, you will need to research the settings for autotables and js2pdf (links above somewhere) and customise the layout

TimAI2

unread,
Mar 5, 2018, 9:16:09 AM3/5/18
to MIT App Inventor Forum
Found it add here:

In pBuildFile, below global vNewContentRows in text block:

]; doc.autoTable(cols, rows, {startY: 50, showHeader: 'firstPage',theme:'grid'}); doc.save('


freedomman87

unread,
Mar 5, 2018, 7:18:01 PM3/5/18
to mitappinv...@googlegroups.com
Hi,
yes with grid, i mean what you have described.
Thanks a lot to you for your help! I greatly appreciate it!
Lot of Greetings to you and Mr. Ward
Alex
Reply all
Reply to author
Forward
0 new messages