Generate complete fillable PDF with AppyBuilder and jspdf library


#1

Okay let me tell you a simple example based on jspdf that i used to create one of my app created with appybuilder some months ago. To build jspdf use import “https://unpkg.com/jspdf@latest/dist/jspdf.min.js” using the script src tag. This is your main jspdf library which is supported by appybuilder clones. There are total 5 such jspdf library available on net out of which only the given link work for appybuilder / thunkable / makeroid. Then if you want to show any logo or icon as your webpage title bar logo use the tag <link rel=“icon” type=“image/png” href= your image . If you want to use table within this jspdf you need to import additional jspdf library such as “https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/2.3.4/jspdf.plugin.autotable.min.js”. Now in the body you will write what will show when this webpage open something like “Pdf downloading…” This will show for the time being the jspdf is compiled by the chrome web browser on mobile. On laptop all versions of chrome don’t support it and can be tested using firefox on computer but use chrome on mobile.
Now you can use:
1 ) doc.setTextColor(0, 0, 255); to change the text colour in your pdf document.
2 ) doc.setFont(“times”); to change your desired fonts, you can also import google fonts to work with it similar to how we import it for css.
3 ) doc.setFontType(“bold”); for setting bold, italic and underline.
4 ) doc.setFontSize(20); to set the font size of text in your pdf document
5 ) doc.text(170, 20, ‘INVOICE’); to print invoice on coordinate 170 on x axis and 20 on y axis.
You can use “\xa0” to add a null value in pdf generally use it to fill in place where you use the webview set string value to replace the null value. The null value is added so you make a pdf where the user can have choice to fill only the data / information that they wish to fill and left other as blank.

Now Say you have to print three user generated value in pdf document you will need to create three global variable with null value in it. Now if the user wish to change the text value by entering data into a text box or any other input method you use the value is to be added or feed into your respective global variable such as this:

Now you can use two saperate method either you store your data temporarily on some another global variable or in a tiny db and fill all your user data in it. or you have to use window.AppInventor.setWebViewString( result ); in pace of null value which you add in jspdf file / code.

I chose the first option and here is how it look like:

Here each variable contains the value feeded by the user
Screenshot%20from%202018-10-08%2012-46-16

So once you complete your jspdf code within your app just call it in chrome using activity starter. See how the default value of these global variable look in app blocks:

Now here is a catch that you can’t let chrome to open such big code using app inventor clones at least i don;t know so if any one know please share your views and knowledge. So what i did is that i save the html file with jspdf in internal memory or sdcard as you like and then from there call from it. For example see what i did :slight_smile:
Screenshot%20from%202018-10-08%2012-53-17

Now in my app after doing all of this it appears as this :
Screenshot%20from%202018-10-08%2013-03-28 Screenshot%20from%202018-10-08%2013-03-54

with sample pdf output of:

I hope this will help and you will understand, sorry for poor explanation as its my first time i explain anything here or in any forum on net. have a good day!


Complete fillable PDF then download/share
#2

Great tutorial @AMIT_Raj. I made a separate tutorial topic with your text and images. If this is your first time you did this you did a great job.


#3

Thanks, peter.

Well one can use jspdf to make apps similar to camscaner or image to pdf i am currently working on one of such project on makeroid for designer features offcource for which i had to use separate extension on appybuilder, i will try to share some part of it for others to look at and learn { You know i can’t share my complete project otherwise they will create exact copy on playstore which is not good for any app at start}. I am also working on same project on appybuilder so i can choose the best one of the two to publish.

Yeah i forget to mention that for using image within jspdf we have to convert image into bash64 format for which one can use simplebash extension with package name com.ghostfox.SimpleBase64.aix. And thanks again; it look better as an separate tutorial.


#4

Great work done Mr.Amit Raj
I haven’t worked on it but I will download and work. Since long I was searching for pdf making tool


#5

Yeah i find my self compelled to share this information as it took me 5 days only to understand how to use it and make it work with appinventor clones such as appybuilder. You won’t believe it was so frustrating and so i finally shared some information of how i implement jspdf in my app “Free gst invoice” on playstore. I feel it will help others save their five days. And please share me some of the points which you consider safe to be shared once you publish your app. I will love to know. Any way have a good day.


#6

Thanks for the tutorial. Would you mind sharing the link to your app on Google Play? I’d like to test the functionality.


#7

Link is :https://play.google.com/store/apps/details?id=com.appybuilder.amit4blogger.FreeGstInvoice

But is only available in india tell me your country so i can temporarily enable it for your country too. I made this app for indian gst and so was not much of use for others that is the reason for enabling the app only for india. If you want message me your email adress and i will mail you my apk.


#8

Unlock it for nepal All of your App :blush::blush::blush::blush::blush::blush::blush::blush::blush::blush:


#9

Just to follow-up. AMIT-Raj sent me his app as an apk and I was unable to get it to generate a pdf. As of right now, it can’t be confirmed that this works outside of AMIT’s own testing. I believe he may be working on it at this time.


#10

Well i have tried my app on different android version across different mobile company and found most of the latest mobile and few with android 8.0 don’t work as expected but for most others it work fine. I am trying to figure out the cause and alternative method because there is only so much sets you can work with and optimize for. So if it don’t work on one of your mobile give a try with your old or another mobile with android version 5.0 to 7.0. I am working on it but it works but in not fail safe. For anyone if it not work please mention his android version and set if possible so i will correct it to work on it too.


#11

Please open it for US and I will test it on my Samsung S8 running 8.0


#13

Due to some personal reasons i am willing to sell this app aia at 10 dollar or higher. Does any one interested? I know i should have created an another topic but i think posting here will let you all interested people to know of my condition.

What will i give : 1) aia, 2 ) an zip file with detailed explanation and 3 examples which you can check on your computer or mobile anywhere you want.
3 ) Will unpublish my app from playstore and will remain unplublish for infinite time with my surety that you can use that as you wish. And last will suggest way you can improve on the app and make it even more succesful and better.

If anyone interested pm me with highest possible you can give or reply and if moderator find this post offending and impropriet then remove it or flag it - i am sorry if so.

Any way have a good day to you all.