Frontend/javaScript

[javaScript] file-saver 파일 다운로드

dddzr 2023. 10. 2. 00:41

file-saver

자바스크립트에서 파일을 생성하고 사용자에게 다운로드할 수 있게 해주는 라이브러리입니다. 

 

1. 설치

npm install file-saver

 

2. 사용법

saveAs 함수

이 함수를 사용하여 클라이언트 측에서 파일을 저장하고 다운로드할 수 있습니다.

saveAs(다운로드할 파일의 데이터 (Blob 또는 File), 다운로드될 파일의 이름)

 

3. 예시 (vue3)

import { saveAs } from 'file-saver';

// fetch 함수를 사용하여 지정된 URL에서 PDF 파일을 가져옵니다.
// 가져온 PDF 파일을 ArrayBuffer로 변환합니다.
const fetchPdf = async () => {
  const response = await fetch('/assets/files/filename.pdf');
  const arrayBuffer = await response.arrayBuffer();
  return arrayBuffer;
};

// ArrayBuffer를 Blob으로 변환합니다.
// saveAs 함수를 사용하여 Blob을 파일로 다운로드합니다.
fetchPdf().then(pdfContent => {
  const pdfBlob = new Blob([pdfContent], { type: 'application/pdf' });
  saveAs(pdfBlob, '다운로드할파일이름.pdf');
});

 

*파일 위치

https://sumni.tistory.com/256

 

public 디렉토리

file-saver를 이용해 파일을 다운로드 하는데 fetch함수의 response가 실패라고 떴다. 알고보니 파일위치를 변경할 필요가 있었습니다. public 디렉토리 Vue CLI에서 public 디렉토리는 정적 자원을 호스팅

sumni.tistory.com