화면의 테이블을 csv로 저장시 한글깨짐 주의할 내용

한글이 계속 깨져서... 너무 힘들었다.

chatGPT로 해결책을 찾아봤지만...

내가 원하는 결과를 주지 못했다.

document.getElementById("csvDownload").addEventListener("click", function() {
  const table = document.getElementById("csvTable");
  const theadRow = table.querySelector("thead tr");
  const rows = table.querySelectorAll("tbody tr");

  const csvRows = [];
  
  // Include the header row
  const headerData = [];
  theadRow.querySelectorAll("th").forEach(function(cell) {
    headerData.push(cell.textContent);
  });
  csvRows.push(headerData.join(","));

  // Include the data rows
  rows.forEach(function(row) {
    const rowData = [];
    row.querySelectorAll("td").forEach(function(cell) {
      rowData.push(cell.textContent);
    });
    csvRows.push(rowData.join(","));
  });

  const csvContent = csvRows.join("\n");
   // 한글깨짐문제 '\ufeff' + data 이것 참조
  const blob = new Blob(['\ufeff' + csvContent], { type: "text/csv;charset=utf-8;" });
  const link = document.createElement("a");
  link.href = URL.createObjectURL(blob);
  link.setAttribute("download", "직원연차정보.csv");
  document.body.appendChild(link);
  link.click();
});

 

결국 위의 코드에서 

 const blob = new Blob(['\ufeff' + csvContent], { type: "text/csv;charset=utf-8;" });

이 부분이 중요하다.

이제 완성된 화면이다.