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
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
Now in my app after doing all of this it appears as this :
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!