[javascript] Ember.js로 엑셀 다운로드 및 업로드 기능을 어떻게 구현하나요?

04 Dec 2023

javascript

Ember.js는 웹 애플리케이션 개발을 더욱 쉽게 만들어주는 JavaScript 프레임워크입니다. 이번에는 Ember.js를 사용하여 엑셀 파일을 다운로드하고 업로드하는 기능을 구현하는 방법에 대해 알아보겠습니다.

엑셀 다운로드 기능 구현하기

ember-cli-file-saver 패키지 설치하기

엑셀 파일을 다운로드하기 위해 ember-cli-file-saver 패키지를 사용합니다. 아래 명령어를 통해 패키지를 설치합니다.
```
ember install ember-cli-file-saver
```

다운로드 버튼 추가하기

엑셀 파일을 다운로드할 수 있는 버튼을 추가해야 합니다. 예를 들어, download-button 컴포넌트를 생성하고 버튼을 렌더링합니다.

// app/components/download-button.js

import Component from '@glimmer/component';
import { saveAs } from 'file-saver';

export default class DownloadButtonComponent extends Component {
  downloadExcel() {
    const data = '여기에 엑셀 파일 데이터를 가져옵니다.';
    const blob = new Blob([data], { type: 'application/vnd.ms-excel' });
    saveAs(blob, 'example.xlsx');
  }
}

<!-- app/templates/components/download-button.hbs -->

<button >엑셀 다운로드</button>

엑셀 파일 데이터 가져오기

엑셀 파일을 다운로드하기 위해서는 엑셀 파일에 들어갈 데이터를 가져와야 합니다. 예를 들어, API를 통해 데이터를 가져온다고 가정하겠습니다. ember-ajax 패키지를 사용하여 API 호출을 수행합니다.

ember install ember-ajax

// app/controllers/index.js

import Controller from '@ember/controller';
import { inject as service } from '@ember/service';

export default class IndexController extends Controller {
  @service ajax;

  async downloadExcel() {
    const response = await this.ajax.request('/api/excel');
    const data = response.data;
    // 가져온 데이터를 엑셀 파일로 변환하는 작업을 수행합니다.
  }
}

위 코드에서 /api/excel 경로에 요청을 보내서 엑셀 파일 데이터를 가져옵니다.

데이터를 엑셀 파일로 변환하기

가져온 데이터를 엑셀 파일로 변환하는 작업을 수행해야 합니다. 이를 위해 xlsx 패키지를 사용할 수 있습니다. xlsx 패키지를 설치합니다.

npm install xlsx

// app/controllers/index.js

import Controller from '@ember/controller';
import { inject as service } from '@ember/service';
import XLSX from 'xlsx';

export default class IndexController extends Controller {
  @service ajax;

  async downloadExcel() {
    const response = await this.ajax.request('/api/excel');
    const data = response.data;

    // 데이터를 엑셀 파일로 변환합니다.
    const workbook = XLSX.utils.table_to_book(document.getElementById('table'));
    const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'buffer' });
    const blob = new Blob([excelBuffer], { type: 'application/vnd.ms-excel' });
    saveAs(blob, 'example.xlsx');
  }
}

위 코드에서는 XLSX.utils.table_to_book 함수를 사용하여 데이터가 들어 있는 테이블을 엑셀 파일로 변환합니다.

다운로드 버튼 클릭 시 엑셀 파일 다운로드하기

이제 다운로드 버튼을 클릭할 때 downloadExcel 메서드가 실행되어 엑셀 파일이 다운로드되도록 설정합니다.
```


<button >엑셀 다운로드</button>
```

엑셀 업로드 기능 구현하기

ember-file-upload 패키지 설치하기

엑셀 파일을 업로드하기 위해 ember-file-upload 패키지를 사용합니다. 아래 명령어를 통해 패키지를 설치합니다.
```
ember install ember-file-upload
```

파일 업로드 컴포넌트 추가하기

파일을 업로드할 수 있는 컴포넌트를 추가합니다. 예를 들어, upload-button 컴포넌트를 생성하고 파일 입력 필드를 렌더링합니다.

// app/components/upload-button.js

import Component from '@glimmer/component';

export default class UploadButtonComponent extends Component {
  handleFileChange(event) {
    const file = event.target.files[0];
    // 파일 데이터를 서버로 업로드하는 작업을 수행합니다.
  }
}

<!-- app/templates/components/upload-button.hbs -->

<input type="file" >

파일 업로드 API 작성하기

파일 데이터를 서버로 업로드하기 위해 파일 업로드 API를 작성해야 합니다. 예를 들어, express와 함께 사용하는 경우 다음과 같은 라우터를 작성할 수 있습니다.

// server/routes/api.js

const express = require('express');
const router = express.Router();
const multer = require('multer');
const upload = multer({ dest: 'uploads/' });

router.post('/upload', upload.single('file'), (req, res) => {
  const file = req.file;
  res.json({ message: '파일이 업로드 되었습니다.' });
});

module.exports = router;

파일 업로드 요청 보내기

파일 업로드 요청을 보내기 위해 ember-ajax 패키지를 사용합니다.

// app/components/upload-button.js

import Component from '@glimmer/component';
import { inject as service } from '@ember/service';

export default class UploadButtonComponent extends Component {
  @service ajax;

  handleFileChange(event) {
    const file = event.target.files[0];
    const formData = new FormData();
    formData.append('file', file);

    this.ajax.post('/api/upload', {
      data: formData,
      processData: false,
      contentType: false
    });
  }
}

위 코드에서는 FormData를 사용하여 파일을 서버로 보냅니다.

파일 업로드 컴포넌트 사용하기

파일 업로드 컴포넌트를 사용하여 파일을 업로드할 수 있는 입력 필드를 화면에 렌더링합니다.
```


<UploadButton />
```

이렇게 하면 Ember.js를 사용하여 엑셀 파일을 다운로드하고 업로드하는 기능을 구현할 수 있습니다. 각 단계에 대한 자세한 설명은 해당 프레임워크와 패키지의 공식 문서를 참조하시기 바랍니다.

참고 자료: