csv file download 구현

 

CSV는 결국 delimeter로 구분된 string

 

const Papa = require('papaparse/papaparse.min.js');

Papa.unparse(내용에 들어갈 array-[{a,b},{a2,b2},...]);

let blob = new Blob(['\ufeff' + bodyData]), url = window.URL.createObjectURL(blob);
let a = document.createElement('a');
document.body.appendChild(a);
a.style = 'display: none';
a.href = url;
a.download = 'exportEventLogs.csv';
a.click();
window.URL.revokeObjectURL(url);//revokeObjectURL: URL.createObjectURL()로 생성한 객체 URL해제
//참고로 revoke는 re + voke(vocal 과 같은 어원, 부르다) 다시 불러들이다 -> 취소/해제하다

---

let blob = new Blob(['\ufeff' + csvData]),

여기서 \ufeff 붙이는 이유는? 

• /ufeff는 해당 file이 어떤 문자열로 코딩되었는지를 의미하는 일종의 식별자입니다. “이 문서의 인코딩 방식은 뭐에요”라는 걸 알려주는 메타 정보인 것이죠. 보통 이러한 방식은 해당 파일의 맨 앞에 집어넣곤 합니다.
• --> 이런걸 unicode BOM(Byte Order Mark)라고 하나봄

https://frhyme.github.io/python-basic/py_eff_byte_order_mark/

python에서 \ufeff가 읽힐 때 해결방법.

 

BOM이란 문서 맨 앞에 눈에 보이지 않는 특정 바이트(byte)를 넣은 다음 이것을 해석해서 정확히 어떤 인코딩 방식이 사용되었는지 알아내는 방법을 나타냅니다. 자세하게 유니코드가 little-endian 인지 big-endian 인지 아니면 UTF-8 인지 쉽게 알 수 있도록, 유니코드 파일이 시작되는 첫부분에 보이지 않게, 2~3바이트의 문자열을 추가하는데 이것을 BOM이라고 합니다. BOM은 텍스트 에디터 화면에서는 보이지 않고, 헥사 에디터(Hex Editor)*로 열었을 때만 보입니다.

https://brownbears.tistory.com/124

유니코드 BOM(Byte Order Mark)

 

 

---

function extractBodyFieldKey(body, timeType, intl) {
 let addUpDay = body.reduce( (acc, cur) => {
  return acc.concat(cur);
 });
 addUpDay = sortByTimestamp(addUpDay);
 return Papa.unparse(addUpDay.map(log => {
  let eventTime = getTimeZoneTime(log, timeType);
  let event =  intl.formatMessage({id:  util.eventLogMessageByCode(log.code)});
  let userId = log.userKey;
  let userName = log.userName;
  let deviceDisplayName = log.deviceName;
  return {eventTime, event, userId, userName, deviceDisplayName}
 }))
}

[07-22 오전 11:30] 구본관: 저희 모카키도 그렇고 에어팝 포털도 그렇고 CSV 내보내기 할 때 대량으로 생성하게 되면 block 걸리는 경우가 발생합니다. 위에 이번에 변경된 UI도 파일작업을 할 때 동작을 멈추게 됩니다. addUpDay.map 이나 Papa.unparse 부분에서 시간이 굉장히 오래 걸리게 되는데 이때 렌더링이 멈추게 됩니다 대량으로 데이터를 처리할때는 비동기 방식으로 처리할 필요가 있습니다. 저희가 사용하는 papaparse 라이브러리를 보면 step 이나 chunk 같은 옵션들이 있습니다. 이번에 수정하려고 하는 것은 아니고 추후 개발에 참고하시면 좋겠습니다

-> 시간이 오래 걸려서 렌더링 멈춤? 상관없고 대량 데이터를 array로 한번에 처리해서 outOfMemory날뿐, 잘라서 처리해주면됨