HOWTO: Create a PDF, offline, "within" AI2 using jsPDF and base64 extn by Juan Antonio

2,522 views
Skip to first unread message

TimAI2

unread,
Aug 29, 2019, 5:27:25 PM8/29/19
to mitappinv...@googlegroups.com
###see second post for fix for Android 9 / other versions...###

With many thanks to Juan Antonio, who developed THIS extension, we are now able to create pdf files within AI2, offline,
using the jsPDF javascript library

I have prepared a simple example to demonstrate how this is done, and can be used as a base to replace the other HOWTOs, and 
some extensions that do much the same, but relied upon Chrome for the pdf creation. My new method with Juan's extension
and the jsPDF js library is self contained.

In essence:
  1. The pdf content is sent to the html file in the webviewer using WebViewString
  2. The jsPDf plugin creates the pdf then
  3. outputs to a datauri (base64 encoded stream) then
  4. in the html set the WebViewString with the datauri
  5. The WebViewString change event picks up the datauri
  6. Juan's extension then converts and saves the pdf to a file with the filename supplied
  7. The pdf is displayed using the device's default PDF viewer

HTML

<!DOCTYPE html>
<html>
<head>
<title>GENPDF</title>
<script src="jspdf.min.js"></script>
</head>
<body>
<div id = 'genpdf'></div>
</body>
<script>
var content = window.AppInventor.getWebViewString().split(" || ")[0];
var doc = new jsPDF();
eval(content);
var returnOutput = doc.output('datauri',window.AppInventor.getWebViewString().split(" || ")[1]);
window.AppInventor.setWebViewString(returnOutput);

</script>
</html>

BLOCKS

pdfofflineblocks.png


VIDEO and AIA(after edit) attached


You will probably need to visit the jsPDF pages on github to understand the syntax for adding content:


Live Demo Examples


Documentation



n.b. added to FAQ
offpdf.webm
PDFOffLineInAI2.aia

TimAI2

unread,
Aug 29, 2019, 7:04:07 PM8/29/19
to mitappinv...@googlegroups.com
Hmmm, this is currently failing on Android 9 companion:

pdffailA9.png


will see if there is a fix. I picked the latest version of jsPDF.min.js.


[EDIT]


Working for me with the jspdf.debug.js library, see aia attached


PDFOffLineInAI2Debug.aia

Chris Ward

unread,
Aug 29, 2019, 8:13:31 PM8/29/19
to MIT App Inventor Forum
This has a lot of potential, nice demo Tim :)

Juan Antonio

unread,
Aug 30, 2019, 2:50:09 AM8/30/19
to mitappinv...@googlegroups.com
Good job Tim! I've tried it in Android5 and Android9 and it works!

pdf22.png

Copy&Paste: Example of user input from: https://mrrio.github.io/




TimAI2

unread,
Aug 30, 2019, 6:04:51 AM8/30/19
to mitappinv...@googlegroups.com
It gets better!

A more practical example is to generate a pdf of a table of data.
For this we use the jspdf-autotable.js plugin along with jsPDF.debug.js
A few more blocks needed to translate an AI2 list to the correct format....

The example is set up using a list of lists that has it's first "row" as headings


HTML (more or less the same)

<!DOCTYPE html>
<html>
<head>
<title>GENPDFTABLE</title>
<script src="jspdf.debug.js"></script>
<script src="jspdf-autotable.js"></script>
</head>
<body>
<div id = 'genpdf'></div>
</body>
<script>
var content = window.AppInventor.getWebViewString().split(" || ")[0];
var doc = new jsPDF();
eval(content);
var returnOutput = doc.output('datauri',window.AppInventor.getWebViewString().split(" || ")[1]);
window.AppInventor.setWebViewString(returnOutput);

</script>
</html>


BLOCKS (added procedures to convert lists to correct format)

pdftableofflineblocks.png


Tested in Android 9 on companion

offpdftable.webm
PDFTableOffLineInAI2.aia

ABG

unread,
Aug 30, 2019, 11:20:13 AM8/30/19
to MIT App Inventor Forum
(This thread is already  in the PDF section of FAQ)
ABG
Reply all
Reply to author
Forward
0 new messages