JavaScript로 파일 다운로드 시작

JavaScript로 파일 다운로드 시작

---

내 사이트에 파일에 대한 다운로드 링크가 있다고 가정 해 보겠습니다.

이 링크를 클릭하면 파일 위치와 함께 URL을 반환하는 서버에 AJAX 요청을 보냅니다.

내가 원하는 것은 응답이 돌아올 때 브라우저가 파일을 다운로드하도록 지시하는 것입니다. 이를 수행하는 휴대용 방법이 있습니까?

---

이 lib https://github.com/PixelsCommander/Download-File-JS를 사용해보십시오. "download"속성과 방법 조합을 사용하여 최상의 경험을 제공하기 때문에 이전에 설명한 모든 솔루션보다 더 현대적입니다.

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

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

---

우리는 그렇게합니다. 먼저이 스크립트를 추가합니다.

<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>

'download.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 파일 다운로드 플러그인 ( 예제가 포함 된 데모 ) ( GitHub )을 만들었습니다. iframe과 매우 유사하게 작동하지만 매우 편리한 몇 가지 멋진 기능이 있습니다.

• 사용자는 파일 다운로드를 시작한 동일한 페이지를 떠나지 않습니다. 이 기능은 최신 웹 애플리케이션에서 중요 해지고 있습니다.
• 테스트 된 크로스 브라우저 지원 (모바일 포함!)
• jQuery의 AJAX API와 유사한 방식으로 POST 및 GET 요청을 지원합니다.
• successCallback 및 failCallback 함수를 사용하면 두 상황에서 사용자가 보는 것에 대해 명시 적으로 지정할 수 있습니다.
• jQuery UI와 함께 개발자는 사용자에게 파일 다운로드가 발생하고 있음을 알리는 모달을 쉽게 표시하거나 다운로드가 시작된 후 모달을 해체하거나 오류가 발생했음을 사용자에게 알릴 수 있습니다. 이에 대한 예는 데모를 참조하십시오.

---

답변 읽기-허용되는 답변을 포함하여 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

이렇게하면 모든 브라우저가 파일을 다운로드하고 브라우저 창에서 렌더링하지 않습니다.

---

window.location.href = new_url자바 스크립트에서 호출 하면 사용자가 주소 표시 줄에 입력 한 URL로 브라우저가 리디렉션됩니다.

---

A는 maxnk에서 언급 한 방법에 동의하지만 브라우저가 URL을 자동으로 다운로드하도록 재검토 할 수 있습니다. 바이너리 파일에서는 잘 작동 할 수 있지만 다른 유형의 파일 (텍스트, PDF, 이미지, 비디오)의 경우 브라우저가 디스크에 저장하지 않고 창 (또는 IFRAME)에서 렌더링 할 수 있습니다.

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

---

가장 많이 뽑힌 답변의 보안 결함을 해결하려면 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로 src를 설정하는 것이 좋습니다. 페이지를 다시로드하지 않고 다운로드가 시작됩니다.

Or you can just set the current document.location.href to received url address. But that's can cause for user to see an error if the requested document actually does not exists.

---

In relation to the top answer I have a possible solution to the security risk.

<?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']);
         }
     }
?>

Using the glob() function (I tested the download file in a path one folder up from the file to be downloaded) I was able to make a quick array of files that are "allowed" to be downloaded and checked the passed path against it. Not only does this insure that the file being grabbed isn't something sensitive but also checks on the files existence at the same time.

~Note: Javascript / HTML~

HTML:

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

and

<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>

---

I'd suggest window.open() to open a popup window. If it's a download, there will be no window and you will get your file. If there is a 404 or something, the user will see it in a new window (hence, their work will not be bothered, but they will still get an error message).

---

Why are you making server side stuff when all you need is to redirect browser to different window.location.href?

Here is code that parses ?file= QueryString (taken from this question) and redirects user to that address in 1 second (works for me even on Android browsers):

<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>

If you have jQuery in your project definitely remove those window.onpopstate & window.onload handlers and do everything in $(document).ready(function () { } );

ReferenceURL : https://stackoverflow.com/questions/365777/starting-file-download-with-javascript