New to Kendo UI for jQuery? Download free 30-day trial

Appearance

By default, Excel shows all cells according to their default color, font name, and size settings.

Kendo UI allows you to change the appearance of the cells by using the following configuration options:

  • background—This option sets the background color of the cell.
  • bold—Displays the cell value in bold.
  • color—Sets the cell text color.
  • fontName—Sets the font used to display the cell value.
  • fontSize—Sets the font size of the cell value.
  • hAlign—Sets the horizontal text alignment.
  • italic—Displays the cell value in italic.
  • underline—Displays the cell value as underlined.
  • vAlign—Sets the vertical text alignment.
<script>
var workbook = new kendo.ooxml.Workbook({
  sheets: [
    {
      columns: [ { autoWidth: true } ],
      rows: [
        {
          cells: [
            {
              value: "bold and italic",
              bold: true,
              italic: true
            }
          ]
        },
        {
          cells: [
            {
              value: "red text on blue background",
              color: "#ff0000",
              background: "#0000ff"
            }
          ]
        },
        {
          cells: [
            {
              value: "Arial 20px",
              fontSize: 20,
              fontName: "Arial"
            }
          ]
        },
        {
          cells: [
            {
              value: "Right aligned",
              hAlign: "right"
            }
          ]
        },
        {
          cells: [
            {
              value: "Centered horizontally and vertically",
              vAlign: "center",
              hAlign: "center",
              rowSpan: 2
            }
          ]
        }
      ]
    }
  ]
});
kendo.saveAs({
    dataURI: workbook.toDataURL(),
    fileName: "Test.xlsx"
});
</script>

See Also

In this article