> 웹 프론트엔드 > JS 튜토리얼 > 클라이언트 측 프로그래밍을 사용하여 이미지에 대한 브라우저 다운로드를 강제하는 방법은 무엇입니까?

클라이언트 측 프로그래밍을 사용하여 이미지에 대한 브라우저 다운로드를 강제하는 방법은 무엇입니까?

Patricia Arquette
풀어 주다: 2024-11-09 05:56:02
원래의
214명이 탐색했습니다.

How to Force Browser Downloads for Images Using Client-Side Programming?

클라이언트 측 프로그래밍을 사용하여 이미지 브라우저 다운로드 강제

배경

클릭 시 Excel 시트 또는 기타 다운로드 가능한 파일이 있는 경우 브라우저는 일반적으로 다운로드 프로세스를 원활하게 시작합니다. 그러나 이미지 파일에 대해서는 이 동작을 구체적으로 복제해야 합니다.

이미지 다운로드 구현

클라이언트 측 프로그래밍만 사용하면 다음과 같이 이미지 다운로드를 수행할 수 있습니다. :

document.onclick = function (e) {
    e = e || window.event;
    var element = e.target || e.srcElement;
    if (element.innerHTML == "Image") {
        var name = element.nameProp;
        var address = element.href;
        saveImageAs1(element.nameProp, element.href);
        return false; // Prevent default action and stop event propagation
    }
    else
        return true;
};

function saveImageAs1(name, address) {
    if (confirm('you wanna save this image?')) {
        window.win = open(address);
        setTimeout('win.document.execCommand("SaveAs")', 100);
        setTimeout('win.close()', 500);
    }
}
로그인 후 복사

이 코드는 이미지 요소의 클릭 이벤트를 가로채고 사용자에게 다른 이름으로 저장 대화 상자를 사용하여 저장하라는 메시지를 표시합니다. box.

엑셀 다운로드의 경우

엑셀 다운로드의 경우 브라우저가 내부적으로 다운로드 과정을 처리합니다. MIME 유형을 기반으로 파일 유형을 식별하고 추가 프로그래밍 없이 적절한 다운로드 동작을 실행합니다.

HTML5 '다운로드' 속성

그러나 최신 브라우저는 에 대한 '다운로드' 속성 이미지 다운로드를 시작하는 보다 편리한 방법을 제공하는 요소:

<a href="http://localhost:55298/SaveImage/demo/abc.jpg" download>Image</a>
로그인 후 복사

이 속성은 브라우저가 제공된 파일 이름 또는 지정되지 않은 경우 원본 파일 이름으로 이미지를 다운로드하라는 메시지를 표시합니다. 이 방법을 사용한 교차 출처 다운로드는 보안 문제로 인해 2018년부터 더 이상 지원되지 않습니다.

위 내용은 클라이언트 측 프로그래밍을 사용하여 이미지에 대한 브라우저 다운로드를 강제하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿