App Inventor and the Web component

How to create a pdf file

Note: the solution presented here unfortunately does not work anymore. The convert API service to convert a html document to pdf does not exist anymore.
You might want to use this solution instead.

To find a solution for this problem, I first looked at this JavaScript solution, but couldn't get it to work together with App Inventor. Then I went through these APIs and prepared the solution presented below together with the ConvertAPI.

Note: ConvertAPI now changed its policy, which means, you now need an API key to be able to create a pdf file.

Preparation

For your own app, you first have to register here to get your own ApiKey. This enables you to print 500 pdf files for free. See also here how to buy more credits.

Some basic HTML

A simple HTML document is used to generate the pdf file.

<div>
  <h1><img src="http://puravidaapps.com/images/logo.png" width="48" height="48" alt="" title=""> Pura Vida Apps</h1>
  <h2>Invoice</h2>
  <p>
    Donald Duck<br>
    1113 Quack Street<br>
    Duckburg, Calisota, USA  
  </p>
  <h3>
    Thank you for being interested in the <span style="color:green"><b>create PDF</b></span> example.<br>
   <span style="color:red">You can buy the source code for 
    <img src="http://ai2.appinventor.mit.edu/images/logo.png" width="22" height="20" alt="" title=""> App Inventor!</span><br>
    For details see here: <span style="color:blue">http://puravidaapps.com/createPDF.php</span>
  </h3>
  <h2>Woo Hoo!</h2>
</div>

Are you currently not familiar with HTML/CSS/JavaScript?

• Learn HTML/CSS with w3schools.com or codecademy.com

App Inventor Blocks

Screenshots

Questions and Answers

Q1: When you create a a pdf with your procedure, can you add pictures in it?
A: Yes, the pictures have to be available in the internet. It will not work for images stored as assets in your app or images only available on the sd card of your device. Just upload the images to the internet before creating the pdf, see also How to use the PostFile block in App Inventor. As you can see, in the example I used my logo to be displayed in the pdf file...

Q2: When the pdf has been created, can you view it by a pc or it is possible only with root?
A: The created pdf file will be stored on the sd card of your device. You can send it via email to yourself and view it by a pc and by any pdf reader which is installed on your device..

Q3: Can I rename the files and can I make two files without deleting the first?
A: Yes you can, just use the Web.ResponseFileName property to define the name of the pdf to be downloaded.

Q4: Do I need to purchase credits from "ConvertApi"?
A: Note: ConvertAPI changed its policy, which means, after creating the 500 free pdf, you will have to buy credits to be able to create more pdfs using the same ApiKey.

Test

Tested successfully on Nexus 5 running Android 4.4.4.

Back to top of page ...