안녕하세요. 카톡 인앱 브라우저에서 파일을 다운로드 기능이 실패하는데
어떤 부분을 수정하면 될까요?
const PlayerLectureNote: React.FC<PlayerLectureNoteProps> = ({ materials }) => {
const downloadRef = useRef<HTMLAnchorElement>(null);
// 파일 다운로드 핸들러
const handleDownload = useCallback(async (material: Material) => {
try {
const response = await axios.get(material.fileUrl, {
responseType: "blob",
});
const contentType =
response.headers["content-type"] === "image/jpeg; charset=UTF-8"
? "image/jpeg"
: response.headers["content-type"];
const blob = new Blob([response.data], { type: contentType });
const downloadUrl = window.URL.createObjectURL(blob);
const downloadLink = downloadRef.current;
if (downloadLink) {
downloadLink.href = downloadUrl;
downloadLink.download = material.title;
downloadLink.click();
}
window.URL.revokeObjectURL(downloadUrl);
} catch (error) {
console.error("강의 자료 다운로드에 실패했습니다.", error);
}
}, []);
return (
<div className="flex flex-col gap-[10px] pt-3">
{materials?.map((material, index) => (
<div key={index} className="lectureNoteBox">
<p className="lectureNoteText">{material.title}</p>
<button onClick={() => handleDownload(material)}>
<DownloadIcon />
</button>
</div>
))}
<a ref={downloadRef} style={{ display: "none" }}>
다운로드 버튼
</a>
</div>
);
};