Bạn có thể sử dụng thuộc tính HTML download để chỉ định rằng mục tiêu sẽ được tải xuống khi người dùng nhấp vào siêu liên kết
Thí dụ
Tự mình thử »
Thuộc tính download chỉ được sử dụng nếu thuộc tính href được đặt
Giá trị của thuộc tính sẽ là tên của tệp đã 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. ]
Bạn cũng có thể 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. Nếu giá trị bị bỏ qua, tên tệp gốc được sử dụng
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
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'];
Đ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
Giả 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
________số 8_______Để 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
// 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'];
Đâ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'];
download[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'];