Để tải xuống bất kỳ loại tệp nào theo cách lập trình trong JavaScript, chúng ta có thể sử dụng một neo vô hình với thuộc tính
data:[][;base64],
6 . Khi thuộc tính data:[][;base64],
6 được đặt trên một neo, nó sẽ cố tải xuống tài nguyên tại thuộc tính data:[][;base64],
8
Các neo có thuộc tính tải xuốngĐã sao chép vào khay nhớ tạm. Sao chép
Bằng cách đặt giá trị cho thuộc tính
data:[][;base64],
6 , chúng tôi có thể chỉ định tên tùy chỉnh cho tệp đã tải xuốngTất nhiên, khi chúng tôi muốn tạo tệp để tải xuống nhanh chóng theo chương trình, chúng tôi không có sẵn tệp đó trên máy chủ, vì vậy không có URL để trỏ neo tới. Để tạo và tải xuống tệp theo chương trình, chúng tôi có thể sử dụng URL dữ liệu
URL dữ liệu là gì
URL dữ liệu là các URL có tiền tố là
data:[][;base64],
0 sơ đồ cho phép chúng tôi đưa các tệp nhỏ vào trong tài liệu. Chúng tôi sẽ sử dụng phương pháp này để tạo tài nguyên theo chương trình mà chúng tôi muốn tải xuống, trong ví dụ này là tệp JSON chứa dữ liệu cần thiết. URL dữ liệu có định dạng saudata:[][;base64],
Định dạng của URL dữ liệuĐã sao chép vào khay nhớ tạm. Sao chép
- _
1 là loại MIME, chẳng hạn nhưdata:[][;base64],
2 hoặcdata:[][;base64],
3. Trong trường hợp của chúng tôi, chúng tôi sẽ sử dụngdata:[][;base64],
4 cho các tệp văn bản thuần túy. Chúng tôi cũng sẽ cần đặt mã hóa ký tự thành UTF-8 để có định dạng mã hóa chính xácdata:[][;base64],
- Có một chuỗi
5 tùy chọn mà chúng ta có thể đặt trong trường hợp muốn nhúng dữ liệu nhị phân được mã hóa base64. Trong trường hợp của chúng tôi, chúng tôi có thể bỏ qua giá trị nàydata:[][;base64],
- Cuối cùng, chúng tôi có dữ liệu thực tế cho tệp. Để chuyển đổi dữ liệu thành chuỗi URI chính xác, chúng ta có thể sử dụng hàm
6 tích hợp sẵndata:[][;base64],
Điều này để lại cho chúng tôi những điều sau đây cho URL dữ liệu
'data:text/plain;charset=utf-8,' + encodeURIComponent[data]
URI dữ liệu cần thiết để xuất dữ liệu ở định dạng JSONĐã sao chép vào khay nhớ tạm. Sao chép
Tìm cách để cải thiện kỹ năng của bạn?
Tự động tạo liên kết tải xuống
Để sử dụng URL dữ liệu của chúng tôi, chúng tôi cũng cần tự động tạo một liên kết. Đối với điều này, chúng ta có thể sử dụng
data:[][;base64],
7. Điều này sẽ tạo một mỏ neo cho chúng tôi, trên đó chúng tôi có thể đặt các thuộc tính data:[][;base64],
8 và data:[][;base64],
6 tương ứng, sau đó nhấp vào liên kết theo chương trình để kích hoạt tải xuống. Với mọi thứ được kết hợp, chúng ta có thể sử dụng chức năng sau để tải xuống tệp JSON được tạo theo chương trìnhdata:[][;base64],
1 tải xuống. js Tạo chức năng tải xuống để tải tệp xuốngĐã sao chép vào khay nhớ tạm. Sao chép
Hàm này chấp nhận một đối tượng JavaScript sẽ được chuyển đổi thành JSON. Nó cũng có thể tùy chọn chấp nhận tên tệp làm tham số thứ hai. Khi liên kết được tạo, chúng ta có thể đặt các thuộc tính thích hợp cho liên kết đó bằng phương pháp
'data:text/plain;charset=utf-8,' + encodeURIComponent[data]
0. Chúng tôi cũng muốn đặt thuộc tính 'data:text/plain;charset=utf-8,' + encodeURIComponent[data]
1 của nó thành 'data:text/plain;charset=utf-8,' + encodeURIComponent[data]
2, để ngăn liên kết hiển thị ở bất kỳ đâu trên trangSau khi tất cả các thuộc tính cần thiết có trên liên kết, chúng ta có thể nối phần tử đó vào tài liệu, sử dụng phương thức
'data:text/plain;charset=utf-8,' + encodeURIComponent[data]
3 và kích hoạt nhấp chuột vào liên kết để bắt đầu tải xuống. Sau khi bắt đầu tải xuống tài nguyên, chúng tôi có thể xóa liên kết khỏi tài liệu bằng phương pháp 'data:text/plain;charset=utf-8,' + encodeURIComponent[data]
4 Cách tải xuống các đốm màu trong JavaScript
Tuy nhiên, phương pháp trên có hạn chế. Nó không hoạt động với các tệp không dựa trên văn bản và mặc dù chúng tôi có thể thay đổi loại MIME nhưng nó cũng không hoạt động với các tệp được lưu trữ ở nơi khác. Để giải quyết vấn đề này, hãy giới thiệu cho bạn các đốm màu
Sử dụng các đốm màu là một cách tiếp cận chung hơn để tải xuống các tệp nhị phân hoặc các tệp không được tạo theo chương trình nhưng được lưu trữ ở nơi khác. Đối với điều này, chúng tôi cần sử dụng API
'data:text/plain;charset=utf-8,' + encodeURIComponent[data]
5 kết hợp với 'data:text/plain;charset=utf-8,' + encodeURIComponent[data]
6 để tạo URL chính xác cho blob, sau đó sử dụng URL này cho data:[][;base64],
8. Dựa trên điều này, mã của chúng tôi thay đổi như saudata:[][;base64],
9 Tạo chức năng tải xuống để tải xuống các đốm màuĐã sao chép vào khay nhớ tạm. Sao chép
Trong ví dụ trên, chúng tôi đang sử dụng
'data:text/plain;charset=utf-8,' + encodeURIComponent[data]
8 để tìm nạp tài nguyên tại URL được cung cấp. Sau đó, chúng ta có thể chuyển đổi kết quả trả về bằng cách sử dụng phương thức 'data:text/plain;charset=utf-8,' + encodeURIComponent[data]
9 trên đó. Cuối cùng, sau đó chúng tôi tạo URL blob thích hợp bằng cách sử dụng 'data:text/plain;charset=utf-8,' + encodeURIComponent[data]
6, dự kiến một blob sẽ được chuyển cho nódata:[][;base64],
3 Giá trị của blob và URL blobĐã sao chép vào khay nhớ tạm. Sao chép
Tóm lại là
Tóm lại, chúng tôi có thể sử dụng URL dữ liệu để tải xuống các tệp được tạo động một cách nhanh chóng hoặc sử dụng API
'data:text/plain;charset=utf-8,' + encodeURIComponent[data]
5 với 'data:text/plain;charset=utf-8,' + encodeURIComponent[data]
6 để tải xuống các đốm màu và tệp từ các miền khác. Bạn cũng cần đọc lại các tệp bằng JavaScript và theo dõi tiến trình của chúng?