Excel IO Element

Using the Excel IO element in SpreadJS with Vue, you can quickly render and display the Excel sheets on the web pages while also executing the import and export operations without any hassle.

Vue 3

1. Create a Vue project

   Open the command prompt and type the following commands to create a simple Vue project.

   npm install -g @vue-cli
   vue create sjs-vue-app :: Here, select Vue 3
   cd sjs-vue-app
   npm run serve

2. Import SpreadJS Vue modules in project

   Import SpreadJS Vue modules in your project using the following command:

   npm install @mescius/spread-sheets-vue
   npm install @mescius/spread-sheets

3. Import Excel IO Vue Module and FileSaver Vue Module in the project

   Import the Excel I/O and file-saver modules in your project using the following commands:

   npm install @mescius/spread-excelio
   npm install file-saver --save

4. Use Excel IO in Vue Application

   Modify the App.vue file to use the Excel IO element in a Vue application as shown below:

   <template>
     <div>
       <gc-spread-sheets class="spread-host" @workbookInitialized="initSpread">
       </gc-spread-sheets>
       <div class="options-container">
         <div class="option-row">
           <div class="inputContainer">
             <input
               type="file"
               id="fileDemo"
               class="input"
               @change="changeFileDemo"
             />
             <input
               type="button"
               id="loadExcel"
               value="import"
               class="button"
               @click="loadExcel"
             />
           </div>
           <div class="inputContainer">
             <input
               id="exportFileName"
               value="export.xlsx"
               class="input"
               @change="changeExportFileName"
             />
             <input
               type="button"
               id="saveExcel"
               value="export"
               class="button"
               @click="saveExcel"
             />
           </div>
         </div>
       </div>
     </div>
   </template>
   
   <script>
     import "@mescius/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css";
     import * as GC from "@mescius/spread-sheets";
     import * as ExcelIO from "@mescius/spread-excelio";
     import { saveAs } from "file-saver";
   
     var SpreadJSKey = "xxxx";
     GC.Spread.Sheets.LicenseKey = SpreadJSKey;
   
     // You need to license the ExcelIO module separately using the same license key
     ExcelIO.LicenseKey = SpreadJSKey;
   
     export default {
       name: "App",
       methods: {
         initSpread: function (spread) {
           this.spread = spread;
           let sheet = this.spread.getActiveSheet();
           sheet
             .getCell(0, 0)
             .vAlign(GC.Spread.Sheets.VerticalAlign.center)
             .value("SpreadJS");
         },
         changeFileDemo(e) {
           this.importExcelFile = e.target.files[0];
         },
         changeExportFileName(e) {
           this.exportFileName = e.target.value;
         },
         loadExcel() {
           let spread = this.spread;
           let excelIo = new ExcelIO.IO();
           let excelFile = this.importExcelFile;
           excelIo.open(
             excelFile,
             function (json) {
               spread.fromJSON(json);
             },
             function (error) {
               console.log(error);
             }
           );
         },
         saveExcel() {
           let spread = this.spread;
           let excelIo = new ExcelIO.IO();
           let fileName = this.exportFileName || "export";
           if (fileName.substr(-5, 5) !== ".xlsx") {
             fileName += ".xlsx";
           }
           let json = spread.toJSON();
           excelIo.save(
             json,
             function (blob) {
               saveAs(blob, fileName);
             },
             function (error) {
               console.log(error);
             }
           );
         },
       },
     };
   </script>
   
   <style>
     .spread-host {
       width: 100%;
       height: 600px;
     }
     .inputContainer {
       width: 100%;
       height: auto;
       border: 1px solid #eee;
       padding: 6px 12px;
       margin-bottom: 10px;
       box-sizing: border-box;
     }
     .options-container {
       width: 280px;
       padding: 12px;
       height: 100%;
       box-sizing: border-box;
       background: #fbfbfb;
       overflow: auto;
     }
   </style>

5. Register the SpreadJS Vue Component

   Modify the main.js file by using the sample code given below:

   import { createApp } from 'vue'
   import App from './App.vue'
   import { GcSpreadSheets, GcWorksheet, GcColumn } from '@mescius/spread-sheets-vue'
   
   let app = createApp(App);
   app.component('gc-spread-sheets', GcSpreadSheets);
   app.component('gc-worksheet', GcWorksheet);
   app.component('gc-column', GcColumn);
   app.mount("#app");

6. Save and Run the Application

   Build and run the new project using the following command:

   npm run serve