집 >웹 프론트엔드 >H5 튜토리얼 >HTML5에서 필수 다운로드 속성 다운로드 사용

HTML5에서 필수 다운로드 속성 다운로드 사용

不言원래의: 2018-06-05 16:10:459409검색

링크에 다운로드 속성을 추가하면 사용자가 브라우저에서 직접 파일을 열지 않고 파일을 다운로드할 수 있습니다. 지금까지 HTML5를 지원하는 브라우저는 이 속성을 비교적 잘 지원했습니다. 아래에서 HTML5의 예시 분석을 살펴보겠습니다. 강제 다운로드 속성 다운로드 사용:

HTML5의 다운로드 속성은 브라우저가 해당 파일을 열지 않고 강제로 다운로드하도록 하는 데 사용됩니다. Chrome 및 Firefox와 같은 브라우저는 사용자 경험을 향상시키기에는 너무 강력합니다. 사용자가 클릭한 리소스 파일을 인식할 수 있는 경우(예: PDF는 브라우저에서 직접 열리고 mp3 및 mp4와 같은 미디어는 브라우저 내에서 직접 재생됩니다) 플레이어 재생). 그러나 때로는 사용자가 실제로 브라우저에서 보는 대신 직접 다운로드하기를 원할 수도 있습니다. 이 경우 이 속성을 추가하면 속성 값이 다운로드된 파일의 이름을 바꿀 수 있습니다.
384a6547de034985f0e1e42a23500a81직접 다운로드하여 download.pdf 파일로 저장하려면 클릭하세요5db79b134e9f6b82c0b36e0489ee08ed
사용자가 이 리소스를 확실히 다운로드할 것이라고 확신하는 경우 이 속성을 추가할 수 있으며, JS 또는 수동으로 변경하십시오. 저장하려는 파일의 이름입니다.
HTML로 다운로드 링크를 생성하는 것이 편리합니다. 3499910bf9dac5ae3c52d5ede7383485 태그와 파일을 가리키는 href 속성을 추가하기만 하면 됩니다. 하지만 일부 파일(예: 이미지, pdf, txt, doc)은 다운로드되지 않고 대신 브라우저에서 열립니다.
사이트가 서버측인 경우 .htaccess 파일을 구성하여 해당 파일을 다운로드할 수 있도록 할 수 있습니다. 사이트가 WordPress.com 또는 github 페이지(정적 페이지)에서 호스팅되는 경우 3499910bf9dac5ae3c52d5ede7383485 태그의 다운로드 속성을 사용하는 것을 고려하세요

"다운로드" 속성을 사용하세요
다운로드 속성은 HTML5 사양의 일부입니다. , 탐색 링크가 아닌 다운로드 링크로 나타납니다.
다운로드 속성을 사용하면 다운로드해야 하는 파일의 이름을 바꿀 수도 있습니다. 예를 들어 파일이 서버에 저장되면 파일이 자동으로 생성되는 경우 일반적으로 acme-doc-2.0.1.txt와 같이 시스템 번호와 대시의 조합으로 이름을 바꿀 수 있습니다. 다운로드 후 사용자에게 표시되는 파일 이름은 이와 같은 사용자 경험을 향상시키기 위해 Acme Documentation(ver. 2.0.1).txt와 같은 더 나은 이름이 될 수 있습니다(파일 확장자를 잊지 마십시오).

XML/HTML 코드콘텐츠를 클립보드에 복사

<a href="downloadpdf.php" download="download.pdf">点击直接下载并保存成 download.pdf 文件</a>[object Object]

이 데모 주소를 살펴볼 수 있습니다: http://tutsplus.github.io/download-attribute/index.html

Some 참고:
Firefox는 보안 문제를 고려하므로 다운로드한 파일은 자체 서버 또는 도메인 이름에서 가져와야 합니다. 그렇지 않으면 브라우저에서 열립니다.
Chrome 및 Opear에서 다운로드한 파일이 서버 또는 도메인 이름의 하위 집합에 없으면 이러한 브라우저는 다운로드 속성을 무시합니다. 즉, 파일 이름이 변경되지 않습니다.

대체 계획 제공:
이 기사를 작성할 당시 Safari 및 IE에서는 다운로드 속성이 구현되지 않았지만 IE에서는 다운로드 속성 구현이 이미 개발 안건의 최우선 순위에 있다고 주장합니다.
2016512105956946.jpg (600×340)

그동안 해당 브라우저와 호환되도록 대체 솔루션을 사용할 수 있습니다. Modernizr의 다운로드 속성 기능 테스트를 다운로드해야 합니다.
2016512110024606.jpg (600×380)

그런 다음 다음 스크립트를 추가하세요.

JavaScript Code클립보드에 콘텐츠 복사

if ( ! Modernizr.adownload ) {   
    var $link = $(&#39;a&#39;);   
    $link.each(function() {   
        var $download = $(this).attr(&#39;download&#39;);   
        if (typeof $download !== typeof undefined && $download !== false) {   
      var $el = $(&#39;<p>&#39;).addClass(&#39;download-instruction&#39;).text(&#39;Right-click and select "Download Linked File"&#39;);   
      $el.insertAfter($(this));   
        }   
    });   
}

이 스크립트는 브라우저가 다운로드 속성을 지원하는지 테스트하는 것입니다. 다운로드 속성이 있는 3499910bf9dac5ae3c52d5ede7383485 태그 아래에 다운로드 지침 클래스가 있는 e388a4556c0f65e1904146cc1a846bee 태그를 삽입하고 마우스 오른쪽 버튼을 클릭하여 다운로드하라는 텍스트 지침을 제공합니다.
2016512110040425.jpg (600×380)

HTML5에서 필수 다운로드 속성 다운로드 사용

관련 기사