office.js를 사용하여 html 형식의 데이터로 표를 만듭니다.

Question

office.js를 사용하여 데이터베이스의 데이터를 테이블 형식으로 표시하는 addin을 만듭니다. 해당 테이블 열에 html 형식의 데이터가있을 수 있습니다. 그래서 내 요구 사항은 테이블을 만들 때 그 테이블에있는 모든 열에는 서식있는 텍스트로 표시되어야하는 html 콘텐츠가있는 것입니다.

제가 첫번째 값이 HTML 콘텐츠 때문에 테이블은 HTML이 안 생성 될 때 인 상기 코드의 상기 코드

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

테이블

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

을 생성하는 코드를 발견 출력은 과 같아야합니다. 안녕하세요.은 굵게 표시됩니다.

필자는 필요에 따라 실제로 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로 생성 한 다음 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 : 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를 사용하는 방법에 대한 아이디어를 얻을 수 있도록 예입니다 :) :

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

 
      }); 
 
     });

희망이 있으면 행복하게 코딩 할 수 있습니다. -Juan