Tạo link download trong html

post-promotion-placement#checkSidebarAdDisplayCondition" data-controller="scroll-position sticky-ad post-promotion-placement ">
scroll-to-target-tracking#onClick" data-label="Scroll to top" data-target-selector="#page-body"> Scroll to đứng top

Thoriq Firdaus Apr 27, năm ngoái
Read Time: 2 mins url-selector#selectionChanged"> English Español Français Bahasa Indonesia Italiano 日本語 Nederlands Português Pусский tiếng Việt

Creating a tải về link in HTML is straightforward; add an anchor tag & point to the tệp tin within the href attribute. Some file types, however, won’t be downloaded. They, instead, will be opened in the browser. In this case consider using the “download” attribute.

Bạn đang xem: Tạo link download trong html

If you have server-side access khổng lồ your trang web there are some workarounds you can use, such as configuring the .htaccess, to tải về these files directly. If your site is hosted with a không tính tiền service like WordPress.com, Blogspot, or perhaps Github pages which don’t allow you to do so, consider using the download attribute.

Using the HTML5 download Attribute

The download attribute is part of the HTML5 spec và expresses a liên kết as download link rather than a navigational link.

The download attribute also allows you to lớn rename the file name upon downloading. When the tệp tin resides on the server, especially if it’s been automatically generated, it may be named systematically with numbers và dashes, for example acme-doc-2.0.1.txt. It would be better for users to lớn receive the file with a more sensible name when downloaded, perhaps like: Acme Documentation (ver. 2.0.1).txt (not forgetting the file extension).

Here’s how that would look in practice:

Download TextGive it a try on the kiểm tra page, & you should find the file downloaded with the name specified in the download attribute.

A Couple of Notes:While downloading cross-origin files is allowed in Chrome và the latest Opera (with Chromium/Blink), they will both ignore the attribute value. In other words, the file name will remain unchanged.

Xem thêm: Top 5 Items Dưỡng Da Mùa Đông Này Sẽ Giúp Các Nàng Luôn Rạng Ngời

Providing Fallback

The download attribute has not yet been implemented in (as you might expect) mạng internet Explorer, though it is supported by Edge.

browser support for the HTML5 tải về attribute, from caniuse.com

In order lớn make things bullet proof we can showroom a decent fallback, such as providing extra instructions below the download link for non-supporting browsers. To vị so, we will need to download Modernizr with the download feature demo included.

Configure Modernizr build.

Then we can showroom the following script.

if ( ! Modernizr.adownload ) var $link = $("a");$link.each(function() var $download = $(this).attr("download");if (typeof $download !== typeof undefined && $download !== false) var $el = $("
").addClass("download-instruction").text("Right-click và select "Download Linked File""); $el.insertAfter($(this)););The script will test whether the browser supports the download attribute; if not it will append a new
with the class for styling purposes as well as the instruction text, và insert it immediately below any liên kết which has been furnished with the download attribute.

The text instruction appears in Safari.

Wrapping Up

The HTML5 download attribute makes handling tải về links very convenient for anyone who has no access lớn server-side configuration. I’m looking forward to internet Explorer implementing the download attribute soon!