Word to HTML with PHP

Word to HTML

Introduction

phpdocx Advanced and Premium licenses include the functionality of transforming DOCX files to HTML with native PHP classes.

There are currently two ways to transform Word to HTML with phpdocx:

With the conversion plugin
With the TransformDocAdvHTML native PHP class

The conversion plugin executes LibreOffice or OpenOffice to perform the conversion. This method has a disadvantage: it is not native PHP and requires calling external programs, besides, it doesn't allow to customize the output but with PHP DOM modifications after the conversion.

Native PHP classes included in Advanced and Premium licenses allow to transform DOCX to HTML with PHP exclusively. The main features of this functionality are the following:

Conversion of contents, styles and properties
Native PHP classes
Easily customizable
Transform DOCX created from scratch and templates

How to use it

The transformation can be done using just three lines of code:

$transformHTMLPlugin = new TransformDocAdvHTMLDefaultPlugin();

$transform = new TransformDocAdvHTML('document.docx');
$html = $transform->transform($transformHTMLPlugin);

where document.docx can be a DOCX created with phpdocx or from other source (MS Word, LibreOffice, etc). Premium licenses can also transform in-memory documents.

Supported OOXML tags and attributes

phpdocx parses contents, styles, properties and other XML contents.

The list of currently parsed contents and styles include (OOXML content/style and HTML/CSS transformation):

document (w:body) : <body>
- background color (w:background) => w:color (background-color)
- background image (v:background) => id (background-image)
- border (w:pgBorders) => w:top (border-top), w:bottom (border-bottom), w:left (border-left), w:right (border-right): w:color (border-color: #HEX), w:sz (border-width), w:val (border-style: nil, none, dashed, dotted, double, solid), w:space (padding)
sections (w:sectPr) : <section>
- size (w:pgSz) => w:w (max-width)
- margin (w:pgMar) => w:top (margin-top), w:bottom (margin-bottom), w:left (margin-left), w:right (margin-right)
- columns (w:cols) => w:num (columns)
title and metas (cp:coreProperties) : <title>, <meta>
- title (dc:title) => <title>
- author (dc:creator) => <meta> (author)
- description (dc:description) => <meta> (description)
- keywords (cp:keywords) => <meta> (keywords)
text strings (w:t) and text styles (w:rPr) : <span>
- text (w:t) => <span>
- bold (w:b) => w:val (font-weight: bold)
- color (w:color) => w:val (color: #HEX)
- double line through (w:dstrike) => w:val (text-decoration-style: double)
- font family (w:rFonts) => w:ascii (font-family), w:cs (font-family)
- font size (w:sz) => w:val (font-size)
- highlight (w:highlight) => w:val (background-color)
- italic (w:i) => w:val (font-style: italic)
- line through (w:strike) => w:on (text-decoration: line-through)
- lower case (w:smallCaps) => w:val (text-transform: uppercase; font-size: small)
- text decoration (w:u) => w:val (text-decoration: none or underline; text-decoration-style: dashed, dotted, double, solid, wavy, none)
- upper case (w:caps) => w:val (text-transform: uppercase)
- vanish (w:vanish) => w:val (visibility: hidden; visibility: visibility)
- vertical align (w:vertAlign) => w:val (vertical-align: sub; vertical-align: super)
paragraphs (w:pPr) : <p>
- background color (w:shd) => w:shd (background-color)
- bold (w:b) => w:val (font-weight: bold)
- border (w:pBdr) => w:top (border-top), w:bottom (border-bottom), w:left (border-left), w:right (border-right), w:color (border-color: #HEX), w:sz (border-width), w:val (border-style: nil, none, dashed, dotted, double, solid), w:space (padding)
- color (w:color) => w:val (color: #HEX)
- double line-through (w:dstrike) => w:val (text-decoration-style: double)
- font family (w:rFonts) => w:ascii (font-family)
- font size (w:sz) => w:val (font-size)
- heading (w:outlineLvl) => w:val (h1, h2, h3, h4, h5, h6)
- highlight (w:highlight) => w:val (background-color)
- italic (w:i) => w:val (font-style: italic)
- line height (w:spacing) => w:line (line-height)
- line through (w:strike) => w:on (text-decoration: line-through)
- lower case (w:smallCaps) => w:val (text-transform: lowercase)
- margin (w:ind, w:spacing) => w:left (margin-left), w:start (margin-left), w:right (margin-right), w:end (margin-right), w:after (margin-bottom), w:before (margin-top)
- padding (w:hanging) => w:hanging (padding-left, text-indent)
- page break (w:pageBreakBefore) => w:val (page-break-before: always)
- text align (w:jc) => w:val (text-align: left, justify, center, right)
- text decoration (w:u) => w:val (text-decoration: none or underline; text-decoration-style: dashed, dotted, double, solid, wavy, none)
- text indent (w:firstLine) => w:firstLine (text-indent)
- text direction (w:textDirection) => w:val tbRl (direction: rtl; text-align: right;)
- upper case (w:caps) => w:val (text-transform: uppercase)
- vertical-align (w:vertAlign) => w:val (vertical-align: sub; vertical-align: super)
- word wrap (w:wordWrap) => w:val (word-wrap: break-word)
lists (w:numPr) : <ul>, <ol>, <li>
- type (w:numId) => w:val and w:ilvl (list-style-type: circle, disc, decimal, lower-alpha, lower-roman, upper-alpha, upper-roman)
- view paragraphs elements for other styles
- some styles such as color or font sizes can be inherited to the li content from the li symbol. In this case, the content must have its own style
links : <a>
- bookmark (w:bookmarkStart, w:bookmarkEnd) => w:name (<a>)
- cross-reference (w:instrText) => PAGEREF (<a>)
- link (w:instrText) => HYPERLINK (<a>)
form elements
- checkbox (w:instrText) => (<input> checkbox)
- date (w:date) => (<input> date)
- input (w:instrText) => (<input> text)
- select (w:instrText, w:comboBox) => (<select>)
styles (view elements on this same page for supported styles)
- character/run (w:rPr)
- paragraph (w:pPr)
- list (w:pPr, w:numId, w:ilvl)
- table (w:style, w:pPr, w:rPr)
- styles file (w:styles) => character/run (w:rStyle), paragraph and list (w:pStyle), table
- numbering file => list (w:abstractNum)
- default styles (w:docDefaults, w:style w:default="1") => w:pPr, w:rPr
tables (w:tbl) : <table>
- align (w:jc) => w:val (margin-left, margin-right)
- border (w:tblBorders) => w:top, w:right, w:bottom, w:left (border-: width style [dashed, dotted, double, none, solid] color)
- layout (w:tblLayout) => w:type fixed (table-layout)
- margin (w:tblInd, w:tblpPr) => w:w (margin-left), w:bottomFromText (margin-bottom), w:topFromText (margin-top)
- width (w:tblW) => w:type pct, dxa w:w (width)
- first col style (w:tblStylePr) => w:type (w:rPr styles)
- first row style (w:tblStylePr) => w:type (w:rPr and w:pPr styles)
- last col style (w:tblStylePr) => w:type (w:rPr styles)
- last row style (w:tblStylePr) => w:type (w:rPr and w:pPr styles)
- band1Horz style (w:tblStylePr) => w:type (w:rPr and w:pPr styles)
- band2Horz style (w:tblStylePr) => w:type (w:rPr and w:pPr styles)
- row height (w:trPr) => w:trHeight (height)
- rowspan (w:vMerge) => w:val restart, continue (rowspan)
- cell background color (w:shd) => w:fill (background-color)
- cell border (w:tcPr) => w:top, w:right, w:bottom, w:left (border-: width style [dashed, dotted, double, none, solid] color)
- cell padding (w:tblCellMar) => w:top (padding-top), w:right (padding-right), w:bottom (padding-bottom), w:left (padding-left)
- cell vertical align (w:vAlign) => top, bottom, center, both and default w:val (vertical-align)
- cell width (w:tcW) => w:w (width)
- colspan (w:gridSpan) => w:val (colspan)
- text direction (w:textDirection) => w:val btLr, tbLrV, tbRl and tbRlV (writing-mode, transform, white-space)
images (w:drawing) : <img>
- Supported image formats: png, jpg and other formats supported by web browsers. Wmf is supported if ImageImagick is installed
- border (a:ln, a:noFill) => w (width), a:prstDash (style: dashed, dotted, solid), a:srgbClr (color)
- float (wp:positionH, wp:align) => right (float: right), left (float: left), center (display:block; margin-left: auto; margin-right: auto)
- height (wp:extent) => cy (height)
- link (a:hlinkClick) => r:id (href)
- margin (wp:effectExtent, wp:positionH, wp:positionV) => t (margin-top), r (margin-right), b (margin-bottom), l (margin-left), wp:positionH wp:posOffset (margin-left), wp:positionV wp:posOffset (margin-top)
- text wrapping (wp:inline, wp:anchor) => wp:inline (display: inline), wp:wrapSquare (float: left), wp:wrapNone behindDoc (position: absolute; z-index: -1)
- width (wp:extent) => cx (width)
- src (r:embed, r:link) => embedded and linked images
- saved as files or as base64 (only for embedded images)
charts (w:drawing) : <div>
- Supported charts: bar (group, stack and percent), column (group, stack and percent), pie, doughnut and line charts
- Plotly JS library (MIT license) [https://plotly.com/javascript/] is used as default chart library
- height (cy)
- labels (c:cat)
- legends (c:tx)
- orientation (h, v)
- values (c:val)
- width (cx)
- Plotly default colors are used
other elements
- break (w:br) => (<br>)
- comment (w:commentReference, w:comment) => added to the bottom of the page (<span>)
- date (w:instrText) => TIME (<span>)
- endnote (w:endnoteReference, w:endnote) => added to the bottom of the page (<span>)
- external file (w:altChunk) => r:id (<a>)
- footer (w:footerReference, w:ftr) => (<footer>) added to the bottom of its section
- header (w:headerReference, w:hdr) => (<header>) added to the top of its section
- footnote (w:footnoteReference) => added to the bottom of the page (<span>)
- math equations => Office MathML
- simple fields (w:fldSimple) => AUTHOR, COMMENTS, LASTSAVEDBY, TITLE
- tabs (w:tab) => (<span>) margin-left default
- textbox (v:textbox) => (<div>), style (min-height, float, width), fillcolor (background-color), margin-top (margin-top), strokecolor (border-color, border-style), strokeweight (border-width)
- tracked contents (w:ins, w:del) => (<ins>, <del>)

WARNING:

The fact that a tag is not parsed does not mean its content disappears from the HTML output. It only implies that their associated OOXML properties are not taken directly into account. Their children and text content will be parsed and rendered with their corresponding styles into the HTML output.

Examples

The transforming features included in phpdocx allow to transform complex DOCX documents generated from scratch or using templates. Let's take a look at some samples and their HTML output.

DOCX with an A4 section and paragraphs:

require_once 'pathToPHPDocX/classes/CreateDocx.php';

$docx = new CreateDocx();

$text = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.';
$docx->addText($text);

$paragraphOptions = array(
    'backgroundColor' => 'ff0000',
    'bold' => true,
    'border' => 'inset',
    'borderColor' => 'b70000',
    'borderWidth' => 12,
    'borderSpacing' => 80,
    'borderTopColor' => '000000',
    'caps' => true,
    'firstLineIndent' => 20,
    'fontSize' => 9,
    'hanging' => 10,
    'headingLevel' => 2,
    'indentLeft' => 80,
    'indentRight' => 70,
    'italic' => true,
    'lineSpacing' => 360,
    'spacingBottom' => 60,
    'spacingTop' => 50,
    'textAlign' => 'center',
    'underline' => 'dash',
    'wordWrap' => true,
);

$docx->addText($text, $paragraphOptions);

$text = array();
$text[] =
    array(
        'text' => 'We know this looks ugly',
        'underline' => 'single',
    );
$text[] =
    array(
        'text' => ' supercript ',
        'superscript' => true,
        'bold' => true,
    );
$text[] =
    array(
        'text' => ' subscript ',
        'subscript' => true,
    );
$text[] =
    array(
        'text' => ' but we only want to illustrate some of the functionality of the addText method.',
        'bold' => false,
        'italic' => true,
        'lineBreak' => 'before',
        'strikeThrough' => true,
        'color' => '0000ff',
    );

$docx->addText($text);

$docx->createDocx('example_transformDocAdvHTML_1.docx');

$transformHTMLPlugin = new TransformDocAdvHTMLDefaultPlugin();

$transform = new TransformDocAdvHTML('example_transformDocAdvHTML_1.docx');
$html = $transform->transform($transformHTMLPlugin);

echo $html;

DOCX with tables:

require_once 'pathToPHPDocX/classes/CreateDocx.php';

$docx = new CreateDocx();

$valuesTable = array(
    array(
        11,
        12,
        13,
        14
    ),
    array(
        21,
        22,
        23,
        24
    ),
    array(
        31,
        32,
        33,
        34
    ),

);

$paramsTable = array(
    'border' => 'single',
    'tableAlign' => 'center',
    'borderWidth' => 10,
    'borderColor' => 'B70000',
    'font' => 'Arial',
);

$docx->addTable($valuesTable, $paramsTable);

$link = new WordFragment($docx);
$options = array(
    'url' => 'http://www.google.es'
);

$link->addLink('Link to Google', $options);

$image = new WordFragment($docx);
$options = array(
    'src' => '../../files/image.png'
);

$image->addImage($options);

$valuesTable = array(
    array(
        'Title A',
        'Title B',
        'Title C'
    ),
    array(
        'Line A',
        $link,
        $image
    )
);


$paramsTable = array(
    'tableStyle' => 'LightListAccent1PHPDOCX',
    'tableAlign' => 'center',
    'columnWidths' => array(1000, 2500, 3000),
    );

$docx->addTable($valuesTable, $paramsTable);

$docx->createDocx('example_transformDocAdvHTML_2.docx');

$transformHTMLPlugin = new TransformDocAdvHTMLDefaultPlugin();

$transform = new TransformDocAdvHTML('example_transformDocAdvHTML_2.docx');
$html = $transform->transform($transformHTMLPlugin);

echo $html;

DOCX with lists and text styles:

require_once 'pathToPHPDocX/classes/CreateDocx.php';

$docx = new CreateDocx();

$itemList= array(
    'Line 1',
    array(
        'Line A',
        'Line B',
        'Line C',
        array(
            'Line 1.1',
            'Line 1.2',
            'Line 1.3',
        ),
        'Line D',
    ),
    'Line 2',
);

$docx->addList($itemList, 2);

$textData = new WordFragment($docx);
$textData->addText('Bold text', array('bold' => true));

$htmlData = new WordFragment($docx);
$html = '<i>Some HTML code</i> with a <a href="http://www.phpdocx.com">link</a>';
$htmlData->embedHTML($html);

$itemList= array(
    'In this example we use a custom list (val = 5) that comes bundled with the default PHPdocX template.',
    array(
        $textData,
        'Line B',
        'Line C'
    ),
    $htmlData,
    'Line 3',
);

$options = array(
    'font' => 'Arial',
    'italic' => true,
    'fontSize' => 14,
    'color' => 'b70000'
);

$docx->addList($itemList, 1, $options);

$docx->createDocx('example_transformDocAdvHTML_3.docx');

$transformHTMLPlugin = new TransformDocAdvHTMLDefaultPlugin();

$transform = new TransformDocAdvHTML('example_transformDocAdvHTML_3.docx');
$html = $transform->transform($transformHTMLPlugin);

echo $html;

DOCX with headers and footers:

require_once 'pathToPHPDocX/classes/CreateDocx.php';

$docx = new CreateDocx();

$docx->setBackgroundColor('FFFFCC');

$imageOptions = array(
    'src' => 'image.png',
    'dpi' => 300,
);

$headerImage = new WordFragment($docx, 'defaultHeader');
$headerImage->addImage($imageOptions);

$docx->addHeader(array('default' => $headerImage));

$imageOptions = array(
    'src' => 'image.png',
    'dpi' => 300,
    'imageAlign' => 'right',
);

$footerImage = new WordFragment($docx, 'defaultFooter');
$footerImage->addImage($imageOptions);

$docx->addFooter(array('default' => $footerImage));

$style = array(
    'color' => '999999',
    'border' => 'single',
    'borderLeft' => 'double',
    'borderColor' => '990000',
    'borderRightColor' => '000099',
    'borderWidth' => 12,
    'borderTopWidth' => 24,
    'indentLeft' => 920
    );

$docx->createParagraphStyle('myStyle', $style);

$text = 'A paragraph in grey color with borders. All borders are red but the right one that is blue. ';
$text .= 'The general border style is single but the left border that is double. The top border is also thicker. ';
$text .= 'We also include big left indentation.';

$docx->addText($text, array('pStyle' => 'myStyle'));

$latinListOptions = array();
$latinListOptions[0]['type'] = 'lowerLetter';
$latinListOptions[0]['format'] = '%1.';
$latinListOptions[0]['bold'] = 'on';
$latinListOptions[0]['color'] = 'FF0000';
$latinListOptions[1]['type'] = 'lowerRoman';
$latinListOptions[1]['format'] = '%1.%2.';
$latinListOptions[1]['bold'] = 'on';
$latinListOptions[1]['color'] = '00FF00';
$latinListOptions[1]['underline'] = 'single';


$docx->createListStyle('myList', $latinListOptions);

$myList = array('item 1', array('subitem 1.1', 'subitem 1.2'), 'item 2');

$docx->addList($myList, 'myList');

$docx->createDocx('example_transformDocAdvHTML_4.docx');

$transformHTMLPlugin = new TransformDocAdvHTMLDefaultPlugin();

$transform = new TransformDocAdvHTML('example_transformDocAdvHTML_4.docx');
$html = $transform->transform($transformHTMLPlugin);

echo $html;

DOCX from a template:

require_once 'pathToPHPDocX/classes/CreateDocx.php';

$docx = new CreateDocxFromTemplate('template.docx');

$link1 = new WordFragment($docx);
$linkOptions = array('url'=> 'http://www.google.es',
    'color' => '0000FF',
    'underline' => 'single',
);
$link1->addLink('link to product A', $linkOptions);

$link2 = new WordFragment($docx);
$linkOptions = array('url'=> 'http://www.google.es',
    'color' => '0000FF',
    'underline' => 'single',
);
$link2->addLink('link to product B', $linkOptions);

$link3 = new WordFragment($docx);
$linkOptions = array('url'=> 'http://www.google.es',
    'color' => '0000FF',
    'underline' => 'single',
);
$link3->addLink('link to product C', $linkOptions);

$image = new WordFragment($docx);
$imageOptions = array(
    'src' => 'image.png',
    'scaling' => 50,
    );
$image->addImage($imageOptions);

$docx->setTemplateSymbol('@');
$data = array(
            array(
                'ITEM' => $link1,
                'REFERENCE' => $image,
                'PRICE' => '5.45'
            ),
            array(
                'ITEM' => $link2,
                'REFERENCE' => $image,
                'PRICE' => '30.12'
            ),
            array(
                'ITEM' => $link3,
                'REFERENCE' => $image,
                'PRICE' => '7.00'
            )
        );

$docx->replaceTableVariable($data);

$docx->createDocx('example_transformDocAdvHTML_5.docx');

$transformHTMLPlugin = new TransformDocAdvHTMLDefaultPlugin();

$transform = new TransformDocAdvHTML('example_transformDocAdvHTML_5.docx');
$html = $transform->transform($transformHTMLPlugin);

echo $html;

DOCX with charts:

require_once 'pathToPHPDocX/classes/CreateDocx.php';

$docx = new CreateDocx();

// bar chart
$docx->addText('Bar chart:', array('bold' => true, 'fontSize' => 14));

$data = array(
    'legend' => array('Legend 1', 'Legend 2', 'Legend 3'),
    'data' => array(
        array(
            'name' => 'data 1',
            'values' => array(10, 20, 5),
        ),
        array(
            'name' => 'data 2',
            'values' => array(20, 60, 3),
        ),
        array(
            'name' => 'data 3',
            'values' => array(50, 33, 7),
        ),
    ),
);
$paramsChart = array(
    'data' => $data,
    'type' => 'barChart',
    'sizeX' => 15,
    'sizeY' => 10,
);
$docx->addChart($paramsChart);

// pie chart
$docx->addText('Pie chart:', array('bold' => true, 'fontSize' => 14));

$data = array(
    'data' => array(
        array(
            'name' => 'data 1',
            'values' => array(10),
        ),
        array(
            'name' => 'data 2',
            'values' => array(20),
        ),
        array(
            'name' => 'data 3',
            'values' => array(50),
        ),
        array(
            'name' => 'data 4',
            'values' => array(25),
        ),
    ),
);

$paramsChart = array(
    'data' => $data,
    'type' => 'pieChart',
    'color' => 3,
    'sizeX' => 10,
    'sizeY' => 5,
);
$docx->addChart($paramsChart);

$docx->createDocx('example_transformDocAdvHTML_6.docx');

$transformHTMLPlugin = new TransformDocAdvHTMLDefaultPlugin();

$transform = new TransformDocAdvHTML('example_transformDocAdvHTML_6.docx');
$html = $transform->transform($transformHTMLPlugin);

echo $html;

How to customize transformations

Nearly all the functionalities available for performing DOCX to HTML transformations can be customized.

The two main classes for transformations are: TransformDocAdvHTML and TransformDocAdvHTMLPlugin.

TransformDocAdvHTML is the class for parsing DOCX structures and performs the transformation to HTML. Its constructor receives an object of the TransformDocAdvHTMLPlugin type that sets the export options. This class can be extended to customize the transformation of each element, e.g., transformW_BOOKMARKSTART for bookmarks or transformW_SECTPR for sections.

TransformDocAdvHTMLPlugin allows to generate transformation plugins according to the project requirements. E.g.: inserting images as base64, ignoring sections, customizing conversion factors, setting the method to set export sizes and set CSS, JavaScript and custom HTML. phpdocx includes the TransformDocAdvHTMLDefaultPlugin, the default plugin to perform transformations.

All the available options are thoroughly explained in the API documentation page of the transformDocAdvHTML method.