HTML로 다운로드 링크를 만들려면 어떻게해야합니까?

HTML에 대한 기본 아이디어가 있습니다. 샘플 웹 사이트에서 다운로드 링크를 만들고 싶지만 어떻게 만드는지 모르겠습니다. 방문하지 않고 파일을 다운로드 할 수있는 링크를 만들려면 어떻게합니까?

이 답변은 구식입니다. 이제 download속성이 있습니다. ( MDN에 대한 이 링크 참조 )

"다운로드 링크"가 다운로드 할 파일에 대한 링크를 의미하는 경우

  <a href="http://example.com/files/myfile.pdf" target="_blank">Download</a>

는 target=_blank다운로드가 시작되기 전에 새 브라우저 창이 나타나게됩니다. 이 창은 일반적으로 브라우저가 리소스가 파일 다운로드임을 감지하면 닫힙니다.

브라우저에 알려진 파일 형식 (예 : JPG 또는 GIF 이미지)은 일반적으로 브라우저 내에서 열립니다.

여기에 설명 된대로 올바른 헤더를 보내서 다운로드를 시도 할 수 있습니다 . (서버 측 스크립팅 또는 서버 설정 액세스가 필요합니다.)

HTML5를 지원하는 최신 브라우저에서는 다음이 가능합니다.

<a href="link/to/your/download/file" download>Download link</a>

이것을 사용할 수도 있습니다 :

<a href="link/to/your/download/file" download="filename">Download link</a>

이렇게하면 실제로 다운로드중인 파일의 이름을 변경할 수 있습니다.

<a download이미 언급 한 HTML5의 속성 에 추가하여 (또는 대체로)
, 브라우저의 디스크로 다운로드 동작은 다음 http 응답 헤더에 의해 트리거 될 수도 있습니다.

Content-Disposition: attachment; filename=ProposedFileName.txt;

이것은 HTML5 이전에 수행했던 방법이었습니다 (그리고 여전히 HTML5를 지원하는 브라우저에서 작동합니다).

다운로드 링크는 다운로드하려는 리소스에 대한 링크입니다. 다른 링크와 같은 방식으로 구성됩니다.

<a href="path to resource.name of file">Link</a>

<a href="files/installer.exe">Link to installer</a>

파일에 링크하려면 다른 페이지 링크와 동일하게 수행하십시오.

<a href="...">link text</a>

플러그인 (Windows + QuickTime = ugh)이 내장되어 있어도 강제로 다운로드하려면 htaccess / apache2.conf에서 사용할 수 있습니다.

AddType application/octet-stream EXTENSION

이 스레드는 아마도 고대에는 있지만, 로컬 파일의 경우 html5에서 작동합니다.

PDF의 경우 :

<p><a href="file:///........example.pdf" download target="_blank">test pdf</a></p>

그러면 새 창에서 pdf가 열리고 적어도 파이어 폭스에서 다운로드 할 수 있습니다. 다른 파일의 경우 파일 이름을 지정하십시오. 이미지와 음악의 경우 사이트와 동일한 디렉토리에 저장하려고합니다. 그래서 그것은 같을 것입니다

<p><a href="images/logo2.png" download>test pdf</a></p>

다운로드 속성은 IE에서 작동하지 않으며 "다운로드"를 완전히 무시합니다. href가 원격 사이트를 가리키는 경우 Firefox에서 다운로드가 작동하지 않습니다. 따라서 Odin의 예제는 Firefox 41.0.2에서 작동하지 않습니다.

여기에 도움이 될 수있는 미묘한 점이 하나 더 있습니다.

브라우저 내 재생 및 표시뿐만 아니라 순전히 다운로드 할 수있는 링크를 갖고 싶습니다. 새 다운로드 속성은 문제가 없지만 브라우저에서 파일을 재생하거나 파일을 표시하도록 강요하기 때문에 여전히 작동하지 않습니다.

그러나 이것은 URL의 파일 이름에 대한 확장자를 검사하는 것을 기반으로합니다! 동일한 파일을 두 가지 다른 방법으로 제공하기 때문에 서버의 확장자 매핑을 사용하지 않으려 고합니다. 따라서 다운로드의 경우 파일을이 확장명 매핑에 대해 불투명 한 이름으로 소프트 링크하고 파일을 가리킨 다음 다운로드의 이름 바꾸기 기능을 사용하여 이름을 수정하여 파일을 속일 수 있습니다.

<a target="_blank" download="realname.mp3" href="realname.UNKNOWN">Download it</a>
<a target="_blank" href="realname.mp3">Play it</a>

나는 끝에 더미 쿼리를 던지거나 확장 프로그램을 난독 처리하는 것이 효과가 있기를 바랐지만 슬프게도 그렇지 않습니다.

<a>HTML5 태그의 새로운 다운로드 속성

<a href="http://www.odin.com/form.pdf" download>Download Form</a>
또는
<a href="http://www.odin.com/form.pdf" download="Form">Download Form</a>

나는 모든 확장과 관련하여 선호되는 첫 번째 것을 선호합니다.

당신은 내 길을 따라 다양한 방법으로 다운로드 할 수 있습니다. '허용 팝업'권한으로 인해 파일이 다운로드되지 않을 수 있지만 환경에 따라 완벽하게 작동합니다.

<div className="col-6">
                    <a  download href="https://www.w3schools.com/images/myw3schoolsimage.jpg" >Test Download </a>
                </div>

또 다른 하나는 'X-Frame-Options'가 'sameorigin'으로 인해 실패합니다.

<a href="https://www.w3schools.com/images/myw3schoolsimage.jpg" download>
  <img src="https://www.w3schools.com/images/myw3schoolsimage.jpg" alt="W3Schools" width="104" height="142">
</a>

이렇게

<a href="www.yoursite.com/theThingYouWantToDownload">Link name</a>

사이트 example.com의 파일 name.jpg는 다음과 같습니다.

<a href="www.example.com/name.jpg">Image</a>

나는 늦었다는 것을 알고 있지만 이것은 검색 1 시간 후에 얻은 것입니다.

 <?php 
      $file = 'file.pdf';

    if (! file) {
        die('file not found'); //Or do something 
    } else {
       if(isset($_GET['file'])){  
        // Set headers
        header("Cache-Control: public");
        header("Content-Description: File Transfer");
        header("Content-Disposition: attachment; filename=$file");
        header("Content-Type: application/zip");
        header("Content-Transfer-Encoding: binary");
        // Read the file from disk
        readfile($file); }
    }

    ?>

그리고 다운로드 가능한 링크를 위해 나는 이것을했다.

<a href="index.php?file=file.pdf">Download PDF</a>