리액트 - Handsontable Download CSV 구현 (콤마, 줄바꿈, 따옴표 처리)

리액트 전체 링크

 

참고

- 버튼 색깔, 아웃라인 변경하기

- Handsontable Download CSV

 

- Project Settings (전체 코드)

- True / False Options

- Selected Options

- Number Options

- width, height, placeholder, sort

- 주석, comment, memo, tooltip

- Merge Cells, 셀 합치기

- Search 구현

- Columns Data Type

- Cell 커스터마이징

- afterSelection으로 수식 입력줄 구현하기

- Download CSV 구현 (콤마, 줄바꿈, 따옴표 처리)

- Mui Drawer로 Handsontable Option 관리하기

- Column Width, Row Height 로컬 스토리지에 저장하기

- Mui 토글 버튼으로 셀 스타일 편집 기능 만들기 

- 셀 스타일 로컬 스토리지에 저장하기 (전체 코드)

- Handsontable 깃허브 연동하기 (data, style, comment, merge 저장하기)

---

CSV 다운로드를 하기 위해 Mui Button을 추가하자.

import Button from "@mui/material/Button";

...
  
  <div>
    <Box sx={{ m: 2 }}>
      <Button
        sx={{ m: 2 }}
        variant="outlined"
        color="primary"
        onClick={downloadCSV}
      >
        Download CSV
      </Button>
      <div id="hot-app"></div>
    </Box>
  </div>

 

그리고 handsOnTable을 useState로 관리하는 코드를 추가하자.

const CustomHansOnTable = () => {
  const [myHandsOnTable, setMyHandsOnTable] = useState();

  const options = {
    data, 
	...
    licenseKey: "non-commercial-and-evaluation",
  };

  const makeTable = () => {
    const container = document.getElementById("hot-app");
    container.innerHTML = "";

    const myTable = new Handsontable(container, options);
    
    ...

    setMyHandsOnTable(myTable);
  };

  useEffect(() => {
    makeTable();
  }, []);

  const downloadCSV = () => {
    console.log(myHandsOnTable.getData());
  };

  return (
    <div>
      <Box sx={{ m: 2 }}>
        <Button
          sx={{ m: 2 }}
          variant="outlined"
          color="primary"
          onClick={downloadCSV}
        >
          Download CSV
        </Button>
        <div id="hot-app"></div>
      </Box>
    </div>
  );
};

---

CSV 변환하기

 

링크에서 CSV 변환 코드를 구현하였으나, 여기서는 코드를 더 간결하게 바꾸고 줄바꿈, 콤마도 처리해보자.

 

먼저 value가 null인 경우 빈 문자열로 변경하고 string 타입으로 바꾼다.

"가 포함된 경우라면 ""로 변경하고 " " 로 덮는다.

, 나 줄바꿈 문자(\n)가 포함된 경우도 " " 로 덮는다.

그 외에는 value를 return한다.

  const changeFormat = (value) => {
    value = value || "";
    value = value.toString();
    if (value.includes('"')) return '"' + value.replace(/"/g, '""') + '"';
    if (value.includes(",") || value.includes("\n")) return '"' + value + '"';
    return value;
  };

 

해당 함수를 handsOnTable의 data를 불러온 후, changeFormat을 이용하여 csv로 변환한다.

  const downloadCSV = () => {
    let data = myHandsOnTable.getData();

    let csv = "";
    for (let r = 0; r < data.length; r++) {
      let row = data[r].map(changeFormat).join(",");
      csv += row + "\n";
    }

    let fileDown = "data:csv;charset=utf-8," + csv;
    let encodedUri = encodeURI(fileDown);
    let link = document.createElement("a");

    link.setAttribute("href", encodedUri);
    link.setAttribute("download", "handsontable.csv");

    document.body.appendChild(link);

    link.click();

    document.body.removeChild(link);
  };

 

줄바꿈 (wordWrap = true인 경우), 콤마 (,), 따옴표 (")가 포함된 경우라도 csv로 제대로 변환하는 것을 알 수 있다.