Page 1 of 1

xhtml to docx background color not working

PostPosted: Wed Aug 21, 2013 5:40 pm
by sunny8875
Hi,
For the first time I am working on using docx4j (version 2.8.1) to generate docx,PDF documents from XHTML, However I am facing some problems with css like the td of tr background color css is not getting applied. Please check below the html code which is rendered fine in browser

Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <style>
   .doc {
      font-family: tahoma,verdana,arial,sans-serif;
      font-size: 70%;
   }
   
   .myTable {
      margin-bottom: 10px;
      width: 100%;
      border: 1px solid;
   }
   
   .myTable THEAD {
      background: none repeat scroll 0 0 #EEEEEE;
   }
   
   .myTable TH {
      padding: 7px 3px 2px;
   }
   .hrow TH {
      background: none repeat scroll 0 0 #FFFFFF;
      border-bottom: 1px solid #B3B3B3;
      border-color: #B3B3B3;
      border-width: 1px;
      color: #003399;
      font-size: 150%;
      font-weight: normal;
      padding-top: 10px;
      text-align: left;
   }
   
   .myTable TD {
      padding: 3px 5px 5px;
   }
   
   TABLE THEAD:first-child TH:first-child {
      text-align: left;
   }
   TABLE THEAD:first-child .hrow TH {
      padding-top: 0;
   }   
   
   .evenRow TD {
      background-color: #EFEFFF;
   }
   .rowEven TD {
      background-color: #FEFEFF;
   }
</style>
</head>
<body>
   <div class="doc">
                         
                  
                     <table class="myTable">
                              <thead>
                                 <tr class="hrow">
                                    <th colspan="4">
                                    First header row</th>
                                 </tr>
                              </thead>
                              <thead>
                                 <tr>
                                    <th width="260px">first header</th>
                                    <th xwidth="60px">second header</th>
                                    <th xwidth="70px">third header</th>
                                    <th width="260px">fourth header</th>
                                 </tr>
                              </thead>
                           <tbody>
                              <tr class="evenRow">
                                 <td width="260px">Row 1 col 1</td>
                                 <td>Row 1 col 2</td>
                                 <td>Row 1 col 3</td>
                                 <td>Row 1 col 4</td>
                              </tr>
                           </tbody>
                           <tbody>
                              <tr class="oddRow">
                                 <td width="260px">Row 2 col 1</td>
                                 <td>Row 2 col 2</td>
                                 <td>Row 2 col 3</td>
                                 <td>Row 2 col 4</td>
                              </tr>
                           </tbody>
                           
                           
                     </table>
                  
                      </div>
</body>
</html>


I was stuck up here, Can any one please provide your suggestions for moving further on these css issues

Thanks

Re: xhtml to docx background color not working

PostPosted: Wed Aug 21, 2013 8:15 pm
by jason

Re: xhtml to docx background color not working

PostPosted: Wed Aug 21, 2013 8:53 pm
by sunny8875
Hi Jason,
Thank you very much for the quick response, After your comment I have included the dependency in my pom.xml as show below (My project currently have itext 2.1.7 included so I added it under exclusions)

Code: Select all
<dependency>
         <groupId>org.docx4j</groupId>
         <artifactId>xhtmlrenderer</artifactId>
         <version>1.0.0</version>
         <exclusions>
                <exclusion>
                    <artifactId>com.lowagie</artifactId>
                    <groupId>itext</groupId>
                </exclusion>
            </exclusions>
      </dependency>


Still I am not able to see any css applied in the docx output, Please help me out.

Thanks,
Sri

Re: xhtml to docx background color not working

PostPosted: Thu Aug 22, 2013 9:04 am
by jason

Re: xhtml to docx background color not working

PostPosted: Thu Aug 22, 2013 3:36 pm
by sunny8875
Hi Jason,
I have removed current xhtml renderer dependency and added both the mentioned jars to my application classpath but still no luck with css, Can you please let me know am I missing something or is any other configuration is required.

Thanks

Re: xhtml to docx background color not working

PostPosted: Thu Aug 22, 2013 8:09 pm
by jason
Presumably you are using a recent docx4j nightly?

The CSS is case sensitive, so that is probably your problem.

In other words, instead of TABLE, THEAD, TH, TD, use table, thead, th, td.

Re: xhtml to docx background color not working

PostPosted: Thu Aug 22, 2013 8:52 pm
by sunny8875
Hi Jason,
Thank you very much for your response, I am just using the docx4j 2.8.1 jar downloaded from the maven repository by using below dependency in my POM

Code: Select all
<dependency>
            <groupId>org.docx4j</groupId>
            <artifactId>docx4j</artifactId>
            <version>2.8.1</version>
</dependency>


In the same way I am using xhtmrenderer 1.0.0 downloaded from the maven repository, As you mentioned I have made css case-sensitive changes and tried with both xhtmlrenderer 1.0.0 jar and also with the other jars you have provided me in the previous post and also I have tried using inline style attribute but css is not reflected. Can you please help me out on this to proceed further.

Thanks

Re: xhtml to docx background color not working

PostPosted: Thu Aug 22, 2013 11:32 pm
by jason
If you use the latest jars, as instructed, it should work. It won't work with docx4j 2.8.1

Re: xhtml to docx background color not working

PostPosted: Fri Aug 23, 2013 12:15 am
by sunny8875
Hi Jason,
Do I need to use docx4j prior to 2.8.1, Sorry I am little confused can you please list out the jars I require.

Thanks

Re: xhtml to docx background color not working

PostPosted: Fri Aug 23, 2013 8:54 am
by jason

Re: xhtml to docx background color not working

PostPosted: Fri Aug 23, 2013 3:29 pm
by sunny8875
Hi Jason,
I have used the below three jar files:
    docx4j-nightly-20130813.jar
    docx4j-ImportXHTML-nightly-20130801.jar
    xhtmlrenderer-1.0.2-SNAPSHOT.jar
Now there is no css including the table structure is not displayed in the document, Everything is displayed as plain text and even all the text present in between <style> tag of header part is also present in the generated document. Am I doing or using docx4j in wrong manner, Please do help me out on this.

Thanks

Re: xhtml to docx background color not working

PostPosted: Fri Aug 23, 2013 8:54 pm
by jason
You'll need to post your input XHTML, and your Java code.

Re: xhtml to docx background color not working

PostPosted: Fri Aug 23, 2013 9:29 pm
by sunny8875
The xhtml code is:

Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <style>
   .doc {
      font-family: tahoma,verdana,arial,sans-serif;
      font-size: 70%;
   }
   
   .myTable {
      margin-bottom: 10px;
      width: 100%;
      border: 1px solid;
   }
   
   .myTable thead {
      background: none repeat scroll 0 0 #EEEEEE;
   }
   
   .myTable th {
      padding: 7px 3px 2px;
   }
   .hrow th {
      background: none repeat scroll 0 0 #FFFFFF;
      border-bottom: 1px solid #B3B3B3;
      border-color: #B3B3B3;
      border-width: 1px;
      color: #003399;
      font-size: 150%;
      font-weight: normal;
      padding-top: 10px;
      text-align: left;
   }
   
   .myTable td {
      padding: 3px 5px 5px;
   }
   
   table thead:first-child th:first-child {
      text-align: left;
   }
   
   table thead:first-child .hrow th {
      padding-top: 0;
   }   
   
   
</style>
</head>
<body>
   <div class="doc">
                         
                 
                     <table class="myTable">
                              <thead>
                                 <tr class="hrow">
                                    <th colspan="4">
                                    First header row</th>
                                 </tr>
                              </thead>
                              <thead>
                                 <tr>
                                    <th width="260px">first header</th>
                                    <th xwidth="60px">second header</th>
                                    <th xwidth="70px">third header</th>
                                    <th width="260px">fourth header</th>
                                 </tr>
                              </thead>
                           <tbody>
                              <tr class="evenRow">
                                 <td style="background-color: #EFEFFF;" width="260px">Row 1 col 1</td>
                                 <td>Row 1 col 2</td>
                                 <td>Row 1 col 3</td>
                                 <td>Row 1 col 4</td>
                              </tr>
                           </tbody>
                           <tbody>
                              <tr class="oddRow">
                                 <td width="260px">Row 2 col 1</td>
                                 <td>Row 2 col 2</td>
                                 <td>Row 2 col 3</td>
                                 <td>Row 2 col 4</td>
                              </tr>
                           </tbody>
                           
                           
                     </table>
                 
                      </div>
</body>
</html>


Java code is:

Code: Select all
try {
         ByteArrayOutputStream byteArrayOutputStream = new ByteArrayOutputStream();
         String html = "";
         // Code will be present here to get the above mentioned xhtml string
         WordprocessingMLPackage wordMLPackage = WordprocessingMLPackage.createPackage();
         MainDocumentPart mainPart = wordMLPackage.getMainDocumentPart();
         mainPart.getContent().addAll(XHTMLImporter.convert(html, null, wordMLPackage));
         new SaveToZipFile(wordMLPackage).save(byteArrayOutputStream);
      } catch (InvalidFormatException e) {
         e.printStackTrace();
      } catch (Docx4JException e) {
         e.printStackTrace();
      }



Please let me know if there is something wrong with this code

Thanks

Re: xhtml to docx background color not working

PostPosted: Fri Aug 23, 2013 11:29 pm
by jason
I used the ConvertInXHTMLFile sample, which is more or less the same as what you have, to produce the attached output docx.

If you can't work out what you are doing wrong, perhaps post your output docx. It might provide some clues.

Re: xhtml to docx background color not working

PostPosted: Sat Aug 24, 2013 3:23 pm
by sunny8875
Hi Jason,
please find the attached output document generated for me. Please let me know if it I am doing anything wrong based on this output.

Thanks