PDF 썸네일형 리스트형 React 앱에서 파일 다운로드 및 저장 처리하기 파일 다운로드/저장은 대시보드, 리포트, 이미지/PDF 내보내기 등에서 자주 요구되는 기능입니다. 본 글에서는 React 환경에서 작은 파일부터 대용량까지 안정적으로 다운로드하고, 로컬 저장까지 처리하는 실무 패턴을 정리합니다.1. 최소 구현: Blob → a.click() → URL.revokeObjectURL가장 단순하고 호환성 좋은 방법은 Blob을 만들어 임시 URL을 만들고, 보이지 않는 앵커 태그로 클릭 이벤트를 트리거하는 방식입니다. 클릭 후 반드시 URL.revokeObjectURL로 메모리를 회수합니다.// utils/download.jsexport function downloadBlob(blob, filename) { const url = URL.createObjectURL(blob).. 더보기 React로 PDF 뷰어 및 다운로드 기능 구현하기 실무에서 PDF 문서 열람과 다운로드는 잦은 요구사항입니다. React에서 pdf.js 기반 라이브러리를 사용하면 빠르게 뷰어를 만들고, 인증이 필요한 파일도 안전하게 내려받을 수 있습니다. 아래 예제로 바로 적용해보세요.1. 개요목표는 다음과 같습니다: 브라우저 내 PDF 뷰어 구현, 페이지 이동/확대 기능 제공, 파일 다운로드 버튼 제공, 인증 및 CORS 고려, 모바일 대응과 성능 최적화입니다.2. 설치 및 준비pdf.js를 감싼 react-pdf 라이브러리를 사용합니다. 워커 설정이 필요합니다.// 설치// npm// npm i react-pdf// yarn// yarn add react-pdf// pdf.js 워커 설정 (전역 1회)import { pdfjs } from 'react-pdf';p.. 더보기 이전 1 다음