使用office.js以html格式创建包含数据的表格

时间:2016-07-12 08:11:47

标签: javascript ms-word office-addins office-js office-app

我正在创建一个插件,它使用office.js以表格形式显示数据库中的数据。并且在该表列中可以包含h​​tml格式的数据。所以我的要求是当我创建表并在该表中,如果任何列具有应该显示为具有格式的普通文本的html内容。

我找到了一些创建表的代码

 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);
            }
        });
}

在上面的代码中

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

在上面的代码中,第一个值是html内容,因此在创建表时,不应显示html,输出应该像粗体 Hello there

我还发现了实际以正常形式显示html的代码,但是我无法将其与上面提到的代码一起使用。我在html渲染中找到的代码如下所示。

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);
        }
    });
}

谢谢!

2 个答案:

答案 0 :(得分:4)

Pradeep:我强烈建议您在Word中尝试使用新的API表。这将有助于您在所有格式需求上花费大量时间。

目前API已预览,您可以在此处查看如何使用预览。 https://github.com/OfficeDev/office-js-docs/tree/WordJs_1.3_Openspec

然后查看主表操作对象的所有文档!

表: https://github.com/OfficeDev/office-js-docs/blob/WordJs_1.3_Openspec/word/resources/table.md

表格单元格 https://github.com/OfficeDev/office-js-docs/blob/WordJs_1.3_Openspec/word/resources/tablecell.md

表格行 https://github.com/OfficeDev/office-js-docs/blob/WordJs_1.3_Openspec/word/resources/tablerow.md

最后这是一个示例,以便您了解如何使用API​​:):

&#13;
&#13;
   Word.run(function (ctx) {

            var fruits = [["Apple", "red", "round", "crunchy"], ["Banana", "yellow", "long", "mushy"], ["Pear", "green", "oblong", "variable"]];
            var fruitsNonuniform = [["Apple", "red"], ["Banana", "yellow", "long", "mushy"], ["Pear", "green", "oblong"]];
            var fruitsUnderfilled = [["Apple", "red", "", ""], ["Banana", "yellow", "long", "mushy"], ["Pear", "green", "oblong", ""]];


            var table = ctx.document.body.insertTable(fruits.length, fruits[0].length, "start", fruits);
            ctx.load(table);
            return ctx.sync().then(function () {
                table.style = "Grid Table 6 Colorful - Accent 2";
                return ctx.sync().then(function () {
                    showNotification("Success")
                });

            }).catch(function (e) {
                showNotification(e.message);

            });
        });
&#13;
&#13;
&#13;

希望这有助于和快乐的编码! -Juan

答案 1 :(得分:1)

您可以用HTML生成整个表格,然后将其作为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);
        }
    });
}