[ 방식 ]
react에서 버튼클릭 시 js로 a태그 생성하여 파일 다운로드
<button onClick={() => fileDownload(fileUrl)}>
function blobToDataURL(blob: Blob): Promise<string> {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onloadend = () => {
if (typeof reader.result === "string") {
resolve(reader.result);
} else {
reject(new Error("Failed to convert blob to DataURL"));
}
};
reader.onerror = () => reject(reader.error);
reader.readAsDataURL(blob);
});
}
export const fileDownload = async (
url: string,
fileName = "소개서"
): Promise<void> => {
try {
const res = await fetch(url);
if (!res.ok) {
throw new Error(`[${res.status}] 파일을 가져오지 못했습니다.`);
}
const blob = await res.blob();
const dataUrl = await blobToDataURL(blob);
const a = document.createElement("a");
a.href = dataUrl;
a.download = `소개서_${fileName}.pdf`;
a.style.display = "none";
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
} catch (err) {
CUSTOM_ERROR(`file download => ${err}`);
}
};
[ 현 상황 ]
데스크탑/모바일 외부 웹브라우저 : 다운로드 잘됨
IOS 인앱 : pdf 파일 뷰어로 열려서 공유메뉴에서 파일다운로드 가능
AOS 인앱 : 다운로드 시작… → 다운로드중… 이후 다운로드 완료 토스트도없고 파일 저장도 안됨
다른 글에서 보면 download + dataUrl로 가능하다고 하였는데 AOS에서도 가능하려면 어떻게 해야하나요 ?
[ 참고 문의글 ]
카카오톡 채널 인앱브라우저 파일다운 문의
카카오톡 인앱브라우저에서 파일 다운로드 기능 관련 문의