Workbook API in Vue Spreadsheet API component

<template>
  <!-- Set 'Car Stock Report' sheet as active sheet. -->
  <ejs-spreadsheet :activeSheetIndex="1">
    <e-sheets>
      <e-sheet name="Car Sales Report"> </e-sheet>
      <e-sheet name="Car Stock Report"> </e-sheet>
    </e-sheets>
  </ejs-spreadsheet>
</template>

<script>
  import Vue from "vue";
  import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";

  Vue.use(SpreadsheetPlugin);
  export default Vue.extend({});
</script>

<template>
  <ejs-spreadsheet :autoFill="true" :autoFillSettings="{ autoFillSettings }"></ejs-spreadsheet>
</template>

<script>
  import Vue from "vue";
  import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";
  Vue.use(SpreadsheetPlugin);

  export default Vue.extend({
    data: () => {
      return {
        // Configure the autofill settings.
        autoFillSettings: { fillType: "CopyCells", showFillOptions: true },
      };
    },
  });
</script>

<template>
  <ejs-spreadsheet :cellStyle="cellStyle"></ejs-spreadsheet>
</template>

<script>
  import Vue from "vue";
  import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";
  Vue.use(SpreadsheetPlugin);

  export default Vue.extend({
    data: () => {
      return {
        // Specifies the cellStyle settings.
        cellStyle: {
          fontWeight: "bold",
          fontSize: "12pt",
          fontStyle: "italic",
          textIndent: "2pt",
          backgroundColor: "#4b5366",
          color: "#ffffff",
        },
      };
    },
  });
</script>

<template>
  <ejs-spreadsheet :definedNames="definedNames"></ejs-spreadsheet>
</template>

<script>
  import Vue from "vue";
  import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";
  Vue.use(SpreadsheetPlugin);
  export default Vue.extend({
    data: () => {
      return {
        // Set the specified cell range's name to 'Group1'.
        definedNames: [{ name: "Group1", refersTo: "Sheet1!A1:B5" }],
      };
    },
  });
</script>

<template>
  <ejs-spreadsheet height="600px"> </ejs-spreadsheet>
</template>

<script>
  import Vue from "vue";
  import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";

  Vue.use(SpreadsheetPlugin);

  export default Vue.extend({});
</script>

<template>
  <!-- Specifies the sheets and its options. -->
  <ejs-spreadsheet>
    <e-sheets>
      <e-sheet name="Car Sales Report">
        <e-ranges>
          <e-range :dataSource="dataSource"></e-range>
        </e-ranges>
        <e-rows>
          <e-row :index="rowIndex" :cells="cells"></e-row>
        </e-rows>
        <e-columns>
          <e-column :width="width1"></e-column>
          <e-column :width="width2"></e-column>
          <e-column :width="width3"></e-column>
        </e-columns>
      </e-sheet>
    </e-sheets>
  </ejs-spreadsheet>
</template>

<script>
  import Vue from "vue";
  import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";
  import { salesData } from "./data";
  Vue.use(SpreadsheetPlugin);

  export default Vue.extend({
    data: () => {
      return {
        dataSource: salesData,
        rowIndex: 30,
        colIndex: 4,
        cells: [
          {
            index: 4,
            value: "Total Amount:",
            style: { fontWeight: "bold", textAlign: "right" },
          },
          { formula: "=SUM(F2:F30)", style: { fontWeight: "bold" } },
        ],
        width1: 180,
        width2: 130,
        width3: 120,
        openUrl:
          "https://services.syncfusion.com/vue/production/api/spreadsheet/open",
        saveUrl:
          "https://services.syncfusion.com/vue/production/api/spreadsheet/save",
      };
    },
  });
</script>

<template>
  <!-- Specifies the width -->
  <ejs-spreadsheet width="600px"></ejs-spreadsheet>
</template>

<script>
  import Vue from "vue";
  import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";
  Vue.use(SpreadsheetPlugin);

  export default Vue.extend({});
</script>

<template>
  <ejs-spreadsheet ref="spreadsheet" :created="created"> </ejs-spreadsheet>
</template>

<script>
  import Vue from "vue";
  import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";
  Vue.use(SpreadsheetPlugin);

  export default Vue.extend({
    data: function () {
      return {};
    },
    mounted() {
      window.SQRTHandler = (num) => Math.sqrt(num);
    },
    methods: {
      created: function () {
        // Add custom library function to compute the square root of a number.
        this.$refs.spreadsheet.addCustomFunction("SQRTHandler", "SQRT");
      },
    },
  });
</script>

<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet"> </ejs-spreadsheet>
    <button @click="onClick">Apply Cell Format</button>
  </div>
</template>

<script>
  import Vue from "vue";
  import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";
  Vue.use(SpreadsheetPlugin);

  export default Vue.extend({
    methods: {
      onClick: function () {
        const spreadsheet = this.$refs.spreadsheet;
        // Apply the styles to the cells in the specified range.
        spreadsheet.cellFormat(
          {
            fontWeight: "bold",
            fontSize: "12pt",
            backgroundColor: "#279377",
            color: "#ffffff",
          },
          "A2:E2"
        );
        spreadsheet.cellFormat(
          { verticalAlign: "middle", fontFamily: "Axettac Demo" },
          "A2:E12"
        );
        spreadsheet.cellFormat({ textAlign: "center" }, "A2:A12");
        // Apply text-indent to 2nd & 4th columns.
        const style = { textAlign: "left", textIndent: "8pt" };
        spreadsheet.cellFormat(style, "B2:B12");
        spreadsheet.cellFormat(style, "D2:D12");
        spreadsheet.cellFormat(
          { fontStyle: "italic", textAlign: "right" },
          "C3:C12"
        );
        spreadsheet.cellFormat({ textAlign: "center" }, "E2:E12");
      },
    },
  });
</script>

<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet"> </ejs-spreadsheet>
    <button @click="onClick">To Compute Expression</button>
  </div>
</template>

<script>
  import Vue from "vue";
  import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";
  Vue.use(SpreadsheetPlugin);

  export default Vue.extend({
    methods: {
      onClick: function () {
        const spreadsheet = this.$refs.spreadsheet;
        // Calculate the result of an arithmetic expression or formula.
        spreadsheet.computeExpression("522+1");
        spreadsheet.computeExpression("=SUM(F2:F3)");
      },
    },
  });
</script>

<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet"> </ejs-spreadsheet>
    <button @click="onClick">Delete Row & Column</button>
  </div>
</template>

<script>
  import Vue from "vue";
  import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";
  Vue.use(SpreadsheetPlugin);

  export default Vue.extend({
    methods: {
      onClick: function () {
        const spreadsheet = this.$refs.spreadsheet;
        // To delete rows, columns, and sheets with the specified index.
        spreadsheet.delete(1, 1, "Row", "Sheet1");
        spreadsheet.delete(2, 2, "Column", "Sheet1");
      },
    },
  });
</script>

<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet" :created="created"> </ejs-spreadsheet>
    <button @click="onClick">Delete Chart</button>
  </div>
</template>

<script>
  import Vue from "vue";
  import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";
  Vue.use(SpreadsheetPlugin);

  export default Vue.extend({
    methods: {
      onClick: function () {
        // Delete the chart with the specified chart element ID from the spreadsheet.
        this.$refs.spreadsheet.deleteChart("Chart");
      },
      created: function () {
        // Insert a chart into a spreadsheet using the chart options specified.
        this.$refs.spreadsheet.insertChart([
          {
            type: "Line",
            theme: "Material",
            isSeriesInRows: false,
            range: "A1:B5",
            id: "Chart",
          },
        ]);
      },
    },
  });
</script>

<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet"></ejs-spreadsheet>
    <button @click="onClick">Make Duplicate Sheet</button>
  </div>
</template>

<script>
  import Vue from "vue";
  import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";

  Vue.use(SpreadsheetPlugin);

  export default Vue.extend({
    methods: {
      onClick: function () {
        const spreadsheet = this.$refs.spreadsheet;
        // Make a duplicate/copy of the active sheet in the spreadsheet.
        spreadsheet.duplicateSheet();
        // Make a duplicate/copy of the specified sheet index in the spreadsheet.
        spreadsheet.duplicateSheet(0);
      },
    },
  });
</script>

<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet"></ejs-spreadsheet>
    <button @click="onClick">Get Data</button>
  </div>
</template>

<script>
  import Vue from "vue";
  import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";

  Vue.use(SpreadsheetPlugin);

  export default Vue.extend({
    methods: {
      onClick: function () {
        // Return the specified cell address data as JSON.
        const spreadsheet = this.$refs.spreadsheet;
        spreadsheet.getData("Sheet1!A1:B2").then((data) => console.log(data));
        spreadsheet.getData("A1:B2").then((data) => console.log(data));
      },
    },
  });
</script>

<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet"></ejs-spreadsheet>
    <button @click="onClick">Get Display Text</button>
  </div>
</template>

<script>
  import Vue from "vue";
  import { SpreadsheetPlugin, getCell } from "@syncfusion/ej2-vue-spreadsheet";

  Vue.use(SpreadsheetPlugin);

  export default Vue.extend({
    methods: {
      onClick: function () {
        const spreadsheet = this.$refs.spreadsheet;
        // Get the cell model for the given row, column, and sheet indexes.
        const cell = getCell(0, 0, spreadsheet.ej2Instances.getActiveSheet());
        // To get the formatted cell value, specify the cell model.
        spreadsheet.getDisplayText(cell);
      },
    },
  });
</script>

<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet"></ejs-spreadsheet>
    <button @click="onClick">Insert Chart</button>
  </div>
</template>

<script>
  import Vue from "vue";
  import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";

  Vue.use(SpreadsheetPlugin);

  export default Vue.extend({
    methods: {
      onClick: function () {
        // Insert a chart into a spreadsheet using the chart options specified.
        this.$refs.spreadsheet.insertChart([
          {
            type: "Line",
            theme: "Material",
            isSeriesInRows: false,
            range: "A1",
            id: "Chart1"
          }
        ]);
      },
    },
  });
</script>

<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet"></ejs-spreadsheet>
    <button @click="onClick">Insert Column</button>
  </div>
</template>

<script>
  import Vue from "vue";
  import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";

  Vue.use(SpreadsheetPlugin);

  export default Vue.extend({
    methods: {
      onClick: function () {
        // Insert the column at the starting column index specified.
        this.$refs.spreadsheet.insertColumn([{ index: 1, width: 95 }], 1);
      },
    },
  });
</script>

<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet"></ejs-spreadsheet>
    <button @click="onClick">Insert Row</button>
  </div>
</template>

<script>
  import Vue from "vue";
  import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";

  Vue.use(SpreadsheetPlugin);

  export default Vue.extend({
    methods: {
      onClick: function () {
        // Insert the row at the starting row index specified.
        this.$refs.spreadsheet.insertRow(4, 4);
      },
    },
  });
</script>

<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet"></ejs-spreadsheet>
    <button @click="onClick">Insert Sheet</button>
  </div>
</template>

<script>
  import Vue from "vue";
  import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";

  Vue.use(SpreadsheetPlugin);

  export default Vue.extend({
    methods: {
      onClick: function () {
        // Insert the sheet at the starting sheet index specified.
        this.$refs.spreadsheet.insertSheet(0, 2);
      },
    },
  });
</script>

<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet"></ejs-spreadsheet>
    <button @click="onClick">Lock Cells</button>
  </div>
</template>

<script>
  import Vue from "vue";
  import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";

  Vue.use(SpreadsheetPlugin);

  export default Vue.extend({
    methods: {
      onClick: function () {
        const spreadsheet = this.$refs.spreadsheet;
        //To protect the worksheet.
        const protectSetting = {
          selectCells: true,
          formatCells: false,
          formatRows: false,
          formatColumns: false,
          insertLink: false
        };
        spreadsheet.protectSheet("Sheet1", protectSetting);
        // To unlock the A2:AZ100 cell range.
        spreadsheet.lockCells("A2:AZ100", false);
        // To lock the A1:Z1 cell range.
        spreadsheet.lockCells("A1:Z1", true);
      },
    },
  });
</script>

<template>
  <ejs-spreadsheet ref="spreadsheet" :created="created"> </ejs-spreadsheet>
</template>

<script>
  import Vue from "vue";
  import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";
  Vue.use(SpreadsheetPlugin);

  export default Vue.extend({
    methods: {
      created: function () {
        // To merge the cells in the specified range.
        this.$refs.spreadsheet.merge("B1:E2");
      },
    },
  });
</script>

<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet">
      <e-sheets>
        <e-sheet name="Car Sales Report"> </e-sheet>
        <e-sheet name="Car Stock Report"> </e-sheet>
        <e-sheet name="Car Discount Report"> </e-sheet>
      </e-sheets>
    </ejs-spreadsheet>
    <button @click="onClick">Move Sheets</button>
  </div>
</template>

<script>
  import Vue from "vue";
  import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";

  Vue.use(SpreadsheetPlugin);

  export default Vue.extend({
    methods: {
      onClick: function () {
        const spreadsheet = this.$refs.spreadsheet;
        // Moves the active sheet to the specified position.
        spreadsheet.moveSheet(1);
        // Moves the list of specified sheets to the specified position.
        spreadsheet.moveSheet(0, [1, 2]);
      },
    },
  });
</script>

<template>
  <ejs-spreadsheet ref="spreadsheet" :created="created">
    <e-sheets>
      <e-sheet name="Car Sales Report">
        <e-ranges>
          <e-range :dataSource="dataSource"></e-range>
        </e-ranges>
      </e-sheet>
    </e-sheets>
  </ejs-spreadsheet>
</template>

<script>
  import Vue from "vue";
  import { salesData } from "./data";
  import {
    SpreadsheetPlugin,
    getFormatFromType,
  } from "@syncfusion/ej2-vue-spreadsheet";
  Vue.use(SpreadsheetPlugin);

  export default Vue.extend({
    data: () => {
      return {
        dataSource: salesData,
      };
    },
    methods: {
      created: function () {
        const spreadsheet = this.$refs.spreadsheet;
        // Apply the number format to the specified range of cells.
        spreadsheet.numberFormat("$#,##0.00", "E1:E3");
        // Apply the accounting format to the specified range of cells.
        spreadsheet.numberFormat(getFormatFromType("Accounting"), "C3:E10");
        // Apply the percentage format to the specified range of cells.
        spreadsheet.numberFormat("0%", "F3:F10");
      },
    },
  });
</script>

<template>
  <div class="control-section">
    <ejs-spreadsheet
      ref="spreadsheet"
      :openUrl="openUrl"
      :saveUrl="saveUrl"
    ></ejs-spreadsheet>
    <button @click="Save">Save JSON</button>
    <button @click="Open">Load JSON</button>
  </div>
</template>

<script>
  import Vue from "vue";
  import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";

  Vue.use(SpreadsheetPlugin);

  export default Vue.extend({
    data: function () {
      return {
        response: "",
        openUrl:
          "https://services.syncfusion.com/vue/production/api/spreadsheet/open",
        saveUrl:
          "https://services.syncfusion.com/vue/production/api/spreadsheet/save"
      };
    },
    methods: {
      Save: function () {
        // Save the spreadsheet data as JSON.
        this.$refs.spreadsheet.saveAsJson().then((Json) => (this.response = Json));
      },
      Open: function () {
        // Load the JSON data to the spreadsheet.
        this.$refs.spreadsheet.openFromJson({ file: this.response.jsonObject });
      },
    },
  });
</script>

<template>
  <div class="control-section">
    <ejs-spreadsheet
      ref="spreadsheet"
      :openUrl="openUrl"
      :saveUrl="saveUrl"></ejs-spreadsheet>
    <button @click="onClick">To Save</button>
  </div>
</template>

<script>
  import Vue from "vue";
  import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";

  Vue.use(SpreadsheetPlugin);

  export default Vue.extend({
    data: function () {
      return {
        openUrl:
          "https://services.syncfusion.com/vue/production/api/spreadsheet/open",
        saveUrl:
          "https://services.syncfusion.com/vue/production/api/spreadsheet/save"
      };
    },
    methods: {
      onClick: function () {
        // Save the spreadsheet data to an Excel file with the filename and extension you specify.
        this.$refs.spreadsheet.save({
          url: "https://services.syncfusion.com/vue/production/api/spreadsheet/save",
          fileName: "Worksheet",
          saveType: "Xlsx"
        });
      },
    },
  });
</script>

<template>
  <div class="control-section">
    <ejs-spreadsheet
      ref="spreadsheet"
      :openUrl="openUrl"
      :saveUrl="saveUrl"
    ></ejs-spreadsheet>
    <button @click="Save">Save JSON</button>
    <button @click="Open">Load JSON</button>
  </div>
</template>

<script>
  import Vue from "vue";
  import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";

  Vue.use(SpreadsheetPlugin);

  export default Vue.extend({
    data: function () {
      return {
        response: "",
        openUrl:
          "https://services.syncfusion.com/vue/production/api/spreadsheet/open",
        saveUrl:
          "https://services.syncfusion.com/vue/production/api/spreadsheet/save"
      };
    },
    methods: {
      Save: function () {
        // Save the spreadsheet data as JSON.
        this.$refs.spreadsheet.saveAsJson().then((Json) => (this.response = Json));
      },
      Open: function () {
        // Load the JSON data to the spreadsheet.
        this.$refs.spreadsheet.openFromJson({ file: this.response.jsonObject });
      },
    },
  });
</script>

<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet"></ejs-spreadsheet>
    <button @click="onClick">Set Border</button>
  </div>
</template>

<script>
  import Vue from "vue";
  import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";

  Vue.use(SpreadsheetPlugin);

  export default Vue.extend({
    methods: {
      onClick: function () {
        // Sets the border to the specified cell range.
        this.$refs.spreadsheet.setBorder(
          { border: "1px solid #000000" },
          "C6:G8",
          "Outer"
        );
        this.$refs.spreadsheet.setBorder({ border: "1px solid #000000" });
      },
    },
  });
</script>

<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet" :created="created"> </ejs-spreadsheet>
    <button @click="onClick">UnMerge Cells</button>
  </div>
</template>

<script>
  import Vue from "vue";
  import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";
  Vue.use(SpreadsheetPlugin);

  export default Vue.extend({
    methods: {
      created: function () {
        this.$refs.spreadsheet.merge("B1:E2");
      },
      onClick: function () {
        //To split the merged cell into multiple cells.
        this.$refs.spreadsheet.unMerge("B1:E2");
      },
    },
  });
</script>

<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet"></ejs-spreadsheet>
    <button @click="onClick">To Wrap</button>
  </div>
</template>

<script>
  import Vue from "vue";
  import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";

  Vue.use(SpreadsheetPlugin);

  export default Vue.extend({
    methods: {
      onClick: function () {
        // To wrap/unwrap the cell's text content with the specified address.
        this.$refs.spreadsheet.wrap("B5", true);
      },
    },
  });
</script>

<div id='Spreadsheet'></div>

new Spreadsheet({
      beforeCellFormat: (args: BeforeCellFormatArgs) => {
      }
     ...
 }, '#Spreadsheet');

<div id='Spreadsheet'></div>

 new Spreadsheet({
     beforeCellUpdate: (args: BeforeCellUpdateArgs) => {
     }
     ...
 }, '#Spreadsheet');

<div id='Spreadsheet'></div>

new Spreadsheet({
      beforeOpen: (args: BeforeOpenEventArgs) => {
      }
     ...
 }, '#Spreadsheet');

<div id='Spreadsheet'></div>

new Spreadsheet({
      beforeSave: (args: BeforeSaveEventArgs) => {
      }
     ...
 }, '#Spreadsheet');

<div id='Spreadsheet'></div>

new Spreadsheet({
      openFailure: (args: OpenFailureArgs) => {
      }
     ...
 }, '#Spreadsheet');

<div id='Spreadsheet'></div>

new Spreadsheet({
     queryCellInfo: (args: CellInfoEventArgs) => {
     }
     ...
 }, '#Spreadsheet');

<div id='Spreadsheet'></div>

new Spreadsheet({
      saveComplete: (args: SaveCompleteEventArgs) => {
      }
     ...
 }, '#Spreadsheet');