Tải xuống tệp JavaScript

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ống

---

Thê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ó

<a href="file.pdf" download>Download PDFa>

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

<a href="file.pdf" download="resume.pdf">Download PDFa>

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

Ý tưởng là lập trình tạo một liên kết neo, sau đó kích hoạt sự kiện

<a href="file.pdf" download="resume.pdf">Download PDFa>

5. Phương pháp này đặc biệt hữu ích cho các URL tệp được tạo động

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 (

  <a href="file.pdf" download="resume.pdf">Download PDFa>
  

  7)
• đặ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

  <a href="file.pdf" download="resume.pdf">Download PDFa>
  

  5 của mỏ neo để bắt đầu tải xuống
• 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

<a href="file.pdf" download="resume.pdf">Download PDFa>

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ệt

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

<a href="file.pdf" download="resume.pdf">Download PDFa>

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ệp

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');

3

Làm cách nào để tải xuống tệp văn bản bằng JavaScript?

Làm cách nào để tải xuống tệp đã tải lên trong JavaScript?

JavaScript cung cấp thuộc tính href để tải tệp xuống . Thuộc tính được hỗ trợ bởi HTML 5. Sử dụng thuộc tính này, người dùng có thể sử dụng liên kết cũng như nút tải xuống tệp theo nhu cầu của mình.

Làm cách nào để tải xuống tệp URL trong JavaScript?

Phương pháp này đặc biệt hữu ích cho các URL tệp được tạo động. .

const download = (đường dẫn, tên tệp) => { // Tạo một liên kết mới const anchor = document. createElement('a'); . .

tìm nạp ('https. // yêu cầu. trong/api/người dùng'). .

// Chuyển đổi JSON thành chuỗi const data = JSON. .

const url = URL. .

tải xuống (url, 'người dùng. .

Làm cách nào để tải xuống tệp văn bản từ URL trong JavaScript?

Cách tải xuống tệp văn bản bằng JavaScript .

BƯỚC 1. Tạo một liên kết để tải xuống tệp. Đầu tiên, chúng tôi thêm một liên kết đến trang của chúng tôi như sau. .

BƯỚC 2. Chuẩn bị cửa sổ. Thuộc tính URL. .

BƯỚC 3. Chuẩn bị tệp để tải xuống bằng phương thức createObjectURL()