JavaScript를 사용하여 파일 다운로드 시작

JavaScript를 사용하여 파일 다운로드 시작

사이트에 파일 다운로드 링크가 있다고 칩시다.

이 링크를 클릭하면 서버에 AJAX 요청이 전송되고 서버에 파일 위치가 포함된 URL이 반환됩니다.

제가 원하는 것은 응답이 돌아왔을 때 브라우저에 파일을 다운로드하도록 지시하는 것입니다.휴대할 수 있는 방법이 있나요?

먼저 이 스크립트를 추가합니다.

<script type="text/javascript">
function populateIframe(id,path) 
{
    var ifrm = document.getElementById(id);
    ifrm.src = "download.php?path="+path;
}
</script>

다운로드 버튼(여기에서는 링크만 사용)을 원하는 위치에 배치합니다.

<iframe id="frame1" style="display:none"></iframe>
<a href="javascript:populateIframe('frame1','<?php echo $path; ?>')">download</a>

파일 '다운로드'php' (서버에 저장해야 할 파일)에는 다음과 같은 내용이 포함되어 있습니다.

<?php 
   header("Content-Type: application/octet-stream");
   header("Content-Disposition: attachment; filename=".$_GET['path']);
   readfile($_GET['path']);
?>

따라서 링크를 클릭하면 숨겨진 iframe이 소스 파일 'download.php'를 가져오거나 엽니다.경로를 get 매개 변수로 지정합니다.이것이 최선의 해결책이라고 생각합니다!

이 솔루션의 PHP 부분은 단순한 데모이며 잠재적으로 매우 안전하지 않습니다.사용자는 사전 정의된 세트뿐만 아니라 모든 파일을 다운로드할 수 있습니다.즉, 사이트 자체의 소스 코드 일부를 다운로드 할 수 있으며 API 자격 증명 등이 포함되어 있을 수 있습니다.

오픈 소스 jQuery File Download 플러그인(Demo with example)(GitHub)을 작성했습니다.iframe과 거의 비슷하게 동작하지만, 매우 편리한 기능을 가지고 있습니다.

• 사용자는 파일 다운로드를 시작한 페이지와 동일한 페이지를 떠나지 않습니다.이 기능은 현대의 웹 어플리케이션에서 중요해지고 있습니다.
• 크로스 브라우저 지원 테스트 완료(모바일 포함)
• jQuery의 AJAX API와 유사한 방법으로 POST 및 GET 요청을 지원합니다.
• success Callback 및 fail Callback 함수를 사용하면 사용자가 어떤 상황에서 무엇을 볼 수 있는지 명확하게 알 수 있습니다.
• jQuery UI와 함께 개발자는 파일 다운로드가 발생하고 있음을 사용자에게 알리는 모드를 쉽게 보여주거나 다운로드 시작 후 해당 모드를 해체하거나 사용자에게 오류가 발생했음을 알릴 수 있습니다.이 예에 대해서는, 데모를 참조해 주세요.

전화하세요.window.location.href = new_url 표시줄에.

답변 읽기 - 승인된 답변을 포함하여 GET을 통해 readfile에 직접 경로를 전달하는 것이 보안에 미치는 영향을 지적하고 싶습니다.

당연한 것처럼 보이는 사람도 있지만, 이 코드를 간단하게 복사/붙여 넣는 사람도 있습니다.

<?php 
   header("Content-Type: application/octet-stream");
   header("Content-Disposition: attachment; filename=".$_GET['path']);
   readfile($_GET['path']);
?>

이 스크립트에 '/path/to/fileWithSecrets'와 같은 것을 전달하면 어떻게 됩니까?지정된 스크립트는 웹 서버 사용자가 액세스할 수 있는 모든 파일을 전송합니다.

이것을 방지하는 방법에 대해서는, 다음의 설명을 참조해 주세요.파일 경로가 지정된 서브 디렉토리 내에 있는지 확인하려면 어떻게 해야 합니까?

만약 이것이 당신의 서버 어플리케이션이라면, 나는 다음 헤더를 사용할 것을 제안합니다.

Content-disposition: attachment; filename=fname.ext

그러면 브라우저가 파일을 강제로 다운로드하고 브라우저 창에 렌더링하지 않습니다.

이 lib https://github.com/PixelsCommander/Download-File-JS 를 사용해 주세요.이것은, 「솔루션」속성과 메서드의 편성을 사용하고 있기 때문에, 지금까지 설명한 모든 솔루션보다 모던합니다.

여기서 설명 - http://pixelscommander.com/en/javascript/javascript-file-downliading-ignore-content-type/

JavaScript에서 다운로드를 시작하기 위한 이상적인 코드 조각인 것 같습니다.

A는 maxnk에서 언급한 방법에 동의하지만 브라우저가 URL을 자동으로 다운로드하도록 시도하는 것을 재고해 볼 수 있습니다.바이너리 파일에서는 정상적으로 동작할 수 있지만, 그 외의 파일 타입(텍스트, PDF, 이미지, 비디오)에서는, 브라우저가 디스크에 보존하는 대신에, 윈도우(또는 IFRAME)로 렌더링 하는 것이 바람직할 가능성이 있습니다.

최종 다운로드 링크를 얻기 위해 Ajax 호출을 해야 하는 경우 DHTML을 사용하여 다운로드 링크를 페이지에 동적으로 쓰는 것은 어떻습니까?그러면 사용자가 다운로드(바이너리인 경우)하거나 브라우저에서 볼 수 있고 링크에서 "다른 이름으로 저장"을 선택하여 디스크에 저장할 수 있습니다.추가 클릭이지만 사용자가 더 많이 제어할 수 있습니다.

최상위 응답의 보안 결함을 피하기 위해 iframe src를 (중간 php 파일이 아닌) 원하는 파일로 직접 설정하고 헤더 정보를 .htaccess 파일로 설정합니다.

<Files *.apk>
     ForceType application/force-download
     Header set Content-Disposition attachment
     Header set Content-Type application/vnd.android.package-archive
     Header set Content-Transfer-Encoding binary
</Files>

페이지에 보이지 않는 iframe을 만들어 서버로부터 받은 URL로 설정하는 것이 좋습니다.다운로드가 페이지 새로고침 없이 시작됩니다.

또는 현재 document.location만 설정할 수 있습니다.href: 수신된 URL 주소그러나 요청된 문서가 실제로 존재하지 않으면 사용자에게 오류가 나타날 수 있습니다.

상위 답변과 관련하여 보안 위험에 대한 가능한 해결책을 가지고 있습니다.

<?php
     if(isset($_GET['path'])){
         if(in_array($_GET['path'], glob("*/*.*"))){
             header("Content-Type: application/octet-stream");
             header("Content-Disposition: attachment; filename=".$_GET['path']);
             readfile($_GET['path']);
         }
     }
?>

glob() 함수를 사용하여 (다운로드되는 파일보다 한 폴더 위의 경로에서 다운로드 파일을 테스트했습니다) 다운로드가 허용된 파일의 빠른 배열을 만들고 패스 경로를 확인할 수 있었습니다.이렇게 하면 캡처되는 파일이 중요한 것이 아니라 파일의 존재 여부도 동시에 확인할 수 있습니다.

~주의: Javascript / HTML~

HTML:

<iframe id="download" style="display:none"></iframe>

그리고.

<input type="submit" value="Download" onclick="ChangeSource('document_path');return false;">

JavaScript:

<script type="text/javascript">
    <!--
        function ChangeSource(path){
            document.getElementByID('download').src = 'path_to_php?path=' + document_path;
        }
    -->
</script>

권하고 싶다window.open()팝업 창을 엽니다.다운로드의 경우 창이 표시되지 않고 파일을 가져옵니다.404 같은 것이 있는 경우는, 유저에게 새로운 창에 표시됩니다(따라서, 작업은 방해받지 않습니다만, 에러 메세지는 계속 표시됩니다).

브라우저를 다른 window.location.href로 리다이렉트만 하면 되는데 왜 서버측을 만드는 거죠?

다음은 file= QueryString(이 질문에서 가져온)을 구문 분석하고 사용자를 1초 만에 해당 주소로 리디렉션하는 코드입니다(안드로이드 브라우저에서도 작동).

<script type="text/javascript">
    var urlParams;
    (window.onpopstate = function () {
        var match,
        pl = /\+/g,  // Regex for replacing addition symbol with a space
        search = /([^&=]+)=?([^&]*)/g,
        decode = function (s) { return decodeURIComponent(s.replace(pl, " ")); },
        query = window.location.search.substring(1);

        urlParams = {};
        while (match = search.exec(query))
            urlParams[decode(match[1])] = decode(match[2]);
    })();

    (window.onload = function() {
        var path = urlParams["file"];
        setTimeout(function() { document.location.href = path; }, 1000);
    });
</script>

프로젝트에 jQuery가 있는 경우 해당 window.onpopstate & window.onload 핸들러를 삭제하고 $(문서)로 모든 작업을 수행합니다.ready(기능) { } ;

언급URL : https://stackoverflow.com/questions/365777/starting-file-download-with-javascript