4

I'm trying to wrap my text around an Image.

The structure I need to create is as in the picture bellow:

enter image description here

This is what I have tried

I have tried using table which did not succeed. I tough of using text field as html and passing image to it and set the alignment to left, but I found out that it is not possible to pass the image in text field. I started to solve the problem using jaspersoft Studio pro and with its html element. However I could not figure out how to pass the image field from data base as the html source. The expression in the html element is: 

"<img src= '$F{Image}' align='left'/> <p>"+$F{KN_Zusatzinfo_DV_Einleitungstext} +"</p>"

This code does not show the image, but a box instead of the image. And the text which is printed is not stretched. The page style which I use is two column. The HTML out put is as in the picture

example output

Using a static path like one bellow to an image works, but it is not an option for me since I need to read the Image from data base:

    "<style>.left { float: left;  margin-left: 1em; width :40%;}</style><p><img class = left src= C:/Users/iman/JaspersoftWorkspace/Qreport/sample1.png />

If I just use an Image Element with a text box under that the out put and design view are as these pictures:

Image and text field approach

Design view

The HTML source of the html approach is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
  <title></title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <style type="text/css">
    a {
      text-decoration: none
    }
  </style>
</head>

<body text="#000000" link="#000000" alink="#000000" vlink="#000000">
  <table width="100%" cellpadding="0" cellspacing="0" border="0">
    <tr>
      <td width="50%">&nbsp;</td>
      <td align="center">

        <a name="JR_PAGE_ANCHOR_0_1"></a>
        <table class="jrPage" cellpadding="0" cellspacing="0" border="0" style="empty-cells: show; width: 595px; border-collapse: collapse; background-color: white;">
          <tr valign="top" style="height:0">
            <td style="width:10px"></td>
            <td style="width:20px"></td>
            <td style="width:40px"></td>
            <td style="width:210px"></td>
            <td style="width:32px"></td>
            <td style="width:58px"></td>
            <td style="width:10px"></td>
            <td style="width:182px"></td>
            <td style="width:9px"></td>
            <td style="width:24px"></td>
          </tr>
          <tr valign="top" style="height:25px">
            <td colspan="10">
            </td>
          </tr>
          <tr valign="top" style="height:5px">
            <td colspan="6">
            </td>
            <td colspan="3" rowspan="2" style="text-indent: 0px; text-align: right;">
              <span style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; color: #6B66FA; font-size: 10px; line-height: 1.2578125;">HCH-A - Aortenklappenchirurgie, isoliert (Konventionell chirurgisch)</span>
            </td>
            <td>
            </td>
          </tr>
          <tr valign="top" style="height:20px">
            <td>
            </td>
            <td colspan="2" style="text-indent: 0px; text-align: left;">
              <span style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; color: #BABABA; font-size: 10px; line-height: 1.2578125;">Ergebnisse</span>
            </td>
            <td colspan="3">
            </td>
            <td>
            </td>
          </tr>
          <tr valign="top" style="height:20px">
            <td colspan="7">
            </td>
            <td colspan="2" style="text-indent: 0px; text-align: right;">
              <span style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; color: #000000; font-size: 10px; line-height: 1.2578125;">Dr XYZ</span>
            </td>
            <td>
            </td>
          </tr>
          <tr valign="top" style="height:88px">
            <td colspan="10">
            </td>
          </tr>
          <tr valign="top" style="height:74px">
            <td colspan="5">
            </td>
            <td colspan="3" rowspan="2">
              <div style='width:250px;height:90px;background-color: #FFFFFF; overflow:hidden;'>
                <img src='((java.awt.Image)field_Image.getValue())' align='left' />
                <p>Bei der Aortenklappe handelt es sich um das „Ventil“ zwischen der linken HerzkeAortenklappenchirurgie, isoliert - konventionell - Aortenklappenchirurgie, isoliert - kathetergestützt Die Qualitätsindikatoren der k........
                 appenchirauch die Indikationsstellung betrachtet. Sofern nicht anders angegeben, ist die Beschreibung der Qualitätsindikatoren eine Fortschreibung der QIDB 2014 des AQUA-Institutes.</p>
              </div>
            </td>
            <td colspan="2">
            </td>
          </tr>
          <tr valign="top" style="height:16px">
            <td colspan="2">
            </td>
            <td colspan="2" rowspan="2">
              <div style='width:250px;height:90px;background-color: #FFFFFF; overflow:hidden;'>
                <img src='((java.awt.Image)field_Image.getValue())' align='left' />
                <p>Bei der Aortenklappe handelt es sich um das „Ventil“ zwischen der linken Herzkammer und der Hauptschlagader (Aorta). Schließt die Klappe nicht mehr dicht, spriitätsindikatoren der konventionellen Aortenklappenchirurgie fokussieren schwere Komplikationen und Sterblichkeit.
                  Bei der kathetergestützten Aortenklappenchirurgie wird darüber hinaus auch die Indikationsstellung betrachtet. Sofern nicht anders angegeben, ist die Beschreibung der Qualitätsindikatoren eine Fortschreibung der QIDB 2014 des AQUA-Institutes.</p>
              </div>
            </td>
            <td>
            </td>
            <td colspan="2">
            </td>
          </tr>
          <tr valign="top" style="height:74px">
            <td colspan="2">
            </td>
            <td colspan="6">
            </td>
          </tr>
          <tr valign="top" style="height:520px">
            <td colspan="10">
            </td>
          </tr>
        </table>
        <br/>
        <br/>

        <a name="JR_PAGE_ANCHOR_0_2"></a>
        <table class="jrPage" cellpadding="0" cellspacing="0" border="0" style="empty-cells: show; width: 595px; border-collapse: collapse; background-color: white;">
          <tr valign="top" style="height:0">
            <td style="width:10px"></td>
            ...
            <td style="width:24px"></td>
          </tr>
          <tr valign="top" style="height:27px">
            <td colspan="7">
            </td>
          </tr>
          <tr valign="top" style="height:20px">
            <td>
            </td>
            <td colspan="2" style="text-indent: 0px; text-align: left;">
              <span style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; color: #BABABA; font-size: 10px; line-height: 1.2578125;">Ergebnisse</span>
            </td>
            <td colspan="4">
            </td>
          </tr>
          <tr valign="top" style="height:7px">
            <td colspan="7">
            </td>
          </tr>
          <tr valign="top" style="height:21px">
            <td colspan="5">
            </td>
            <td style="text-indent: 0px; text-align: right;">
              <span style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; color: #6B66FA; font-size: 10px; line-height: 1.2578125;">HCH-A - Aortenklappenchirurgie, isoliert </span>
            </td>
            <td>
            </td>
          </tr>
          <tr valign="top" style="height:125px">
            <td colspan="7">
            </td>
          </tr>
          <tr valign="top" style="height:90px">
            <td colspan="2">
            </td>
            <td colspan="2">
              <div style='width:250px;height:90px;background-color: #FFFFFF; overflow:hidden;'>
                <img src='((java.awt.Image)field_Image.getValue())' align='left' />
                <p>....deleted some text because it exceeded the limit..</p>
              </div>
            </td>
            <td colspan="3">
            </td>
          </tr>
          <tr valign="top" style="height:552px">
            <td colspan="7">
            </td>
          </tr>
        </table>
        <br/>
        <br/>

        <a name="JR_PAGE_ANCHOR_0_3"></a>
        <table class="jrPage" cellpadding="0" cellspacing="0" border="0" style="empty-cells: show; width: 595px; border-collapse: collapse; background-color: white;">
          <tr valign="top" style="height:0">
            <td style="width:595px"></td>
          </tr>
          <tr valign="top" style="height:842px">
            <td>
            </td>
          </tr>
        </table>

        <![if IE]>
        <script>
          var links = document.querySelectorAll('link.jrWebFont');
          setTimeout(function() {
            if (links) {
              for (var i = 0; i < links.length; i++) {
                links.item(i).href = links.item(i).href;
              }
            }
          }, 0);
        </script>
        <![endif]>
      </td>
      <td width="50%">&nbsp;</td>
    </tr>
  </table>
</body>
</html>

And the HTML source of the Image element plus text field is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
  <title></title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <style type="text/css">
    a {
      text-decoration: none
    }
  </style>
</head>

<body text="#000000" link="#000000" alink="#000000" vlink="#000000">
  <table width="100%" cellpadding="0" cellspacing="0" border="0">
    <tr>
      <td width="50%">&nbsp;</td>
      <td align="center">

        <a name="JR_PAGE_ANCHOR_0_1"></a>
        <table class="jrPage" cellpadding="0" cellspacing="0" border="0" style="empty-cells: show; width: 595px; border-collapse: collapse; background-color: white;">
          <tr valign="top" style="height:0">
            <td style="width:10px"></td>
            <td style="width:60px"></td>
            <td style="width:232px"></td>
            <td style="width:33px"></td>
            <td style="width:35px"></td>
            <td style="width:10px"></td>
            <td style="width:5px"></td>
            <td style="width:186px"></td>
            <td style="width:1px"></td>
            <td style="width:23px"></td>
          </tr>
          <tr valign="top" style="height:25px">
            <td colspan="10">
            </td>
          </tr>
          <tr valign="top" style="height:5px">
            <td colspan="5">
            </td>
            <td colspan="3" rowspan="2" style="text-indent: 0px; text-align: right;">
              <span style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; color: #6B66FA; font-size: 10px; line-height: 1.2578125;">HCH-A - Aortenklappenchirurgie, isoliert (Konventionell chirurgisch)</span>
            </td>
            <td colspan="2">
            </td>
          </tr>
          <tr valign="top" style="height:20px">
            <td>
            </td>
            <td style="text-indent: 0px; text-align: left;">
              <span style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; color: #BABABA; font-size: 10px; line-height: 1.2578125;">Ergebnisse</span>
            </td>
            <td colspan="3">
            </td>
            <td colspan="2">
            </td>
          </tr>
          <tr valign="top" style="height:20px">
            <td colspan="6">
            </td>
            <td colspan="2" style="text-indent: 0px; text-align: right;">
              <span style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; color: #000000; font-size: 10px; line-height: 1.2578125;">Dr XYZ</span>
            </td>
            <td colspan="2">
            </td>
          </tr>
          <tr valign="top" style="height:94px">
            <td colspan="10">
            </td>
          </tr>
          <tr valign="top" style="height:50px">
            <td colspan="4">
            </td>
            <td colspan="3">
              <img src="report7921484792758494686.html_files/img_0_0_3" style="width: 50px" alt="" />
            </td>
            <td colspan="3">
            </td>
          </tr>
          <tr valign="top" style="height:24px">
            <td colspan="10">
            </td>
          </tr>
          <tr valign="top" style="height:477px">
            <td colspan="3">
            </td>
            <td colspan="6" style="text-indent: 0px; text-align: left;">
              <span style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; color: #000000; font-size: 10px; line-height: 1.2578125;">Bei der Aortenklappe handelt es sinken Herzkammer und der Hauptschlagader (Aorta). Einsatz einer künstlichen Herzklappe behandelt.<br/><br/>Bei beiden kathetergestützten Methoden wird über ein spezielles Ballonkathetersystem zunächst der Bereich der </span>
            </td>
            <td>
            </td>
          </tr>
          <tr valign="top" style="height:127px">
            <td colspan="10">
            </td>
          </tr>
        </table>
        <br/>
        <br/>

        <a name="JR_PAGE_ANCHOR_0_2"></a>
        <table class="jrPage" cellpadding="0" cellspacing="0" border="0" style="empty-cells: show; width: 595px; border-collapse: collapse; background-color: white;">
          <tr valign="top" style="height:0">
            <td style="width:10px"></td>
            ...
            <td style="width:24px"></td>
          </tr>
          <tr valign="top" style="height:27px">
            <td colspan="7">
            </td>
          </tr>
          <tr valign="top" style="height:20px">
            <td>
            </td>
            <td colspan="2" style="text-indent: 0px; text-align: left;">
              <span style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; color: #BABABA; font-size: 10px; line-height: 1.2578125;">Ergebnisse</span>
            </td>
            <td colspan="4">
            </td>
          </tr>
          <tr valign="top" style="height:7px">
            <td colspan="7">
            </td>
          </tr>
          <tr valign="top" style="height:21px">
            <td colspan="5">
            </td>
            <td style="text-indent: 0px; text-align: right;">
              <span style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; color: #6B66FA; font-size: 10px; line-height: 1.2578125;">HCH-A - Aortenklappenchirurgie, isoliert </span>
            </td>
            <td>
            </td>
          </tr>
          <tr valign="top" style="height:139px">
            <td colspan="7">
            </td>
          </tr>
          <tr valign="top" style="height:264px">
            <td colspan="2">
            </td>
            <td colspan="2" style="text-indent: 0px; text-align: left;">
              <span style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; color: #000000; font-size: 10px; line-height: 1.2578125;">alten, verengten Aortenklappe erweitert. -  des AQUA-Institutes.</span>
            </td>
            <td colspan="3">
            </td>
          </tr>
          <tr valign="top" style="height:364px">
            <td colspan="7">
            </td>
          </tr>
        </table>
        <br/>
        <br/>

        <a name="JR_PAGE_ANCHOR_0_3"></a>
        <table class="jrPage" cellpadding="0" cellspacing="0" border="0" style="empty-cells: show; width: 595px; border-collapse: collapse; background-color: white;">
          <tr valign="top" style="height:0">
            <td style="width:10px"></td>
            <td style="width:10px"></td>
           ...
            <td style="width:1px"></td>
            <td style="width:23px"></td>
          </tr>
          <tr valign="top" style="height:27px">
            <td colspan="11">
            </td>
          </tr>
          <tr valign="top" style="height:20px">
            <td>
            </td>
            <td colspan="3" style="text-indent: 0px; text-align: left;">
              <span style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; color: #BABABA; font-size: 10px; line-height: 1.2578125;">Ergebnisse</span>
            </td>
            <td colspan="7">
            </td>
          </tr>
          <tr valign="top" style="height:7px">
            <td colspan="11">
            </td>
          </tr>
          <tr valign="top" style="height:21px">
            <td colspan="8">
            </td>
            <td style="text-indent: 0px; text-align: right;">
              <span style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; color: #6B66FA; font-size: 10px; line-height: 1.2578125;">HCH-A - Aortenklappenchirurgie, isoliert </span>
            </td>
            <td colspan="2">
            </td>
          </tr>
          <tr valign="top" style="height:65px">
            <td colspan="11">
            </td>
          </tr>
          <tr valign="top" style="height:66px">
            <td colspan="7">
            </td>
            <td colspan="3" rowspan="4" style="text-indent: 0px; text-align: left;">
              <span style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; color: #000000; font-size: 10px; line-height: 1.2578125;"><br/>Bei beiden kathetergestützten Me die Indikationsstellung betrachtet.<br/><br/>Sofern nicht anders angegeben, ist die Beschreibung der Qualitätsindikatoren eine Fortschreibung der QIDB 2014 des AQUA-Institutes.</span>
            </td>
            <td>
            </td>
          </tr>
          <tr valign="top" style="height:50px">
            <td colspan="3">
            </td>
            <td colspan="2">
              <img src="report7921484792758494686.html_files/img_0_2_2" style="width: 50px" alt="" />
            </td>
            <td colspan="2">
            </td>
            <td>
            </td>
          </tr>
          <tr valign="top" style="height:24px">
            <td colspan="7">
            </td>
            <td>
            </td>
          </tr>
          <tr valign="top" style="height:161px">
            <td colspan="2">
            </td>
            <td colspan="4" rowspan="2" style="text-indent: 0px; text-align: left;">
              <span style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; color: #000000; font-size: 10px; line-height: 1.2578125;">Bei der Aortenklapprzspitze über einen 3 bis 5 cm langen Hautschnitt im Rippenbereich (linker Brustkorb, im 4. oder 5. Rippenzwischenraum) freigelegt. <br/>- Beim endovaskulären Aortenklappenersatz ist lediglich ein gezielter Einstich (Punktion), zumeist in die Leistenarterie, notwendig. <br/></span>
            </td>
            <td>
            </td>
            <td>
            </td>
          </tr>
          <tr valign="top" style="height:279px">
            <td colspan="2">
            </td>
            <td colspan="5">
            </td>
          </tr>
          <tr valign="top" style="height:122px">
            <td colspan="11">
            </td>
          </tr>
        </table>
        <br/>
        <br/>

        <a name="JR_PAGE_ANCHOR_0_4"></a>
        <table class="jrPage" cellpadding="0" cellspacing="0" border="0" style="empty-cells: show; width: 595px; border-collapse: collapse; background-color: white;">
          <tr valign="top" style="height:0">
            <td style="width:10px"></td>
            <td style="width:60px"></td>
           ...
            <td style="width:1px"></td>
            <td style="width:23px"></td>
          </tr>
          <tr valign="top" style="height:27px">
            <td colspan="9">
            </td>
          </tr>
          <tr valign="top" style="height:20px">
            <td>
            </td>
            <td style="text-indent: 0px; text-align: left;">
              <span style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; color: #BABABA; font-size: 10px; line-height: 1.2578125;">Ergebnisse</span>
            </td>
            <td colspan="7">
            </td>
          </tr>
          <tr valign="top" style="height:7px">
            <td colspan="9">
            </td>
          </tr>
          <tr valign="top" style="height:21px">
            <td colspan="5">
            </td>
            <td colspan="2" style="text-indent: 0px; text-align: right;">
              <span style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; color: #6B66FA; font-size: 10px; line-height: 1.2578125;">HCH-A - Aortenklappenchirurgie, isoliert </span>
            </td>
            <td colspan="2">
            </td>
          </tr>
          <tr valign="top" style="height:91px">
            <td colspan="9">
            </td>
          </tr>
          <tr valign="top" style="height:50px">
            <td colspan="4">
            </td>
            <td colspan="2">
              <img src="report7921484792758494686.html_files/img_0_3_2" style="width: 50px" alt="" />
            </td>
            <td colspan="3">
            </td>
          </tr>
          <tr valign="top" style="height:24px">
            <td colspan="9">
            </td>
          </tr>
          <tr valign="top" style="height:477px">
            <td colspan="3">
            </td>
            <td colspan="5" style="text-indent: 0px; text-align: left;">
              <span style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif;r Brustkorb, im 4. oder 5. Rippenzwischenraum) freigelegt. <br/>- Beim endovaskulären Aortenklappenersatz ist lediglich ein gezielter Einstich (Punktion), zumeist in die Leistenarterie, notwendig. <br/><br/>Bei beiden kathetergestützten Methoden wird über ein spezielles Ballonkathetersystem zunächst der Bereich der </span>
            </td>
            <td>
            </td>
          </tr>
          <tr valign="top" style="height:125px">
            <td colspan="9">
            </td>
          </tr>
        </table>
        <br/>
        <br/>

        <a name="JR_PAGE_ANCHOR_0_5"></a>
        <table class="jrPage" cellpadding="0" cellspacing="0" border="0" style="empty-cells: show; width: 595px; border-collapse: collapse; background-color: white;">
          <tr valign="top" style="height:0">
            <td style="width:10px"></td>
            <td style="width:10px"></td>
            <td style="width:50px"></td>
            <td style="width:220px"></td>
            <td style="width:80px"></td>
            <td style="width:201px"></td>
            <td style="width:24px"></td>
          </tr>
          <tr valign="top" style="height:27px">
            <td colspan="7">
            </td>
          </tr>
          <tr valign="top" style="height:20px">
            <td>
            </td>
            <td colspan="2" style="text-indent: 0px; text-align: left;">
              <span style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; color: #BABABA; font-size: 10px; line-height: 1.2578125;">Ergebnisse</span>
            </td>
            <td colspan="4">
            </td>
          </tr>
          <tr valign="top" style="height:7px">
            <td colspan="7">
            </td>
          </tr>
          <tr valign="top" style="height:21px">
            <td colspan="5">
            </td>
            <td style="text-indent: 0px; text-align: right;">
              <span style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; color: #6B66FA; font-size: 10px; line-height: 1.2578125;">HCH-A - Aortenklappenchirurgie, isoliert </span>
            </td>
            <td>
            </td>
          </tr>
          <tr valign="top" style="height:139px">
            <td colspan="7">
            </td>
          </tr>
          <tr valign="top" style="height:264px">
            <td colspan="2">
            </td>
            <td colspan="2" style="text-indent: 0px; text-align: left;">
              <span style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; color: #000000; font-size: 10px; line-height: 1.2578125;">alten, verengten Aortenklappe erweitert. Anschließend wird eine zusammengefaltete Herzklappenchirurgie fokussieren schwere Komplikationen und Sterblichkeit. Bei der kathetergestützten Aortenklappenchirurgie wird darüber hinaus auch die Indikationsstellung betrachtet.<br/><br/>Sofern nicht anders angegeben, ist die Beschreibung der Qualitätsindikatoren des AQUA-Institutes.</span>
            </td>
            <td colspan="3">
            </td>
          </tr>
          <tr valign="top" style="height:364px">
            <td colspan="7">
            </td>
          </tr>
        </table>
        <br/>
        <br/>

        <a name="JR_PAGE_ANCHOR_0_6"></a>
        <table class="jrPage" cellpadding="0" cellspacing="0" border="0" style="empty-cells: show; width: 595px; border-collapse: collapse; background-color: white;">
          <tr valign="top" style="height:0">
            <td style="width:595px"></td>
          </tr>
          <tr valign="top" style="height:842px">
            <td>
            </td>
          </tr>
        </table>

        <![if IE]>
        <script>
          var links = document.querySelectorAll('link.jrWebFont');
          setTimeout(function() {
            if (links) {
              for (var i = 0; i < links.length; i++) {
                links.item(i).href = links.item(i).href;
              }
            }
          }, 0);
        </script>
        <![endif]>
      </td>
      <td width="50%">&nbsp;</td>
    </tr>
  </table>
</body>

</html>

How can I achieve this structure?

Alex K
  • 22,315
  • 19
  • 108
  • 236
Iman
  • 769
  • 1
  • 13
  • 51
  • The Image is in the data base. The image will be shown if I just use an image element and assign the image field to it as an expression – Iman Jul 07 '16 at 08:27
  • I think the html element can not figure out how to resolve img src= '$F{Image}'. But I need to read the image from data base. – Iman Jul 07 '16 at 08:50
  • Please add the exported HTML source code of both images. We need to look at the source. I'd almost suggest to use LaTeX for this case, but I suppose then the generation of reports is more complicated... – tobi6 Jul 07 '16 at 09:16
  • I added the sources. Just had to delete some text because it exceeded the limit. Is there a way to use css for this aim in html element? – Iman Jul 07 '16 at 09:48
  • As I suspected, Jasper seems unable to replace the url correctly. Right now I can't think of a way to put the correct url instead of the Java call into the image tag. – tobi6 Jul 07 '16 at 09:57
  • "

    This reads the image and put it at the right place. But as I said I need to read it from data base.

     – Iman Jul 07 '16 at 10:38
  • I have post a solution to use standard jasper-reports features, the main problem of the html component is not only the fact of pulling the image from database but also html component renders as image in your export, with clip or resize problems – Petter Friberg Jul 07 '16 at 23:06

1 Answers1

3

If you use the html component to wrap text around image, not only do you have a problem of pulling the image from the database, the html component also creates an image of the html, hence the content may be resized/clipped depending on text length and settings on html (image) component.

I would suggest to use two textFields wrapped around the image (see jrxml) and then calculate where the text will break into next field, so you get first part of text in first textField and second part in second textField

Java code to calculate text's break point

This code demonstrate how you can use FontMetric to calculate where Jasper Report will break the text depending on the size of your textField (explanation of code is in comments). The code is not perfectly safe on NullPointer (null text) and on non over-flowing text, furthermore it can be optimized but I will leave this to OP

import java.awt.Font;
import java.awt.font.FontRenderContext;
import java.awt.geom.AffineTransform;

public class WrapImage {

    /**
     * Get position where string will break
     * @param text, the text
     * @param width, the width of the component
     * @param height, the height of the component
     * @return the position
     */
    public static int getBreakPosition(String text, int width, int height){
        //Start font context
        AffineTransform affinetransform = new AffineTransform();     
        FontRenderContext frc = new FontRenderContext(affinetransform,true,true);     

        //Set same font as used in jasper-report
        Font font = new Font("SansSerif", Font.PLAIN, 10);
        //Get height to understand how many lines
        double textheight = font.getStringBounds(text, frc).getHeight();
        int nrLines = (int)Math.floor(height/textheight);

        //init variables
        int breakPos = 0;
        int line = 1;

        //loop the lines
        while (line<=nrLines){
            //get remaining text
            String textPart = text.substring(breakPos,text.length());
            //get how much text will fit in line
            breakPos += getLineBreakPosition(textPart, width, font, frc)+1;
            line++;
        }

        return breakPos;

    }

    /**
     * Get where a single line will break
     * @param text, the text
     * @param width, width of component
     * @param font, the font used
     * @param frc, the FontRenderContext
     * @return
     */
    protected static int getLineBreakPosition(String text, int width, Font font, FontRenderContext frc){
        int breakPos  = 0;
        String tmpText = text;
        while (font.getStringBounds(tmpText, frc).getWidth()>width){
            //the break position is space
            breakPos = tmpText.lastIndexOf(' ');
            if (breakPos<=0){
                breakPos = 0;
                break;
            }
            tmpText = tmpText.substring(0,breakPos);
        }
        return breakPos;
    }
}

jrxml example using java code

In this short example, I use a parameter with some arbitrary sample text. The WrapImage class is in class path. I set a variable to the calculated break point. Then use substring on the text to get first part in first textfield, second in second textField To simplify example, I'm using an image from desktop, for how to pull image from database see: Using images stored in database

<?xml version="1.0" encoding="UTF-8"?>
<jasperReport xmlns="http://jasperreports.sourceforge.net/jasperreports" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://jasperreports.sourceforge.net/jasperreports http://jasperreports.sourceforge.net/xsd/jasperreport.xsd" name="wrappingText" pageWidth="595" pageHeight="842" whenNoDataType="AllSectionsNoDetail" columnWidth="555" leftMargin="20" rightMargin="20" topMargin="20" bottomMargin="20" isSummaryWithPageHeaderAndFooter="true" uuid="cd3e4316-a3c4-4847-a085-3bfa1d9425af">
    <parameter name="longText" class="java.lang.String">
        <defaultValueExpression><![CDATA["Whether you've come to ask questions, or to generously share what you know, remember that we’re all here to learn, together. Be welcoming and patient, especially with those who may not know everything you do. Oh, and bring your sense of humor. Just in case. That basically covers it. But these three guidelines may help: Rudeness and belittling language are not okay. Your tone should match the way you'd talk in person with someone you respect and whom you want to respect you. If you don't have time to say something politely, just leave it for someone who does. Be welcoming, be patient, and assume good intentions. Don't expect new users to know all the rules — they don't. And be patient while they learn. If you're here for help, make it as easy as possible for others to help you. Everyone here is volunteering, and no one responds well to demands for help. Don't be a jerk. These are just a few examples. If you see them, flag them. In summary, have fun, and be good to each other."]]></defaultValueExpression>
    </parameter>
    <variable name="breakPos" class="java.lang.Integer">
        <initialValueExpression><![CDATA[WrapImage.getBreakPosition($P{longText}, 250, 100)]]></initialValueExpression>
    </variable>
    <title>
        <band height="220" splitType="Stretch">
            <image>
                <reportElement x="10" y="20" width="80" height="80" uuid="6b4bb467-f7fd-4a15-994b-7c1a01b86428"/>
                <imageExpression><![CDATA["C:\\Users\\pette\\Desktop\\queen_bee.jpg"]]></imageExpression>
            </image>
            <textField>
                <reportElement x="100" y="0" width="250" height="100" uuid="f4507624-0410-4feb-9dc5-7d3342b882f0"/>
                <textElement textAlignment="Justified" verticalAlignment="Bottom"/>
                <textFieldExpression><![CDATA[$P{longText}.substring(0,$V{breakPos}.intValue())]]></textFieldExpression>
            </textField>
            <textField>
                <reportElement x="0" y="100" width="350" height="120" uuid="8790bbdd-2066-4ceb-9fc9-dad6154df88c"/>
                <textElement textAlignment="Justified"/>
                <textFieldExpression><![CDATA[$P{longText}.substring($V{breakPos}.intValue()+1)]]></textFieldExpression>
            </textField>
        </band>
    </title>
</jasperReport>

Output example

Example output, wrapping text

Community
  • 1
  • 1
Petter Friberg
  • 21,252
  • 9
  • 60
  • 109
  • I just found a small bug. The first letter in the second Text field is cut off and not shown. – Iman Jul 08 '16 at 09:04
  • 1
    meeh, I did not for me, I need to check if substring works differently on different java versions (seems strange), I guess your quick fix is to move back on char in substring (remove the +1 in the expression). Note: Probably you can improve the breaking of text (It would be nicer to break at not okay. in my example. To do this you will need to go back and check if you have a point, comma ecc, in a couple of words before break space. – Petter Friberg Jul 08 '16 at 09:21
  • @Iman The java code is also not optimized (probably String.split(' ')) would be faster, I just wanted to show you how you can use FontMetrics to calculate what jasper-reports will do and then use this in your layout to achieve your objective. – Petter Friberg Jul 08 '16 at 09:25
  • remove the +1 in the expression worked perfectly. Thanks – Iman Jul 08 '16 at 09:39