HTML5의 다운로드 속성에 대한 자세한 소개-H5 튜토리얼-php.cn

HTML5의 다운로드 속성에 대한 자세한 소개

零下一度

풀어 주다： 2017-05-25 11:49:20

원래의

3471명이 탐색했습니다.

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

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

"다운로드" 속성 사용
다운로드 속성은 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>

로그인 후 복사

2016512105929566.jpg (600×151)

예 가져가세요 이 데모 주소를 살펴보세요: http://tutsplus.github.io/download-attribute/index.html

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

백업 계획 제공:
이 글을 쓰는 시점에는 Safari와 IE에서는 다운로드 속성이 구현되지 않았지만 IE는 다운로드 속성 구현이 이미 구현되어 있다고 주장합니다. 개발 의제의 최상위에 있습니다.
2016512105956946.jpg (600×340)

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

2016512110024606.jpg (600×380)

그런 다음 다음 스크립트를 추가합니다.

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

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));   
        }   
    });   
}

로그인 후 복사

이 스크립트는 브라우저가 다운로드 속성을 지원하는지 테스트하는 것입니다. 브라우저가 이를 지원하지 않으면 다운로드 시 그런 다음 다운로드 지침 클래스와 함께
태그를 삽입하고 마우스 오른쪽 버튼을 클릭하여 다운로드할 텍스트 지침을 제공합니다.

[관련 추천]
1.
무료 h5 온라인 동영상 튜토리얼

HTML5에 대한 자세한 설명 새로운 양식 속성
3.
php.cn 원본 html5 비디오 튜토리얼
4.
HTML5의 classList 속성
위 내용은 HTML5의 다운로드 속성에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!