使用 office.js 使用 html 形式的数据在 word 中创建 table

Question

我正在创建一个插件，它使用 office.js 以 table 形式显示来自数据库的数据。在那个 table 列中可以有 html 形式的数据。所以我的要求是当我创建 table 并且在那个 table 中如果任何列有 html 内容应该显示为带格式的普通文本。

我找到了一些创建 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);
            }
        });
}

在上面的代码中

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

在上面的代码中，第一个值是 html 内容，所以当创建 table 时，不应显示 html 并且输出应该像 Hello有 粗体 .

我还找到了实际根据需要以正常形式显示 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);
        }
    });
}

谢谢！

Answer 1

您可以在 HTML 中生成整个 table，然后将其作为 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);
        }
    });
}

Answer 2

Pradeep：我强烈建议您尝试新的 API for Tables in Word。这将帮助您解决所有格式设置需求。

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

然后查看主要 table 操作对象的所有文档！

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

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

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

最后是一个示例，让您了解如何使用 APIs :):

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

            });
        });

希望这对您有所帮助，祝您编码愉快！！！ -胡安

使用 office.js 使用 html 形式的数据在 word 中创建 table

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

javascript

ms-word

office-addins

office-app

office-js