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

Sheets.drawings

configuration

An array which contains the drawings used in this sheet.

sheets.drawings

Array

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

sheets.drawings.height

Number

The drawing's height in pixels.

<script>
var workbook = new kendo.ooxml.Workbook({
  images: {
    "chart": {
      data: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==",
      type: "image/png"
    }
  },
  sheets: [
      {
          drawings: [
              {
                  topLeftCell: "C2",
                  offsetX: 0,
                  offsetY: 0,
                  width: 150,
                  height: 100,
                  image: "chart"
              }
          ],
          rows: [
              { cells: [ { value: "Year" }, { value: "Sales" }, { value: "Chart (100px high)" } ] }
          ]
      }
  ]
});

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

sheets.drawings.image

String

The ID of the image to display.

<script>
var workbook = new kendo.ooxml.Workbook({
  images: {
    "productImage": {
      data: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==",
      type: "image/png"
    },
    "companyLogo": {
      data: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==",
      type: "image/png"
    }
  },
  sheets: [
      {
          drawings: [
              {
                  topLeftCell: "B2",
                  width: 100,
                  height: 100,
                  image: "productImage"
              },
              {
                  topLeftCell: "D2", 
                  width: 80,
                  height: 50,
                  image: "companyLogo"
              }
          ],
          rows: [
              { cells: [ { value: "Product" }, { value: "Image" }, { value: "Brand" }, { value: "Logo" } ] }
          ]
      }
  ]
});

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

sheets.drawings.offsetX

Number

The horizontal offset from the anchor cell's top-left corner, in pixels.

<script>
var workbook = new kendo.ooxml.Workbook({
  images: {
    "icon": {
      data: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==",
      type: "image/png"
    }
  },
  sheets: [
      {
          drawings: [
              {
                  topLeftCell: "B2",
                  offsetX: 25,
                  offsetY: 10,
                  width: 50,
                  height: 50,
                  image: "icon"
              }
          ],
          rows: [
              { cells: [ { value: "Product" }, { value: "Icon will be offset 25px right" } ] }
          ]
      }
  ]
});

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

sheets.drawings.offsetY

Number

The vertical offset from the anchor cell's top-left corner, in pixels.

<script>
var workbook = new kendo.ooxml.Workbook({
  images: {
    "banner": {
      data: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==",
      type: "image/png"
    }
  },
  sheets: [
      {
          drawings: [
              {
                  topLeftCell: "A1",
                  offsetX: 10,
                  offsetY: 15,
                  width: 200,
                  height: 40,
                  image: "banner"
              }
          ],
          rows: [
              { cells: [ { value: "Banner will be offset 15px down" } ] }
          ]
      }
  ]
});

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

sheets.drawings.topLeftCell

String

A cell to which the drawing's top-left corner is anchored.

<script>
var workbook = new kendo.ooxml.Workbook({
  images: {
    "chart": {
      data: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==",
      type: "image/png"
    }
  },
  sheets: [
      {
          drawings: [
              {
                  topLeftCell: "C3",
                  width: 150,
                  height: 100,
                  image: "chart"
              }
          ],
          rows: [
              { cells: [ { value: "A1" }, { value: "B1" }, { value: "C1" } ] },
              { cells: [ { value: "A2" }, { value: "B2" }, { value: "C2" } ] },
              { cells: [ { value: "A3" }, { value: "B3" }, { value: "Image will be here" } ] }
          ]
      }
  ]
});

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

sheets.drawings.width

Number

The drawing's width in pixels.

<script>
var workbook = new kendo.ooxml.Workbook({
  images: {
    "logo": {
      data: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==",
      type: "image/png"
    }
  },
  sheets: [
      {
          drawings: [
              {
                  topLeftCell: "B2",
                  offsetX: 5,
                  offsetY: 5,
                  width: 120,
                  height: 80,
                  image: "logo"
              }
          ],
          rows: [
              { cells: [ { value: "Company" }, { value: "Logo (120px wide)" } ] }
          ]
      }
  ]
});

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