JavaScript 생성 및 파일 저장

Harshit Jindal 2023년10월12일
JavaScript 생성 및 파일 저장

이 튜토리얼에서는 JavaScript로 파일을 만들고 저장하는 방법을 설명합니다.

파일을 생성하고 서버 측 NodeJS에 저장하는 것은 쉽지만 클라이언트 측에서는이를 수행 할 수있는 옵션이 거의 없습니다. 이 자습서에서는 데이터를 사용하여 파일을 만든 다음 저장하는 데 도움이되는 사용자 지정 함수를 작성합니다. 최신 브라우저에서는 파일을 저장하는 데 도움이되는 msSaveOrOpenBlob이라는 함수가 있습니다. 그러나 이전 브라우저에서는 먼저 파일에 대한 링크를 생성 한 다음 앵커 태그에download속성을 추가하여 다운로드합니다.

function downloadFiles(data, file_name, file_type) {
  var file = new Blob([data], {type: file_type});
  if (window.navigator.msSaveOrOpenBlob)
    window.navigator.msSaveOrOpenBlob(file, file_name);
  else {
    var a = document.createElement('a'), url = URL.createObjectURL(file);
    a.href = url;
    a.download = file_name;
    document.body.appendChild(a);
    a.click();
    setTimeout(function() {
      document.body.removeChild(a);
      window.URL.revokeObjectURL(url);
    }, 0);
  }
}

위 함수에서 브라우저가msSaveOrOpenBlob을 지원하는지 확인하고 발견되면이를 사용하여 파일을 저장합니다. 그렇지 않으면 생성 된 파일을 가리키는 앵커 태그를 생성합니다. 다운로드 속성을 앵커 태그에 추가하고 해당 태그를 문서 본문에 첨부합니다. JavaScript를 사용하여 클릭하면 다운로드가 트리거되고 이러한 방식으로 파일을 저장합니다. 그런 다음 본문에서 해당 앵커 태그를 제거하고 생성 된 URL을 취소합니다.

Harshit Jindal avatar Harshit Jindal avatar

Harshit Jindal has done his Bachelors in Computer Science Engineering(2021) from DTU. He has always been a problem solver and now turned that into his profession. Currently working at M365 Cloud Security team(Torus) on Cloud Security Services and Datacenter Buildout Automation.

LinkedIn