B4J Tutorial [BANano] Creating PDF Documents with jsPDF using BANanoJsPDFAD

Ola

As you are aware, the BANanoJsPDFAD tool is out. Its developed using jsPDF and it uses the abstract designer for you to create pdf Documents.

You can insert text, triangles, images, ellipses, circles, annotations, links, lines, rectangles, rounded rectangles and more.

Step 1

Drop and jsPDFDoc, specify properties and then add some jsPDF??? elements to it like text, line, rectangles. Each elements has an X Y position and some other properties you need to specify.

BANanoJsPDFADPart01.gif


The output for the main page as per this example is:

1623938855289.png
 

Mashiane

Expert
Licensed User
Longtime User
Step 2: Adding Text.

In BANano, one would have to use library.runmethod(x, y, ...) to add text, we have a jsPDFText for that. You drop this inside a jsPDFDoc / jsPDFPage.

In jsPDF, the Text Documentation indicates how this is defined. Again, you use XY for positioning and then specify other details you need for the text.

1623939005547.png


After finishing the main document i.e. jsPDFDOc, add 1 or more jsPDFPage.
 

Mashiane

Expert
Licensed User
Longtime User
Step 10: Using your own fonts

You can use any font for your texts. Download and add the font file to your Files tab. After executing .Ready, then add the font file giving it a name and type.

B4X:
    JsPdfDoc1.Ready
    JsPdfDoc1.addFont("./assets/mouhitu.ttf", "Mouhitsu", "normal")
    JsPdfDoc1.addFont("./assets/Amiri-Regular.ttf", "Amiri", "normal")
    
    JsPdfDoc1.Go
    JsPdfDoc1.Save

Then use the font name and style i.e. Amiri & normal when setting the properties for the jsPdfText.

BANanoJsPDFADPart09.gif


Output

1623944394636.png
 

Mashiane

Expert
Licensed User
Longtime User
Whilst this library is built internally for BVAD3, we have also created a core library that is framework independent to work with any BANano Project, check it out here:

 

thinktank

Member
great going brother, I like the way you helping forum members with devotion and hard work...

btw I like the Arabic quote in your example, very meaningful indeed, its English translation is;

"If you don't feel ashamed (pious shyness from committing religious indiscretions) do whatever you like."

stay blessed.
 

Mashiane

Expert
Licensed User
Longtime User
Step 12: Adding Tables

To add tables, we use the pdfAutoTable library. You saw this with the BVAD Invoicer WebApp

Here you use the jsPDFAutoTable custom component.

Part11.gif


Indicate the datasource where the rows will be sourced from. Specify the keys (fields) and headers to use, these need to be separated with a ; Then on your code, create the rows. Also choose a theme for the table. Run your report and you are good to go.

Output

1624064802693.png
 

Mashiane

Expert
Licensed User
Longtime User
Step 13: Adding Images to Tables

Earlier we saw how we added images anywhere to a PDF document, but how do we add them to images. This is an upcoming feature if the Invoice App.

1624129774679.png


Have your images in the Files folder. These will be copied to the assets folder.

For our table definition, we add the column for the Keys and Headers and note the column that will have images. Keys are the field names whilst Headers are the header titles.

Part13.gif


Then add the data that we will show on our table.

We give these the paths of our images per record...

B4X:
Sub tabledata            'ignoreDeadCode
    JsPdfAutoTable1.Clear(home)
    'id; name; email; country; ipaddress
    JsPdfAutoTable1.AddRow2(Array(1, "./assets/img1.png", "Donna", "[email protected]", "China", "211.56.242.221"))
    JsPdfAutoTable1.AddRow2(Array(2, "./assets/img2.png", "Janice", "[email protected]", "Ukraine", "38.36.7.199"))
    JsPdfAutoTable1.AddRow2(Array(3, "./assets/img3.png", "Ruth", "[email protected]", "Trinidad and Tobago", "19.162.133.184"))
    JsPdfAutoTable1.AddRow2(Array(4, "./assets/img4.png", "Jason", "[email protected]", "Brazil", "10.68.11.42"))
    JsPdfAutoTable1.AddRow2(Array(5, "./assets/img5.png", "Jane", "[email protected]", "United States", "47.32.129.71"))
    JsPdfAutoTable1.AddRow2(Array(6, "./assets/img6.png", "Adam", "[email protected]", "Canada", "18.186.38.37"))
    JsPdfAutoTable1.Refresh(home)
End Sub

Remember, you can always source the data directly from a database. It just needs to be linked to a state data-source.

What we also need to do is to trap 2 events in the table for this to work. These being didDrawCell and didParseCell.

didParseCell - This hook is called just before the column width and other features are computed.

didDrawCell - Use for adding content to the cells after they are drawn. This could be images or links.

When we run the app, on the profile column, what will be shown is the data we entered per user. We need to clear this first and then add the images. To clear the profile content, on each didParseCell, we blank out the text and then to draw the image, we use didDraw cell.

B4X:
Private Sub JsPdfAutoTable2_didDrawCell (data As Map)
    'get the data schema
    Dim dcell As pdfData = JsPdfDoc1.pdf.getData(data)
    'in the body in each profile
    If dcell.row.section = "body" Then
        If dcell.column.dataKey = "profile" Then
            Dim imgPath As String = dcell.cell.raw
            Dim x As Int = dcell.cell.x + 5
            Dim y As Int = dcell.cell.y + 2
            '
            JsPdfDoc1.pdf.addImage(imgPath, "PNG", x, y, 20, 20)
        End If
    End If
End Sub

Private Sub JsPdfAutoTable2_didParseCell (data As Map)
    'get the data schema
    Dim dcell As pdfData = JsPdfDoc1.pdf.getData(data)
    
    'if we are in the body
    If dcell.row.section = "body" Then
        If dcell.column.dataKey = "profile" Then
            BANanoShared.PutRecursive(data, "cell.text", "")
        End If
    End If
End Sub
 

Mashiane

Expert
Licensed User
Longtime User
Step 14: Theming your Table

1624131638055.png


1624131659815.png



Whilst the table comes with pre-defined themes. You can use your own settings for styles for header, footers, body, colmns etc. You can read more about this on the documentation.

For a quick way with this library, we have the jsPDFStyle custom element

NB: This should be dropped INSIDE the jsPDFTable. You can have each style defined for each column on the table. In the example above we have a pink header and n another example we have the style of the 1st column re-defined. This is done with the jsPDFStyles elements.

Part14.gif


'**** IMPORTANT
Remember, a style can be applied to the table, footer, header, columns etc etc. So in the ApplyTo property, select to what the style applies to. If the style applies to a column in the table, on the column name, specify the exact field / dataKey that was entered in the Keys(;) when defining the jsPDFTable.

Colors are RBG based btw, and you have a color chooser that you can use.
 
Last edited:

Mashiane

Expert
Licensed User
Longtime User
Step 15: Adding a Table Header Image & Text

1624131596068.png


You noted an image and a page title above. This was done when a didDrawPage event was fired.

B4X:
Private Sub JsPdfAutoTable2_didDrawPage (data As Map)
    Log("JsPdfAutoTable2_didDrawPage")
    'get the left margin
    Dim ml As Int = JsPdfDoc1.pdf.GetDataSettingsMarginLeft(data)
    '
    JsPdfDoc1.pdf.SetFontSize(20)
    JsPdfDoc1.pdf.SetTextColor("40")
    JsPdfDoc1.pdf.addImage("./assets/yuna.jpg", "JPEG", ml, 15, 10, 10)
    JsPdfDoc1.pdf.SetText1("Mashy's Report", ml + 15, 22)

End Sub

didDrawPage - Use this to add content to each page that has the autoTable on it. This can be page headers, page footers and page numbers for example.

So each time a page is drawn, we find the page left margin, set the font size and text color and then add an image and text.

Ta!

Should you have any questions, etc, you can push them there. For now, we are done with this for basic reporting functionality.

Have fun!
 

james_sgp

Active Member
Licensed User
Longtime User
Is it possible to add a ' WithLink' element into a PDf from code? I don`t see the option available in the code?
 
Top