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
Giá trị tùy chọn của thuộc tính download
sẽ là tên mới của tệp sau khi tệp được tải xuống. Không có giới hạn nào đối với các giá trị được phép và trình duyệt sẽ tự động phát hiện phần mở rộng tệp chính xác và thêm nó vào tệp [. hình ảnh,. pdf,. văn bản,. html, v.v. ]
Nếu giá trị bị bỏ qua, tên tệp gốc được sử dụng
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính
Thuộc tính tải xuống14. 0*18. 020. 0*10. 115. 0* Chrome 65+ và Firefox chỉ hỗ trợ liên kết tải xuống cùng nguồn gốc
cú pháp
Giá trị thuộc tính
Giá trịMô tảtên tệpTùy chọn. Chỉ định tên tệp mới cho tệp đã tải xuốngThêm ví dụ
Thí dụ
Chỉ định một giá trị cho thuộc tính tải xuống, đây sẽ là tên tệp mới của tệp đã tải xuống ["w3logo. jpg" thay vì "myw3schoolsimage. jpg"]
Có nhiều cách để tải xuống một tệp trong JavaScript. Bạn có thể sử dụng thuộc tính download
của neo hoặc tạo URL đối tượng theo chương trình trong JavaScript
Thuộc tính download
Thuộc tính download
đã được thêm vào phần tử neo trong HTML 5. Nó thông báo cho trình duyệt tải xuống URL được yêu cầu thay vì điều hướng đến nó
Download PDF
Bạn cũng có thể chỉ định một giá trị tùy chọn cho thuộc tính download
sẽ được sử dụng làm tên tệp sau khi tệp được tải xuống. Nếu giá trị không được cung cấp, tên tệp gốc sẽ được sử dụng
Download PDF
Như bạn có thể thấy ở trên, thuộc tính download
là cách dễ nhất để tải xuống tệp trên trình duyệt. Bạn thậm chí không cần JavaScript cho việc này vì nó là một phần của HTML DOM. Tuy nhiên, thuộc tính download
chỉ hoạt động trong các trình duyệt hiện đại. Internet Explorer không hỗ trợ nó
Kích hoạt sự kiện Download PDF
5
Download PDF
Ý tưởng là lập trình tạo một liên kết neo, sau đó kích hoạt sự kiện
Download PDF
5. Phương pháp này đặc biệt hữu ích cho các URL tệp được tạo độngconst download = [path, filename] => {
// Create a new link
const anchor = document.createElement['a'];
anchor.href = path;
anchor.download = filename;
// Append to the DOM
document.body.appendChild[anchor];
// Trigger `click` event
anchor.click[];
// Remove element from DOM
document.body.removeChild[anchor];
};
// Example download
download['atta-resume.pdf', 'resume.pdf'];
Đoạn mã ví dụ trên thực hiện như sau
- tạo một phần tử neo [
7]Download PDF
- đặt URL mục tiêu và giá trị thuộc tính tải xuống [nếu có]
- nối nó vào cơ thể
- kích hoạt sự kiện
5 của mỏ neo để bắt đầu tải xuốngDownload PDF
- và cuối cùng xóa thẻ neo khỏi phần thân
Các đốm màu và URL đối tượng
Đôi khi, bạn có thể muốn lưu dữ liệu được tạo theo chương trình dưới dạng tệp bằng JavaScript. Đó là nơi các đốm màu và URL đối tượng hữu ích
Một đối tượng
Download PDF
9 là một đối tượng giống như tệp được sử dụng để biểu diễn dữ liệu thô không thể thay đổi. Các đối tượng Blob chứa thông tin về loại và kích thước dữ liệu mà chúng lưu trữ, khiến chúng rất hữu ích để lưu trữ nội dung động trong trình duyệtGiả sử bạn muốn lưu phản hồi JSON do API REST trả về dưới dạng tệp bên trong trình duyệt
Để tạo một đối tượng blob từ dữ liệu JSON, trước tiên bạn cần chuyển đổi nó thành một chuỗi JSON, sau đó tạo một thể hiện của
Download PDF
9 bằng cách sử dụng hàm tạo của nó// Convert JSON to string
const data = JSON.stringify[json];
// Create a Blob object
const blob = new Blob[[data], { type: 'application/json' }];
Để chuyển đổi dữ liệu blob thô thành URL đối tượng, bạn có thể sử dụng phương thức
const download = [path, filename] => {
// Create a new link
const anchor = document.createElement['a'];
anchor.href = path;
anchor.download = filename;
// Append to the DOM
document.body.appendChild[anchor];
// Trigger `click` event
anchor.click[];
// Remove element from DOM
document.body.removeChild[anchor];
};
// Example download
download['atta-resume.pdf', 'resume.pdf'];
1. Phương pháp này rất hữu ích để tạo một URL đối tượng đại diện cho một đốm màu hoặc một tệpĐây là giao diện tạo một URL đối tượng
const url = URL.createObjectURL[blob];
Bây giờ chúng tôi có một URL đối tượng, chúng tôi chỉ cần gọi phương thức
const download = [path, filename] => {
// Create a new link
const anchor = document.createElement['a'];
anchor.href = path;
anchor.download = filename;
// Append to the DOM
document.body.appendChild[anchor];
// Trigger `click` event
anchor.click[];
// Remove element from DOM
document.body.removeChild[anchor];
};
// Example download
download['atta-resume.pdf', 'resume.pdf'];
2 được xác định ở trên để lưu phản hồi JSON dưới dạng tệpdownload[url, 'users.json'];
Theo mặc định, bất cứ khi nào một URL đối tượng được tạo, nó sẽ ở trong DOM trong suốt thời gian tồn tại của tài liệu. Trình duyệt sẽ giải phóng tất cả các URL đối tượng khi tài liệu được đóng hoặc tải lại
Tuy nhiên, nê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ớ. Để giải phóng các đối tượng URL, bạn có thể sử dụng phương thức
const download = [path, filename] => {
// Create a new link
const anchor = document.createElement['a'];
anchor.href = path;
anchor.download = filename;
// Append to the DOM
document.body.appendChild[anchor];
// Trigger `click` event
anchor.click[];
// Remove element from DOM
document.body.removeChild[anchor];
};
// Example download
download['atta-resume.pdf', 'resume.pdf'];
3