Javascript lưu tệp từ url | Saqib Amina Danial

Tấ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à những URL có tiền tố là sơ đồ 

data:[<mediatype>][;base64],<data>

data:[<mediatype>][;base64],<data>

Đã sao chép vào khay nhớ tạm. Sao chép

• _

  data:[<mediatype>][;base64],<data>

  1 là loại MIME, chẳng hạn như 

  data:[<mediatype>][;base64],<data>

  2 hoặc 

  data:[<mediatype>][;base64],<data>

  3. Trong trường hợp của chúng tôi, chúng tôi sẽ sử dụng 

  data:[<mediatype>][;base64],<data>

  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ác
• Có một chuỗi 

  data:[<mediatype>][;base64],<data>

  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ày
• 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 

  data:[<mediatype>][;base64],<data>

  6 tích hợp sẵn

Đ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)

Đã 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:[<mediatype>][;base64],<data>

data:[<mediatype>][;base64],<data>

data:[<mediatype>][;base64],<data>

data:[<mediatype>][;base64],<data>

Đã 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)

'data:text/plain;charset=utf-8,' + encodeURIComponent(data)

'data:text/plain;charset=utf-8,' + encodeURIComponent(data)

Sau khi tất cả các thuộc tính cần thiết có trên liên kết, chúng tôi 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)

'data:text/plain;charset=utf-8,' + encodeURIComponent(data)

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)

'data:text/plain;charset=utf-8,' + encodeURIComponent(data)

data:[<mediatype>][;base64],<data>

data:[<mediatype>][;base64],<data>

Đã 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)

'data:text/plain;charset=utf-8,' + encodeURIComponent(data)

'data:text/plain;charset=utf-8,' + encodeURIComponent(data)

data:[<mediatype>][;base64],<data>

Đã 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)

'data:text/plain;charset=utf-8,' + encodeURIComponent(data)

Cách mở bất kỳ tệp nào trong Javascript bằng thanh tiến trình

Sử dụng nghệ thuật văn bản ASCII trong thanh tìm kiếm của bạn

Làm cách nào để lưu tệp từ URL trong JavaScript?