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');
});
*파일 위치
public 디렉토리
file-saver를 이용해 파일을 다운로드 하는데 fetch함수의 response가 실패라고 떴다. 알고보니 파일위치를 변경할 필요가 있었습니다. public 디렉토리 Vue CLI에서 public 디렉토리는 정적 자원을 호스팅
sumni.tistory.com