카카오톡 채널 인앱브라우저 파일다운 문의

iOS
1

채널 톡에서 홈페이지 링크가 되고 있습니다.
링크된 인앱 브라우저에서 홈페이지의 파일 다운로드를 클릭하면 ios 는 다운이 되지 않고 있습니다.
(안드로이드 다른 기종은 다운로드 확인했습니다.)

방식은 스크립트로 blob 다운로드 방식을 쓰며
a href에는 brob url, download 에는 파일명을 설정해 .click();을 호출하며 다운시킵니다.

어떤 방식으로 수정을 해야할지 문의 드립니다.

2

안녕하세요.

확인을 위해 앱 ID 부탁드립니다.

앱ID
https://developers.kakao.com/ 의 내 애플리케이션에 표시되는 ID 값 입니다.
숫자로된 ID 입니다
ex) 123456

[@tim.l @woody.ho]

3

작성하신 코드블럭 공유 부탁드려요.

4 
    // Blob 데이터를 사용하여 파일 다운로드
    const blob = new Blob([response.data], {
        type: response.headers['content-type']
    });
    const url = window.URL.createObjectURL(blob);

    // 링크 생성 후 다운로드 트리거
    const link = document.createElement('a');
    link.href = url;
    link.setAttribute('download', decodeURIComponent(fileName)); // 파일 이름 설정
    document.body.appendChild(link);
    link.click();
    link.remove();

    // URL 객체 해제
    window.URL.revokeObjectURL(url);
5

createObjectURL 사용하셨군요.

아래 페이지 방법 2: FileReader readAsDataURL 방식 테스트 해보시겠어요?

http://test-tam.pe.kr/inapp_check.php


        // 방법 2: FileReader readAsDataURL 방식
        async function downloadImageDataURL() {
            const testArea = document.getElementById('test-area-2');
            testArea.innerHTML = '<p>다운로드 중...</p>';
            
            try {
                // 테스트용 이미지 URL
                const imageUrl = 'images/test.webp';
                
                const response = await fetch(imageUrl);
                const blob = await response.blob();
                
                const dataUrl = await blobToDataURL(blob);
                const a = document.createElement('a');
                a.href = dataUrl;
                a.download = 'downloaded-image-dataurl.webp';
                a.textContent = '이미지 다운로드';
                a.className = 'download-btn secondary';
                
                // 기존 내용을 지우고 새로운 링크 추가
                testArea.innerHTML = '';
                testArea.appendChild(a);
                
                // 다운로드 실행
                a.click();
                
                // 성공 메시지 추가
                const successMsg = document.createElement('p');
                successMsg.style.color = 'green';
                successMsg.textContent = '✅ 다운로드 성공! (DataURL 방식)';
                testArea.appendChild(successMsg);
                
            } catch (error) {
                testArea.innerHTML = `<p style="color: red;">❌ 다운로드 실패: ${error.message}</p>`;
                console.error('Download error:', error);
            }
        }
인앱 브라우저에서 pdf 파일다운로드 되지 않는 문제
6

blobToDataURL 함수는 어떤방식으로 구현해야하나요?
FileReader 생성해서 readAsDataURL 로 하면되는걸까요?

7

요렇게 해보시겠어요?

        // Blob을 DataURL로 변환하는 함수
        function blobToDataURL(blob) {
            return new Promise((resolve, reject) => {
                const reader = new FileReader();
                reader.onloadend = () => {
                    resolve(reader.result);
                };
                reader.onerror = reject;
                reader.readAsDataURL(blob);
            });
        }
8

해당 방식으로 아이폰 동작 확인했습니다. 감사합니다.

1개의 좋아요