Search code examples
htmlcssdocx4jdirectionvertical-text

Table cell with vertical text direction in HTML to .DOCX with docx4j


I'm trying to convert an html table with text in vertical direction to docx with docx4j. This is my code:

<!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>
    <meta charset="ISO-8859-1" />
    <title>Platilla HTML para convertirlo a DOCX</title>
    <style type="text/css">
        body {
            font-family:Arial;
            font-size:11pt;
        }
        .titulo {
            text-align:center;
            font-weight:bold;
        }
        .contenido {
            text-align:justify;
        }
        .tabla {
            width:100%;
            border:1px solid black;
            border-spacing:0px;
            border-collapse:collapse;
            margin-top: 10px;
        }
        .tabla td, .tabla th {
            border:1px solid black;
        }
        .tabla th {
            background-color: #898989;
            color: white;
            text-align: center;
            vertical-align: bottom;
            height: 150px;
            padding-bottom: 3px;
            padding-left: 5px;
            padding-right: 5px;
        }
        .verticalText {
            text-align: center;
            vertical-align: middle;
            width: 20px;
            margin: 0px;
            padding: 0px;
            padding-left: 3px;
            padding-right: 3px;
            padding-top: 10px;
            white-space: nowrap;
            transform: rotate(-90deg);
            -webkit-transform: rotate(-90deg);
            -moz-transform: rotate(-90deg);
            -o-transform: rotate(-90deg);
            -ms-transform: rotate(-90deg);                 
        };  
    </style>
</head>
<body>
    <table class="tabla">
        <tr>
            <th><div class="verticalText">No. de Item</div></th>
            <th>Departamento / Municipio</th>
            <th>Tipo de Servicio</th>
            <th>Contratista</th>
            <th>Monto maximo</th>
        </tr>
        <tr>
            <td>6</td>
            <td>7</td>
            <td>8</td>
            <td>9</td>
            <td>10</td>
        </tr>
    </table>
</body>

I'm using styles to transform the text to vertical direction...

transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);

... but when I export from html to docx with docxj4 (in the variable "xhtml" is all the html code to export)...

private WordprocessingMLPackage export(String xhtml) {

    WordprocessingMLPackage wordMLPackage = null;
    try {
        RFonts arialRFonts = Context.getWmlObjectFactory().createRFonts();
        arialRFonts.setAscii("Arial");
        arialRFonts.setHAnsi("Arial");
        XHTMLImporterImpl.addFontMapping("Arial", arialRFonts);

        wordMLPackage = WordprocessingMLPackage.createPackage(PageSizePaper.LETTER, false);
        XHTMLImporter importer = new XHTMLImporterImpl(wordMLPackage);
        List<Object> content = importer.convert(xhtml, null);
        wordMLPackage.getMainDocumentPart().getContent().addAll(content);
    } catch (Docx4JException ex) {
        Logger.getLogger(ReporteContratoEspecialista.class.getName()).log(Level.SEVERE, null, ex);
    }
    return wordMLPackage;
}

.. saving the document...

wordMLPackage.save(servletOutputStream);

... the cell text is in normal direction, horizontal, in the .docx document.

Is there another way to do that using html to generate docx document? I need the text vertical in docx.


Solution

  • You'll need to enhance the source code to add that feature.