Hướng dẫn how to download html

Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)

Tạo một liên kết tải về trong HTML thì đơn giản; thêm một thẻ liên kết và trỏ đến tập tin trong thuộc tính href. Tuy nhiên, một số loại tập tin, (chẳng hạn như hình ảnh, .pdf, .txt và .doc) sẽ không tải về được. Thay vào đó, chúng sẽ được mở ra trong trình duyệt.

Nếu bạn có khả năng truy xuất đến máy chủ chứa trang web của bạn thì có một số giải pháp mà bạn có thể sử dụng, chẳng hạn như cấu hình .htaccess, để trực tiếp tải về các tập tin. Nếu trang web của bạn được lưu trữ với một dịch vụ miễn phí như WordPress.com, Blogspot, hoặc có thể Github Pages mà không cho phép bạn làm như vậy, thì hãy xem xét sử dụng thuộc tính download.

Sử dụng thuộc tính "Download"

Thuộc tính download là một phần của HTML5 và thể hiện một liên kết tải về chứ không phải là một liên kết điều hướng.

Thuộc tính download cũng cho phép bạn đổi tên của tập tin sau khi tải về. Khi tập tin nằm trên máy chủ, đặc biệt là nếu nó được tự động tạo ra, nó có thể được đặt tên theo hệ thống và dấu gạch ngang, ví dụ: acme-doc-2.0.1.txt. Sẽ tốt hơn nếu để cho người dùng nhận được các tập tin với một tên hợp lý hơn khi tải về, có thể như: Acme Documentation (ver.2.0.1).txt (đừng quên phần mở rộng tập tin).

Cụ thể:

<a href="download/acme-doc-2.0.1.txt" download="Acme Documentation (ver. 2.0.1).txt">Download Text</a>

Hãy thử trang demo, và bạn thấy tập tin được tải xuống có tên được chỉ định trong thuộc tính download.

Một số lưu ý:

• Firefox chỉ cho phép người dùng tải về các tập tin của cùng một nguồn do vấn đề bảo mật. Tập tin phải đến từ máy chủ hoặc tên miền riêng của bạn, nếu không nó sẽ được mở ra trong trình duyệt.
• Mặc dù việc tải về tập tin khác nguồn được cho phép trong Chrome và Opera mới nhất (với Chromium/Blink), nhưng chúng sẽ đều bỏ qua giá trị của thuộc tính. Nói cách khác, tên tập tin sẽ vẫn được giữ nguyên.

Phương án dự phòng

Tại thời điểm bài viết, thuộc tính download vẫn chưa cài đặt trong trình duyệt Safari và (như bạn kỳ vọng) Internet Explorer. Tuy vậy, theo trạng thái hiện đại của IE, nó đang ở trên danh sách phát triển ưu tiên và nhận được nhiều yêu cầu.

Trong lúc chờ đợi, chúng ta có thể thêm một phương án dự phòng, chẳng hạn như cung cấp thêm các hướng dẫn bên dưới liên kết tải về trong trình duyệt không hỗ trợ. Để làm như vậy, chúng ta sẽ cần phải tải về Modernizr và bao gồm kiểm tra tính năng download.

Sau đó, chúng ta có thể thêm các mã sau đây.

if ( ! Modernizr.adownload ) {
  var $link = $('a');

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

	});
}

Đoạn mã sẽ kiểm tra xem trình duyệt có hỗ trợ các thuộc tính download hay không; Nếu không nó sẽ thêm một <div> mới với các lớp cho mục đích trang trí cũng như các dòng chữ hướng dẫn, và chèn nó ngay phía dưới bất kỳ liên kết đã được trang bị thuộc tính download.

Tổng kết

Các thuộc tính download làm cho việc xử lý các liên kết tải về rất thuận tiện cho những ai đã có quyền truy cập cấu hình trên máy chủ. Tôi mong rằng Internet Explorer và Safari sẽ sớm cài đặt thuộc tính download!