New to Kendo UI for jQueryStart a free 30-day trial

Sheets

configuration

The sheets of the workbook. Every sheet represents a page from the final Excel file.

sheets

Array
<script>
var workbook = new kendo.ooxml.Workbook({
  sheets: [
      {
          name: "Products",
          rows: [
              { cells: [ { value: "Product" }, { value: "Price" } ] },
              { cells: [ { value: "Laptop" }, { value: 999.99 } ] },
              { cells: [ { value: "Phone" }, { value: 599.99 } ] }
          ]
      },
      {
          name: "Summary", 
          rows: [
              { cells: [ { value: "Total Items" }, { value: 2 } ] }
          ]
      }
  ]
});

workbook.toDataURLAsync().then(function(dataURL) {
  kendo.saveAs({
    dataURI: dataURL,
    fileName: "multiple-sheets.xlsx"
  });
});
</script>

The column configuration.

<script>
var workbook = new kendo.ooxml.Workbook({
  sheets: [
      {
          columns: [
              { width: 100 },
              { width: 200, autoWidth: false },
              { width: 150 }
          ],
          rows: [
              { cells: [ 
                  { value: "ID" }, 
                  { value: "Product Name" }, 
                  { value: "Price" } 
              ] },
              { cells: [ 
                  { value: 1 }, 
                  { value: "Laptop Computer" }, 
                  { value: 999.99 } 
              ] }
          ]
      }
  ]
});

workbook.toDataURLAsync().then(function(dataURL) {
  kendo.saveAs({
    dataURI: dataURL,
    fileName: "columns-example.xlsx"
  });
});
</script>

An array which contains the drawings used in this sheet.

<script>
var workbook = new kendo.ooxml.Workbook({
  images: {
    "logo": {
      data: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==",
      type: "image/png"
    }
  },
  sheets: [
      {
          drawings: [
              {
                  topLeftCell: "B2",
                  offsetX: 10,
                  offsetY: 10,
                  width: 100,
                  height: 100,
                  image: "logo"
              }
          ],
          rows: [
              { cells: [ { value: "Data with image" } ] }
          ]
      }
  ]
});

workbook.toDataURLAsync().then(function(dataURL) {
  kendo.saveAs({
    dataURI: dataURL,
    fileName: "drawings-example.xlsx"
  });
});
</script>

The configuration of the Excel auto-filter. When set, the final document will be have auto-filtering enabled.

Default: null

<script>
var workbook = new kendo.ooxml.Workbook({
  sheets: [
      {
          filter: { from: 0, to: 1 },
          rows: [
            { cells: [ { value: "First Name" }, { value: "Last Name" } ] },
            { cells: [ { value: "John" }, { value: "Doe" } ] },
            { cells: [ { value: "Jane" }, { value: "Doe" } ] }
          ]
      }
  ]
});
workbook.toDataURLAsync().then(function(dataURL) {
  kendo.saveAs({
    dataURI: dataURL,
    fileName: "Test.xlsx"
  });
});
</script>

Deprecated in versions 2015.3 and later. Use frozenColumns and frozenRows instead.

<script>
var workbook = new kendo.ooxml.Workbook({
  sheets: [
      {
          freezePane: {
              colSplit: 2,
              rowSplit: 1
          },
          rows: [
              { cells: [ { value: "Frozen Row" }, { value: "Frozen Row" }, { value: "Frozen Row" } ] },
              { cells: [ { value: "Frozen Col" }, { value: "Frozen Col" }, { value: "Free Cell" } ] },
              { cells: [ { value: "Frozen Col" }, { value: "Frozen Col" }, { value: "Free Cell" } ] }
          ]
      }
  ]
});

workbook.toDataURLAsync().then(function(dataURL) {
  kendo.saveAs({
    dataURI: dataURL,
    fileName: "freeze-pane-example.xlsx"
  });
});
</script>

The number of the frozen columns in this sheet.

Default: 0

<script>
var workbook = new kendo.ooxml.Workbook({
  sheets: [{
      frozenColumns: 2,
      rows: [
        { cells: [ { value: "Frozen column" }, { value: "Frozen column" }, { value: "Free column" }  ] }
      ]
  }]
});

workbook.toDataURLAsync().then(function(dataURL) {
  kendo.saveAs({
    dataURI: dataURL,
    fileName: "Test.xlsx"
  });
});
</script>

The number of frozen rows in this sheet.

Default: 0

<script>
var workbook = new kendo.ooxml.Workbook({
  sheets: [{
      frozenRows: 1,
      rows: [
        { cells: [ { value: "Frozen row" } ] },
        { cells: [ { value: "Free row" } ] }
      ]
  }]
});

workbook.toDataURLAsync().then(function(dataURL) {
  kendo.saveAs({
    dataURI: dataURL,
    fileName: "Test.xlsx"
  });
});
</script>

Specify a collection of hyperlinks that will be applied to the corresponding cells. You can set only one link per cell.

<script>
  var workbook = new kendo.ooxml.Workbook({
    sheets: [
      {
        hyperlinks: [{ref: "A1", target: "https://google.com"}, {ref: "A2", target: "https://youtube.com"}],
        rows: [
          { cells: [ { value: "Google" } ] },
          { cells: [ { value: "Youtube" } ] }
        ]
      }
    ]
  });

  workbook.toDataURLAsync().then(dataURI => {
    kendo.saveAs({
      dataURI,
      fileName: "Test.xlsx"
    });
  });
</script>

A range of cells that will be merged into one. The value of the first cell in the range will be displayed in the new merged cell.

<script>
  var workbook = new kendo.ooxml.Workbook({
    sheets: [{
      mergedCells: ["A1:D1"],
      rows: [
        { cells: [ { value: "Document Title" }  ] },
        { cells: [ { value: 22 }, { value: 33 }, { value: 44 }, {value: 55}  ] }
      ]
    }]
  });

workbook.toDataURLAsync().then(function(dataURL) {
  kendo.saveAs({
    dataURI: dataURL,
    fileName: "Test.xlsx"
  });
});
</script>

Sets the name of the exported workbook sheet.

<script>
    var workbook = new kendo.ooxml.Workbook({
     sheets: [
        {
            columns: [ { autoWidth: true } ],
            name: "My custom sheet name",
            rows: [
                { cells: [ { value: "short" } ] },
                { cells: [ { value: "longer text value" } ] }
            ]
        }
    ]
});
workbook.toDataURLAsync().then(function(dataURL) {
  kendo.saveAs({
    dataURI: dataURL,
    fileName: "Test.xlsx"
  });
});
</script>

The array of the sheet rows.

<script>
var workbook = new kendo.ooxml.Workbook({
  sheets: [
      {
          rows: [
            { cells: [ { value: "John" }, { value: "Doe" } ] },
            { cells: [ { value: "Jane" }, { value: "Doe" } ] }
          ]
      }
  ]
});
workbook.toDataURLAsync().then(function(dataURL) {
  kendo.saveAs({
    dataURI: dataURL,
    fileName: "Test.xlsx"
  });
});
</script>

A Boolean value which indicates if the grid lines of the sheet will be displayed.

Default: true

<script>
var workbook = new kendo.ooxml.Workbook({
  sheets: [
      {
          name: "With Grid Lines",
          showGridLines: true,
          rows: [
              { cells: [ { value: "A1" }, { value: "B1" } ] },
              { cells: [ { value: "A2" }, { value: "B2" } ] }
          ]
      },
      {
          name: "No Grid Lines",
          showGridLines: false,
          rows: [
              { cells: [ { value: "A1" }, { value: "B1" } ] },
              { cells: [ { value: "A2" }, { value: "B2" } ] }
          ]
      }
  ]
});

workbook.toDataURLAsync().then(function(dataURL) {
  kendo.saveAs({
    dataURI: dataURL,
    fileName: "grid-lines-example.xlsx"
  });
});
</script>

Deprecated in versions 2015.3 and later. Use name instead.

<script>
var workbook = new kendo.ooxml.Workbook({
  sheets: [
      {
          title: "Sales Report",
          rows: [
              { cells: [ { value: "Quarter" }, { value: "Sales" } ] },
              { cells: [ { value: "Q1" }, { value: 100000 } ] },
              { cells: [ { value: "Q2" }, { value: 120000 } ] }
          ]
      }
  ]
});

workbook.toDataURLAsync().then(function(dataURL) {
  kendo.saveAs({
    dataURI: dataURL,
    fileName: "sheet-title-example.xlsx"
  });
});
</script>