[]
Using the spread-sheets-io element in SpreadJS with Vue, you can quickly render and display the Excel sheets on the web pages while executing the import and export operations without any hassle.
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
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
Import spread-sheets-io Vue Module and FileSaver Vue Module in the project
Import the spread-sheets-io and file-saver modules in your project using the following commands:
npm install @mescius/spread-sheets-io
npm install file-saver --save
Use spread-sheets-io in Vue Application
Modify the App.vue file to use the spread-sheets-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 "@mescius/spread-sheets-vue";
import saveAs from "file-saver";
import "@mescius/spread-sheets-io";
export default {
name: "App",
setup() {
const hostClass = "spread-host";
function initWorkbook(spread) {
let sheet = spread.getActiveSheet();
sheet.setValue(0, 0, "Hello Grapecity");
const fileTypeMap = { sjs: "sjs", xlsx: "xlsx", ssjson: "ssjson" };
function getFileType(fileName) {
// console.log( fileName);
return fileName.split(".").pop();
}
// Load Files
function loadFile(file) {
const type = getFileType(file.name);
const fileType =
type === "xlsx"
? GC.Spread.Sheets.FileType.excel
: GC.Spread.Sheets.FileType.ssjson;
if (type === fileTypeMap.sjs) {
spread.open(
file,
() => console.log("SJS File Loaded"),
console.error
);
} else if ([fileTypeMap.xlsx, fileTypeMap.ssjson].includes(type)) {
spread.import(file, () => console.log("File Loaded"), console.error, {
fileType,
});
} else {
console.error("Unsupported file type");
}
}
// Export Files
function exportFile() {
const type = document.getElementById("exportFileType").value;
const fileName = `export.${type}`;
const fileType =
type === "xlsx"
? GC.Spread.Sheets.FileType.excel
: GC.Spread.Sheets.FileType.ssjson;
if (type === fileTypeMap.sjs) {
spread.save((blob) => saveAs(blob, fileName), console.error);
} else if (type === fileTypeMap.xlsx || type === fileTypeMap.ssjson) {
spread.export((blob) => saveAs(blob, fileName), console.error, {
fileType,
});
}
}
document
.getElementById("selectedFile")
.addEventListener("change", (e) => loadFile(e.target.files[0]));
document
.getElementById("exportBtn")
.addEventListener("click", exportFile);
}
return {
hostClass,
initWorkbook,
};
},
};
</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>
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");
Save and Run the Application
Build and run the new project using the following command:
npm run serve