Tải xuống tệp là một khía cạnh thiết yếu của việc lướt internet. Hàng tấn tệp được tải xuống từ internet mỗi ngày, từ tệp nhị phân [chẳng hạn như ứng dụng, hình ảnh, video và âm thanh] đến tệp văn bản thuần túy
Nếu bạn có một nhà phát triển web và bạn muốn thêm tính năng này vào ứng dụng của mình, đây là cách bạn có thể thực hiện
Chúng tôi sẽ kiểm tra 3 cách tiếp cận khác nhau
- chế độ cơ bản chỉ sử dụng các phần tử HTML;
- sử dụng JavaScript với Fetch API và các phần tử HTML;
- sử dụng các phần tử XMLHttpRequest và HTML, nhưng trong một kịch bản phức tạp hơn, trong đó chúng tôi triển khai một hệ thống để đo lường tiến trình;
Phương pháp đầu tiên và đơn giản nhất ngụ ý tạo một phần tử HTML neo có thuộc tính download
Theo định nghĩa, thuộc tính download
chỉ định rằng mục tiêu [tệp được chỉ định trong thuộc tính href
] sẽ được tải xuống khi người dùng nhấp vào siêu liên kết
Ngoài ra với thuộc tính download
này, chúng ta có thể chỉ định tên mới của tệp sau khi tải xuống. Do đó, nếu chúng tôi muốn tải xuống tệp có tên cụ thể, chúng tôi có thể kiểm soát điều này bằng thuộc tính này. Tuy nhiên, người dùng vẫn có thể thay đổi tên khi cửa sổ tải xuống gốc xuất hiện nhưng tên chúng tôi cung cấp sẽ là tên mặc định
Nếu giá trị bị bỏ qua, tên tệp gốc được sử dụng
NGUYÊN
Phương pháp này rất tuyệt khi chúng ta không cần thực hiện bất kỳ hành động nào dựa trên quá trình tải xuống này
Đồng thời, chúng tôi có thể sử dụng phương pháp này mặc dù chúng tôi không thể hiển thị phần tử HTML neo, sử dụng JavaScript
NGUYÊN
Chức năng trên cũng giống như vậy, chỉ là chúng ta tạo Phần tử HTML neo một cách nhanh chóng, chỉ cho hành động tải xuống này và sau đó chúng ta xóa nó
IMG_URL
là URL của hình ảnh chúng tôi muốn tải xuống;FILE_NAME
là tên mới của tệp sau khi được tải xuống;
Hạn chế của phương pháp này là nó phải tôn trọng chính sách cùng nguồn gốc, do đó thuộc tính này hoạt động bình thường đối với các URL có cùng nguồn gốc
Một tình huống phổ biến là khi bạn muốn tải xuống một hình ảnh từ một máy chủ khác và thay vì tải xuống, trình duyệt sẽ mở nó trong một tab mới
Khía cạnh quan trọng của phương pháp này là quá trình tải xuống sẽ tự động bắt đầu và có thể được xem nguyên bản trong trình duyệt
Lưu ý trong hình trên cách quá trình tải xuống được gửi tới trình duyệt để quản lý nó và trình duyệt cung cấp quyền kiểm soát và hiển thị tiến trình
Phương pháp II
Phương thức thứ hai và phương thức thứ ba sử dụng cùng một kỹ thuật với phần tử neo, nhưng thay vì cung cấp URL hình ảnh, chúng tôi chuyển đổi nội dung của tệp thành Blob và sau đó chúng tôi tạo DOMString từ nó bằng phương thức createObjectURL
NGUYÊN
Lưu ý rằng ở phần cuối, chúng tôi đã sử dụng URL.revokeObjectURL
, điều này rất quan trọng về mặt quản lý bộ nhớ. Khi sử dụng URL.createObjectURL
, một URL đối tượng mới được tạo, ngay cả khi nó được gọi với cùng một đối tượng blob
Bất cứ khi nào một URL đối tượng được tạo, nó sẽ tồn tại trong suốt thời gian tồn tại của tài liệu mà nó được tạo. Trình duyệt sẽ giải phóng tất cả các URL đối tượng khi tài liệu đang được dỡ xuống. Tuy nhiên, điều quan trọng là bạn giải phóng các URL đối tượng bất cứ khi nào chúng không còn cần thiết để cải thiện hiệu suất và giảm thiểu việc sử dụng bộ nhớ
Khía cạnh quan trọng của phương pháp này là quá trình tải xuống sẽ tự động bắt đầu, nhưng trong ứng dụng của chúng tôi và sẽ chỉ được chuyển đến trình duyệt khi quá trình tải xuống hoàn tất
Lưu ý trong GIF ở trên rằng khi chúng tôi nhấp vào nút Tải xuống, dường như không có gì xảy ra vì quá trình tải xuống diễn ra như một tác vụ không đồng bộ trong ứng dụng của chúng tôi và sau khi hoàn tất, nó sẽ được chuyển đến trình duyệt
Khi cửa sổ trình duyệt đó xuất hiện và chúng tôi nhấp vào lưu, tệp sẽ tự động được lưu trên máy tính của chúng tôi
Với phương pháp này, giờ đây chúng tôi có thể tải xuống bất kỳ loại tệp nào bất kể máy chủ gốc. Tuy nhiên, vấn đề là do quá trình tải xuống diễn ra bên trong ứng dụng của chúng tôi, người dùng có thể nghĩ rằng không có gì xảy ra khi anh ấy nhấp vào và do đó chúng tôi phải quản lý việc tải xuống tệp lớn bằng cách triển khai đo lường tiến trình
Đồng thời, phương pháp này rất hữu ích khi chúng ta cần thực hiện một số hành động nhất định bên trong ứng dụng của mình sau khi tệp đã tải xuống xong. Hiển thị thông báo, gửi yêu cầu đến back-end hiển thị trang mới, v.v.
Phương pháp III
Phương thức thứ ba tương tự như phương thức thứ hai, chúng ta vẫn sẽ sử dụng Blob và createObjectURL, nhưng thay vì sử dụng Fetch API, chúng ta sẽ sử dụng XMLHttpRequest
Chúng tôi đang sử dụng XMLHttpRequest thay vì Tìm nạp vì tại thời điểm nói API Tìm nạp không cung cấp giao diện để đo lường tiến độ, trong khi XMLHttpRequest thì có
NGUYÊN
Khối đầu và khối onreadystatechange
tương tự như chức năng thứ hai. Tải xuống phản hồi dưới dạng đối tượng Blob, tạo DOMString và sử dụng phần tử neo để tải xuống tệp
Bên trong_______9_______, chúng tôi sử dụng các giá trị download
0 và download
1 để tính toán tiến độ theo tỷ lệ phần trăm và thời gian đã trôi qua, cũng như tốc độ tải xuống và thời gian còn lại
Lưu ý trong GIF ở trên rằng chúng tôi có hành vi tương tự như đối với phương pháp thứ hai, chỉ bây giờ chúng tôi mới có thể theo dõi tiến trình. Sau khi tệp được tải xuống hoàn toàn, tệp sẽ được gửi đến trình duyệt và sau đó tệp sẽ được lưu ngay lập tức vào đĩa
Gói [lạiMỗi phương pháp trên đại diện cho một bản cập nhật so với phương pháp trước đó
Phương pháp đầu tiên là dễ nhất. Trong trường hợp này, chúng tôi chỉ cần chuyển tiếp quá trình tải xuống tới trình duyệt để quản lý nó một cách tự nhiên. Phương pháp này là cách ưa thích khi ứng dụng không phải thực hiện một số hành động nhất định dựa trên trạng thái tải
Trong lần thứ hai, chúng tôi quản lý nội bộ tải xuống và chỉ gửi nó tới trình duyệt khi quá trình tải xuống hoàn tất. Bằng cách này, chúng tôi có thể kiểm soát quá trình tải xuống bên trong ứng dụng và chúng tôi có thể phản ứng tùy thuộc vào trạng thái của nó. Phương pháp này hoạt động tốt đối với các tệp nhỏ được tải xuống nhanh chóng, nhưng khi tệp quá lớn, người dùng có thể nghĩ rằng ứng dụng bị lỗi, nếu không có gì xảy ra trên giao diện người dùng để cho người dùng biết rằng quá trình tải xuống đang diễn ra
Trong phương pháp cuối cùng, chúng tôi thực hiện phép đo tiến trình của riêng mình, tương tự như trong trình duyệt