HTML : HTML5 Download Attribute : 방법, 구현, 예제

 

HTML : HTML5 Download Attribute : 방법, 구현, 예제

 

다운로드 속성을 사용하는 HTML5 기능을 살펴 보겠습니다. 다운로드 속성은 링크하는 파일을 다운로드하도록 브라우저에 알리는 방법으로, 미디어 파일 또는 PDF 문서 또는 웹 페이지 등이 될 수 있습니다. 이것은 서버 측 코드와 관련이 있습니다. 예를 들어 force-download.php의 서버 측 파일에 연결하고 다운로드하려는 파일의 인수를 전달합니다.

<a href="force-download.php?file=download-webpage.html">Download Webpage HTML</a>

 

 

그런 다음 서버 측에서 요청 된 파일의 내용을 가져와 브라우저가 이와 같은 작업을 수행하여 내용을 다운로드하도록 해야 합니다. 

function downloadFile($file){
    $file_name = $file;
    $mime = 'application/force-download';
    header('Pragma: public');   // required
    header('Expires: 0');       // no cache
    header('Cache-Control: must-revalidate, post-check=0, pre-check=0');
    header('Cache-Control: private',false);
    header('Content-Type: '.$mime);
    header('Content-Disposition: attachment; filename="'.basename($file_name).'"');
    header('Content-Transfer-Encoding: binary');
    header('Connection: close');
    readfile($file_name);
    exit();
}

 

이제 이 단계를 사용하지 않고, 링크에서 다운로드 속성을 사용할 수 있습니다. 

<a href="download-webpage.html" download>Download Webpage HTML</a>

 

현재 모든 브라우저에서 다운로드 속성을 지원하지는 않습니다. 현재 Chrome, Firefox 및 Opera는 다른 브라우저가 이 링크를 다른 링크로 취급하는 속성만 지원합니다.

따라서 브라우저에서 문서 또는 미디어 파일을 열지만 이 새로운 속성을 지원하는 브라우저를 사용하면 사용자 컴퓨터에서 링크중인 파일을 다운로드합니다. 다운로드 속성의 현재 지원 브라우저의 최신 버전을 확인하는 것을 추천합니다.

다운로드 속성에 대한 브라우저 지원 다운로드 속성을 사용하여 영수증과 같은 것을 하드 카피로 사용하려는 경우 PDF 문서와 같은 항목에 유용합니다. 브라우저에서 열지 않고 사용자가 직접 다운로드하도록 할 수 있습니다. 다음 예제와 같이 다운로드 속성에 값을 추가하여 다운로드중인 파일의 이름을 변경할 수도 있습니다. 

<a href="some-random-generated-filename.pdf" download="invoice.pdf">Download Invoice</a>