programming javascript

Làm cách nào để đổi tên tệp trong khi tải xuống trong Javascript?

Mặc định của thẻ neo của bạn là một liên kết điều hướng, nó sẽ chuyển đến liên kết bạn đã chỉ định trong thuộc tính href của mình

Tuy nhiên, khi bạn thêm thuộc tính download, nó sẽ biến nó thành một liên kết tải xuống. Nhắc tệp của bạn được tải xuống. Tệp đã tải xuống sẽ có cùng tên với tên tệp gốc. Tuy nhiên, bạn cũng có thể đặt tên tệp tùy chỉnh bằng cách chuyển một giá trị cho thuộc tính tải xuống 🤩


  Download with original filename -> samanthaming.png



  Download with custom filename -> logo.png

Hạn chế tải xuống

Thuộc tính download chỉ hoạt động đối với các URL có cùng nguồn gốc. Vì vậy, nếu href không cùng nguồn gốc với trang web, nó sẽ không hoạt động. Nói cách khác, bạn chỉ có thể tải xuống các tệp thuộc trang web đó. Thuộc tính này tuân theo cùng một phác thảo quy tắc trong chính sách cùng nguồn gốc

Chính sách cùng nguồn gốc là gì?

Chính sách này là một cơ chế bảo mật giúp cách ly các tài liệu độc hại tiềm ẩn và giảm các hướng tấn công có thể xảy ra. Vậy điều đó có ý nghĩa gì đối với thuộc tính download của chúng ta? . Hãy xem một ví dụ

Gốc. //www.samanthaming.com//www.samanthaming.com/logo.pngĐiều này sẽ hiệu quả//www.google.com/logo.pngĐiều này sẽ không hiệu quả

Bạn có thể tìm hiểu thêm về chính sách này trên MDN Web Doc

Hỗ trợ trình duyệt

Tính năng này không được hỗ trợ bởi tất cả các trình duyệt [khụ khụ IE]. Vì vậy, nếu bạn đang nhắm mục tiêu đến một trình duyệt cụ thể, hãy đảm bảo rằng bạn đã kiểm tra tính tương thích trước khi sử dụng thuộc tính này

Trường hợp sử dụng để chuyển tên tệp mới là gì?

Câu hỏi. Trường hợp sử dụng cho việc này là gì?

câu trả lời của tôi. Vâng, đó sẽ là lý tưởng. Nhưng đôi khi bạn có thể có một quy ước đặt tên tệp tùy chỉnh mà bạn cần tuân theo, điều này có thể không hợp lý đối với người dùng. Vì vậy, có thể chuyển vào một tên tệp tùy chỉnh có thể hữu ích 👍

@dj_yanic. trường hợp sử dụng tốt. Tôi theo dõi số phiên bản sơ yếu lý lịch của mình, nhưng nhà tuyển dụng tải xuống từ trang web của tôi không cần biết đó là phiên bản nào
@xây dựng. script. đăng nhập. bạn cũng có thể lập trình thay đổi tên tệp, bao gồm ngày hoặc tên người dùng chẳng hạn. Mẹo gọn gàng

Phản hồi của cộng đồng

@vikneshwaran_jk. Tôi đã sử dụng thuộc tính tải xuống này trong trang web danh mục đầu tư cá nhân của mình để làm cho sơ yếu lý lịch của tôi có thể tải xuống [pdf]. Đơn giản là mạnh mẽ👌
chriskelly7777. Một mẹo rất hữu ích. Một vấn đề nhỏ ban đầu khiến tôi mất cảnh giác là điều này chỉ hoạt động trên các yêu cầu gốc giống nhau, không phải nguồn gốc chéo, nơi nó bị bỏ qua. Stack Overflow- chỉ để cứu bất kỳ ai khác nhổ tóc của chính họ như tôi đã làm

Để tải xuống bất kỳ loại tệp nào theo cách lập trình trong JavaScript, chúng tôi có thể sử dụng một neo vô hình với thuộc tính download. Khi thuộc tính download được đặt trên một neo, nó sẽ cố tải xuống tài nguyên ở thuộc tính href
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 download, chúng tôi có thể chỉ định tên tùy chỉnh cho tệp đã tải xuống
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à
```
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 sau
```
data:[][;base64],
```
Định dạng của URL dữ liệu
Đã sao chép vào khay nhớ tạm. Sao chép
- _
```
data:[][;base64],
```
  1 là loại MIME, chẳng hạn như
```
data:[][;base64],
```
  2 hoặc
```
data:[][;base64],
```
  3. Trong trường hợp của chúng tôi, chúng tôi sẽ sử dụng
```
data:[][;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ác
- Có một chuỗi
```
data:[][;base64],
```
  5 tùy chọn mà chúng tôi có thể đặt trong trường hợp chúng tôi 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:[][;base64],
```
  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]
```
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?
[email protected]', phone: '+1 234 567' }] // Calling with a custom file name download[{ name: 'John Doe' }, 'user.json'] 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 trang
Sau 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 href. Dựa trên điều này, mã của chúng tôi thay đổi như sau
```
const download = async [url, filename] => {
    const data = await fetch[url]
    const blob = await data.blob[]
    const objectUrl = URL.createObjectURL[blob]

    const link = document.createElement['a']

    link.setAttribute['href', objectUrl]
    link.setAttribute['download', filename]
    link.style.display = 'none'

    document.body.appendChild[link]
  
    link.click[]
  
    document.body.removeChild[link]
}

// Later call it with an URL and filename like so:
download['//unpkg.com/[email protected]/umd/react.production.min.js', 'react.js']
```
Tạo chức năng tải xuống để tải xuống blobs
Đã 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 được chuyển cho nó
```
// The returned value of a blob
> Blob { size: 10737, type: 'application/javascript' }

// The returned value of a blob URL
> 'blob://localhost:8080/b813048a-2074-4333-ac10-0b81b9c5ca17'
```
Giá trị của blob và URL blob
Đã 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ó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?
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ạnTìm hiểu cách bạn có thể mở và đọc bất kỳ tệp nào bằng JavaScript, đồng thời hiển thị tiến trình đọc bằ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 để thay đổi tên tệp khi tải xuống trong Javascript?

bạn có thể bật tùy chọn đường dẫn tải xuống khác trong trình duyệt của mình. Sau đó, bạn có thể đổi tên tệp bằng hoạt động nhập dữ liệu để nhập đường dẫn có tên tệp mới trong quá trình thực thi .

Làm cách nào để thay đổi tên tệp trong Javascript?

Để đổi tên tệp, chúng tôi phải tạo tệp mới và chuyển tên mới của chúng tôi cho Trình tạo tệp . const myRenamedFile = new File[[myFile], 'my-file-Final-1-really. txt']; . nhật ký [myRenamedFile]; . Tệp {tên. "my-file-cuối cùng-1-thực sự.

Hạn chế tải xuống

Chính sách cùng nguồn gốc là gì?

Hỗ trợ trình duyệt

Trường hợp sử dụng để chuyển tên tệp mới là gì?

Phản hồi của cộng đồng

URL dữ liệu là gì

Cách tải xuống các đốm màu trong JavaScript

Tóm lại là

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

Làm cách nào để thay đổi tên tệp khi tải xuống trong Javascript?

Làm cách nào để thay đổi tên tệp trong Javascript?

Bài Viết Liên Quan

Toplist mới

Bài mới nhất

Chủ Đề