Common Master-Detail Image in HTML Document Leave feedback

Note
In this article, we will use GroupDocs.Assembly to generate a Common Master-Detail report in HTML Document format.

Note
The examples read the shop data described in The Business Layer.

Common Master-Detail Image in HTML Document

Reporting Requirement

As a report developer, you are required to represent the information of the customers and products with the following key requirements:

Report must show customers’ picture and name.
It must associate the customers with their products.
Report must be generated in the HTML Document.

Adding Syntax to be evaluated by GroupDocs.Assembly Engine

An HTML report cannot hold a picture file, so the template embeds each customer’s photo in an img element as Base64-encoded data. The template is an HTML file whose tags are written with the angle brackets escaped, << and >>, so that the HTML stays valid:

<html>
<body>
&lt;&lt;foreach [in customers]&gt;&gt;
<img height="100" width="100" src="data:image/png;base64,&lt;&lt;[PhotoBase64]&gt;&gt;"/>
<h2>&lt;&lt;[CustomerName]&gt;&gt;</h2>
<p><b>Products: &lt;&lt;foreach [in Order]&gt;&gt;&lt;&lt;[IndexOf() != 0 ? ", " : ""]&gt;&gt;&lt;&lt;[Product.ProductName]&gt;&gt;&lt;&lt;/foreach&gt;&gt;</b></p>
&lt;&lt;/foreach&gt;&gt;
</body>
</html>

The .NET template computes the Base64 text in the template, with a C# helper class registered as a known type (FileUtil.GetBytesAsBase64(Photo)). In Python, the code computes it while loading the data and gives each customer a PhotoBase64 member, so the template only outputs it.

Tip
For detailed technical information about syntax, expressions and report generation by the engine, please visit: Working with GroupDocs.Assembly Engine.

Download Common Master-Detail Template

Please download the sample Common master-detail document we created in this article:

common-master-detail-photos.html

Generating The Report

Each customer’s Photo is the file name of its picture. The code reads each picture and stores its Base64 text in the customer’s dict.

Python

import base64
import json

from groupdocs.assembly import DataSourceInfo, DocumentAssembler

with open("customers.json", encoding="utf-8") as f:
    customers = json.load(f)

# An HTML report embeds each photo as Base64 text
for customer in customers:
    with open(customer["Photo"], "rb") as photo:
        customer["PhotoBase64"] = base64.b64encode(photo.read()).decode("ascii")

assembler = DocumentAssembler()
assembler.assemble_document("common-master-detail-photos.html", "common-master-detail-photos-report.html", DataSourceInfo(customers, "customers"))

common-master-detail-photos.html

The following sample file is used in this example: common-master-detail-photos.html

customers.json

The following sample file is used in this example: customers.json

quayside-bistro.png

The following sample file is used in this example: quayside-bistro.png

lantern-street-cafe.png

The following sample file is used in this example: lantern-street-cafe.png

saltmarsh-deli.png

The following sample file is used in this example: saltmarsh-deli.png

pier-nine-kitchen.png

The following sample file is used in this example: pier-nine-kitchen.png

common-master-detail-photos-report.html

<html>
<body>

<img height="100" width="100" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPAAAADwCAYAAAA+VemSAAAABHNCSVQICAgIfAhkiAAAE+pJREFUeJzt3X1QVOe9B/AvcQWCLMgiL4LKimwElKIhopC4Go3lRquGjpqkNzHR29ibjnfCH53ea9JkMm1Tm0w719ybmdyajk0ybROTToz16g1NogZTfCuaiCiKIkoEBVyQXXCBVe8fZhN8QdjnPLtnn3O+n38ycTzP+cnwPc85z3nO80R0XfJeBREp6Q69CyAicQwwkcIYYCKFMcBECmOAiRTGABMpjAEmUhgDTKQwBphIYQwwkcIYYCKFMcBECmOAiRTGABMpjAEmUphFawNaPyaOuMWfNbS34e+njuNsZztc3R64urvg6u7ChW4PvL6+6/7ud+/K03T+vx2v1nQ8z2+s80dbhiMxJha
[TRUNCATED]

Download full output

Encoding the Photos in the Template

The template can also do the encoding, as the .NET one does. Pass each photo as bytes, which reaches the template as a byte array, and make the engine aware of the .NET System.Convert class, whose ToBase64String method encodes it. Only the expression in the img element differs from the template above:

<img height="100" width="100" src="data:image/png;base64,&lt;&lt;[Convert.ToBase64String(PhotoBytes)]&gt;&gt;"/>

Without the conversion, a byte array is written as its type name, System.Byte[].

Python

import json

from groupdocs.assembly import DataSourceInfo, DocumentAssembler

with open("customers.json", encoding="utf-8") as f:
    customers = json.load(f)

# Each photo goes to the template as bytes
for customer in customers:
    with open(customer["Photo"], "rb") as photo:
        customer["PhotoBytes"] = photo.read()

assembler = DocumentAssembler()
# The template calls Convert.ToBase64String
assembler.known_types.add("System.Convert")
assembler.assemble_document("common-master-detail-photo-bytes.html", "common-master-detail-photo-bytes-report.html", DataSourceInfo(customers, "customers"))

common-master-detail-photo-bytes.html

The following sample file is used in this example: common-master-detail-photo-bytes.html