[Vue.js] Excel Data를 Clipboard에 복사 후 JSON Data로

Excel Data를 업로드 하는 방식 외에 간단하게 Copy & Paste 로 JSON Data 를 생성해주는 방식을 소개합니다.

기본적으로 Excel에 있는 Data를 Copy 하면 행 구분은 탭 구분자 ('\t') 로 되어 있습니다.

아래 Script 부분에서 볼 수 있듯이 탭 으로 파싱해서 json data 형태로 만드는 방식입니다.

 

Template 부분

 

clipboard 에 있는 Data를 붙여넣기 할 수 있게 textarea 태그를 사용합니다.

<textarea v-model="originalData" @keyup="handler" placeholder="Header를 제외한 Data를 Clipboard에 복사 후 'Ctrl+V' 키를 통해 붙여넣기 하셈."></textarea>

 

Script 부분

 

textarea로 붙여넣은 data를 parsing 해서 json data로 추가하는 부분입니다.

 

handler() {
    if(this.originalData === '') return ;
    this.convertToJson(this.originalData);
    this.originalData = '';
},
convertToJson(str) {
    let rowList = str.split('\n');
    let convRow = [];
    rowList.forEach((row, index) => {
        convRow = row.split('\t');
        if(row.length === 0) return ;
        let json = this.generateJson(convRow, index);
        this.jsonData.push(json);
    })
},
generateJson(row, index) {
    let json = {};
    json['index'] = index;
    for (let i in this.headers) {
        json[this.headers[i].text] = row[i];
    }
    return json;
}