Spread-sheets-io 요소

SpreadJS에서 spread-sheets-io 요소를 Vue와 함께 사용하면, Excel 시트를 웹 페이지에 빠르게 렌더링하고 표시할 수 있으며, 불편함 없이 가져오기 및 내보내기 작업도 수행할 수 있습니다.

Vue 3

Vue 프로젝트 생성하기
명령 프롬프트를 열고 다음 명령어를 입력하여 간단한 Vue 프로젝트를 생성하세요.
```
npm install -g @vue-cli
vue create sjs-vue-app :: Here, select Vue 3
cd sjs-vue-app
npm run serve
```
프로젝트에 SpreadJS Vue 모듈 임포트하기
다음 명령어를 사용하여 프로젝트에 SpreadJS Vue 모듈을 임포트하세요:
```
npm install @mescius/spread-sheets-vue
npm install @mescius/spread-sheets
```
프로젝트에 Excel IO Vue 모듈과 FileSaver Vue 모듈 임포트하기
다음 명령어를 사용하여 프로젝트에 spread-sheets-io 및 file-saver 모듈을 임포트하세요:
```
npm install @mescius/spread-sheets-io
npm install file-saver --save
```

Vue 애플리케이션에서 spread-sheets-io 사용하기

Vue 애플리케이션에서 spread-sheets-io 요소를 사용하기 위해 App.vue 파일을 아래와 같이 수정하세요:

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

SpreadJS Vue 컴포넌트 등록하기

아래에 제공된 샘플 코드를 사용하여 main.js 파일을 수정하세요:

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");

애플리케이션을 저장하고 실행하기
다음 명령어를 사용하여 새 프로젝트를 빌드하고 실행하세요.
```
npm run serve
```

Spread-sheets-io 요소

Vue 3

제품

고객 서비스

메시어스 정보

정책(Policy)