jQuery를 사용하여 파일 다운로드


113

사용자가 링크를 클릭 할 때 다운로드를 요청하려면 어떻게해야합니까?

예를 들어 다음 대신 :

<a href="uploads/file.doc">Download Here</a>

다음을 사용할 수 있습니다.

<a href="#">Download Here</a>

 $('a').click... //Some jquery to download the file

이렇게하면 Google은 내 HREF 및 비공개 파일의 색인을 생성하지 않습니다.

jQuery로이 작업을 수행 할 수 있습니까? 그렇다면 어떻게해야합니까? 아니면 PHP 나 그 대신해야할까요?


답변:


165

다음을 사용하여보다 우아하게 저하되는 솔루션으로 이것을 제안 할 수 있습니다 preventDefault.

$('a').click(function(e) {
    e.preventDefault();  //stop the browser from following
    window.location.href = 'uploads/file.doc';
});

<a href="no-script.html">Download now!</a>

자바 스크립트가 없더라도 최소한 이렇게하면 사용자가 피드백을받을 수 있습니다.


20
jQuery를이다 대답.
— Esteban Küber

감사합니다. 이것이 제가 찾고 있던 것입니다. 나는 보통 "preventDefault"를 사용하는데, 게으 르기 때문에 위에서 생략했습니다. ;-)
— Dodinas 2009-08-18

2
잘 작동하지만 MIME 유형 오류가 발생합니다. 지나칠 수있는 방법이 있는지 궁금하십니까?
— Nathan Hangen

2
MIME 유형 경고를 해결 했습니까? "리소스가 문서로 해석되지만 MIME 유형으로 전송되었습니다 ..."라는 메시지가 표시됩니다. 감사합니다.
— user1824269

22

검색 엔진이 특정 파일의 색인을 생성하지 않도록하려면 robots.txt 를 사용 하여 웹 스파이더에게 웹 사이트의 특정 부분에 액세스하지 않도록 지시 할 수 있습니다.

자바 스크립트에만 의존하는 경우 자바 스크립트없이 탐색하는 일부 사용자는 링크를 클릭 할 수 없습니다.


1
'robots.txt'에 대해 알아두면 좋습니다. 감사합니다.
— Dodinas

@Rob, "비공개"URL이 필요한 경우 robots.txt브라우저 기록 및 중간 서버에 계속 저장되므로 도움이되지 않습니다.
— Pacerier 2015 년

3
6 년 후 : 자바 스크립트없이 브라우징? -글쎄, 대신 산책하러 갈 수도 있습니다.
— low_rents jul.

거의 10 년 후 : 동일합니다! 또는?
— toing_toing

18

다음은 검색 엔진에서 파일을 숨기는 다양한 방법을 보여주는 멋진 기사입니다.

http://antezeta.com/news/avoid-search-engine-indexing

자바 스크립트는 페이지 색인을 생성하지 않는 좋은 방법이 아닙니다. 사용자가 파일에 직접 링크하여 크롤러에게 공개하는 것을 방지하지 않으며 Rob이 언급했듯이 모든 사용자에게 작동하지 않습니다.
쉬운 해결 방법은 rel="nofollow"속성 을 추가하는 것입니다.하지만 robots.txt 없이는 완전하지 않습니다.

<a href="uploads/file.doc" rel="nofollow">Download Here</a>

2
다음은 "nofollow"또는 "me"관계를 이해하는 데 많은 도움이되는 웹 메이저 용 Google 도움말의 또 다른 기사 입니다.
— 000

12

예, window.location.href를 다운로드하려는 파일의 URL로 변경해야합니다.

window.location.href = 'http://www.com/path/to/file';

파일 확장자가 .html이면 다운로드하는 대신 해당 html 파일로 리디렉션됩니다
— Kaleem Nalband

9
 var link=document.createElement('a');
 document.body.appendChild(link);
 link.href=url;
 link.click();

오류없이 다운로드가 시작되지 않았습니다. 요소를 만드는 동안 누락 된 부분이있을 수 있습니다.
— shyammakwana.me

HTML에서 <a> 요소가 생성되었는지 여부를 확인하고 파일 링크를 확인하십시오.
— EL missaoui habib

태그가 본문에있었습니다. 수동 클릭으로 이미지를 다운로드합니다. 그러나 지금은 필요하지 않습니다.이 vanillaJS 솔루션을 사용했습니다.
— shyammakwana.me

작동하지 않을 이유가 없습니다. 링크가 정확합니다. 찾아보기에서 직접 링크를 테스트
— EL의 missaoui의 하비브

$('blah').each(function(){ $('body').append('<a href="'+xxx+'" download="'+dynamicname+'" />'); }) $('a').trigger('click');나는 그것을 사용했다.
— shyammakwana.me


6

진술에 의해 window.location.href = 'uploads/file.doc';당신이 당신의 파일을 저장 어디 보여줍니다. 물론 .htacess를 사용하여 저장된 파일에 필요한 동작을 강제 할 수 있지만 항상 소수는 아닙니다 ....

서버 측 php-file을 생성하고 그 안에 다음 내용을 넣는 것이 좋습니다 :

header('Content-Type: application/octet-stream');
header('Content-Disposition: attachment; filename='.$_REQUEST['f']);
readfile('../some_folder/some_subfolder/'.$_REQUEST['f']); 
exit;

이 코드는 실제로 저장 한 위치를 표시하지 않고 모든 파일을 다운로드로 반환합니다.

이 PHP 파일을 다음을 통해 엽니 다. window.location.href = 'scripts/this_php_file.php?f=downloaded_file';


이 솔루션은 내 사이트의 다운로드 문제를 해결하는 데 도움이되었습니다. 감사합니다!
— Denniz

3

숨겨진 iframe 이 도움이 될 수 있습니다.


var redeemFrame = document.createElement ( "iframe"); var src = "doDownload.php"; redeemFrame.setAttribute ( "src", src); redeemFrame.setAttribute ( "style", "display : none"); document.body.appendChild (redeemFrame);
— DarthRez

3

클릭 이벤트 전에 호출되는 mousedown 이벤트를 사용하는 것이 좋습니다. 이렇게하면 브라우저가 자연스럽게 클릭 이벤트를 처리하여 코드 이상을 피할 수 있습니다.

(function ($) {


    // with this solution, the browser handles the download link naturally (tested in chrome and firefox)
    $(document).ready(function () {

        var url = '/private/downloads/myfile123.pdf';
        $("a").on('mousedown', function () {
            $(this).attr("href", url);
        });

    });
})(jQuery);

0

jQuery를 사용하여 양식을 지우는 방법에 대한 유사한 게시물을 보려면 여기를 참조하십시오. jQuery로 다단계 양식 재설정

또한 struts 값 스택에 의해 값이 다시 채워지는 문제가 발생할 수 있습니다. 즉, 양식을 제출하고 조치 클래스에서 무엇이든 수행하지만 조치 클래스에서 관련 필드 값을 지우지 마십시오. 이 시나리오에서 양식은 이전에 제출 한 값을 유지하는 것처럼 보입니다. 어떤 식 으로든이를 지속하는 경우 지속 후 SUCCESS를 리턴하기 전에 조치 클래스의 각 필드 값을 널 (null)하십시오.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.