diff --git a/example/example-node.js b/example/example-node.js index a0dc62e..5216c64 100644 --- a/example/example-node.js +++ b/example/example-node.js @@ -1403,6 +1403,158 @@ const htmlString = ` no change should happen here

+ +

Some tr styles cases

+

Color property only passed to tr

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

Service

+ 		+

Rate

+
+

Value 1

+ 		+

$175/hr

+
+

Value 2

+ 		+

$145/hr

+
+

Value 3

+ 		+

$125/hr

+
+

Value 4

+ 		+

$105/hr

+
+
+

Common properties and some only to tr

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

Service

+ 		+

Rate

+
+

Value 1

+ 		+

$175/hr

+
+

Value 2

+ 		+

$145/hr

+
+

Value 3

+ 		+

$125/hr

+
+

Value 4

+ 		+

$105/hr

+
+
+

Checking Rowspan with style attribute to tr

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
+

Service

+ 		+

Rate

+
+

Value 1

+
+

Value 2

+ 		+

$145/hr

+
+

Value 3

+ 		+

$125/hr

+
+

Value 4

+ 		+

$105/hr

+
+
`; diff --git a/example/example.js b/example/example.js index c8f0298..05603ba 100644 --- a/example/example.js +++ b/example/example.js @@ -1403,6 +1403,158 @@ const htmlString = ` no change should happen here

+ +

Some tr styles cases

+

Color property only passed to tr

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

Service

+ 		+

Rate

+
+

Value 1

+ 		+

$175/hr

+
+

Value 2

+ 		+

$145/hr

+
+

Value 3

+ 		+

$125/hr

+
+

Value 4

+ 		+

$105/hr

+
+
+

Common properties and some only to tr

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

Service

+ 		+

Rate

+
+

Value 1

+ 		+

$175/hr

+
+

Value 2

+ 		+

$145/hr

+
+

Value 3

+ 		+

$125/hr

+
+

Value 4

+ 		+

$105/hr

+
+
+

Checking Rowspan with style attribute to tr

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
+

Service

+ 		+

Rate

+
+

Value 1

+
+

Value 2

+ 		+

$145/hr

+
+

Value 3

+ 		+

$125/hr

+
+

Value 4

+ 		+

$105/hr

+
+
`; diff --git a/example/react-example/src/App.js b/example/react-example/src/App.js index 765b4a8..9918a8e 100644 --- a/example/react-example/src/App.js +++ b/example/react-example/src/App.js @@ -1400,9 +1400,160 @@ const htmlString = ` no change should happen here

+ +

Some tr styles cases

+

Color property only passed to tr

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

Service

+ 		+

Rate

+
+

Value 1

+ 		+

$175/hr

+
+

Value 2

+ 		+

$145/hr

+
+

Value 3

+ 		+

$125/hr

+
+

Value 4

+ 		+

$105/hr

+
+
+

Common properties and some only to tr

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

Service

+ 		+

Rate

+
+

Value 1

+ 		+

$175/hr

+
+

Value 2

+ 		+

$145/hr

+
+

Value 3

+ 		+

$125/hr

+
+

Value 4

+ 		+

$105/hr

+
+
+

Checking Rowspan with style attribute to tr

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
+

Service

+ 		+

Rate

+
+

Value 1

+
+

Value 2

+ 		+

$145/hr

+
+

Value 3

+ 		+

$125/hr

+
+

Value 4

+ 		+

$105/hr

+
+
`; - function App() { async function downloadDocx(params) { const fileBuffer = await HTMLtoDOCX(htmlString, null, { diff --git a/src/helpers/xml-builder.js b/src/helpers/xml-builder.js index ae5e991..5aa8b39 100644 --- a/src/helpers/xml-builder.js +++ b/src/helpers/xml-builder.js @@ -2586,6 +2586,36 @@ const buildTableRow = async (vNode, attributes, rowSpanMap, docxDocumentInstance if (vNode.properties.style) { // na in columnIndexEquivalent means not applicable and we are calling tableCellBorder from row fixupTableCellBorder(vNode, modifiedAttributes, docxDocumentInstance.tableBorders, rowIndexEquivalent, 'na'); + + // if there are some styles provided to table row + // then we need to pass these to the corresponding cells + // if cells have same style attributes, they will get overridden with the cell values + // else cells get these properties as happens in html + // TODO: Might need to add more properties. As of writing, was able to find only these + const tableRowStyles = vNode.properties.style + const tableRowStlyeKeys = Object.keys(tableRowStyles) + + for (const tableRowStlyeKey of tableRowStlyeKeys) { + const tableRowStyleValue = tableRowStyles[tableRowStlyeKey] + if (tableRowStlyeKey === 'background-color' || tableRowStlyeKey === 'background') { + if (!colorlessColors.includes(tableRowStyleValue)) { + modifiedAttributes.backgroundColor = fixupColorCode(tableRowStyleValue); + } + } else if (tableRowStlyeKey === 'color') { + if (!colorlessColors.includes(tableRowStyleValue)) { + modifiedAttributes.color = fixupColorCode(tableRowStyleValue); + } + } else if (tableRowStlyeKey === 'font-size') { + modifiedAttributes.fontSize = fixupFontSize(tableRowStyleValue, docxDocumentInstance); + } else if (tableRowStlyeKey === 'font-family') { + modifiedAttributes.font = docxDocumentInstance.createFont(tableRowStyleValue); + } else if (tableRowStlyeKey === 'font-weight') { + // FIXME: remove bold check when other font weights are handled. + if (tableRowStyleValue === 'bold') { + modifiedAttributes.strong = tableRowStyleValue; + } + } + } } }