javascriptms-wordoffice-addinsoffice-jsoffice-app

Create table in word with data which is in html form using office.js


I am creating an addin which displays data from database in table form using office.js. and in that table column can have data in html form. So my requirement is when i create the table and in that table if any column have html contents that should be displayed as normal text with formatting .

I found some code that creates the table

 function writeTable() {
    // Build table.
    var myTable = new Office.TableData();
    myTable.headers = [["Cities"]];
    myTable.rows = [['<b>Hello there</b>'], ['Roma'], ['Tokyo'], ['Seattle']];

    // Write table.
    Office.context.document.setSelectedDataAsync(myTable, { coercionType: Office.CoercionType.Table },
        function (result) {
            var error = result.error
            if (result.status === Office.AsyncResultStatus.Failed) {
                write(error.name + ": " + error.message);
            }
        });
}

In the above code

myTable.rows = [['<b>Hello there</b>'], ['Roma'], ['Tokyo'], ['Seattle']];

in above code the first value is html contents so when the table is created the html should not be displayed and the output should be like Hello there in bold .

I also found the code that actually displays the html in normal form as needed but i am not able to use it with the code mentioned above. The code i found for html rendering is bellow.

function writeHtmlData() {
    Office.context.document.setSelectedDataAsync("<b>Hello</b> World!", { coercionType: Office.CoercionType.Html }, function (asyncResult) {

        if (asyncResult.status === Office.AsyncResultStatus.Failed) {
          //  write('Error: ' + asyncResult.error.message);
        }
    });
}

Thank you!


Solution

  • You could generate the whole table in HTML and then insert it as HTML.

    function writeHtmlData() {
        console.log('writeHtmlData');
        var headers = [["Cities"]];
        var rows = [['<b>Hello there</b>'], ['Roma'], ['Tokyo'], ['Seattle']];
        var html = '<table>';
        html += '<thead>';
        for (var i = 0; i < headers.length; i++) {
            html += '<tr>';
            var cells = headers[i];
            for (var j = 0; j < cells.length; j++) {
                html += '<th>' + cells[j] + '</th>';
            }
            html += '</tr>';
        }
        html += '</tr>';
        html += '</thead>';
        html += '<tbody>';
        for (var i = 0; i < rows.length; i++) {
            html += '<tr>';
            var cells = rows[i];
            for (var j = 0; j < cells.length; j++) {
                html += '<td>' + cells[j] + '</td>';
            }
            html += '</tr>';
        }
        html += '</tbody>';
        html += '</table>';
    
        Office.context.document.setSelectedDataAsync(html, { coercionType: Office.CoercionType.Html }, function (asyncResult) {
            if (asyncResult.status == "failed") {
                console.debug("Action failed with error: " + asyncResult.error.message);
            }
        });
    }