Hướng dẫn javascript download file automatically - tự động tải xuống tệp javascript

Vì vậy, tôi đã tìm kiếm và cố gắng tìm cách tải xuống một tệp tự động ngay khi ai đó truy cập trang web của tôi. Tôi đã thử sử dụng thẻ A để tải xuống và nó hoạt động, bạn chỉ cần nhấp để tải xuống. Như vậy ...

Download

Nhưng tôi không muốn điều đó. Tôi muốn nó tự động tải xuống mà không có nhấp chuột. Tôi cần một số giúp đỡ xin vui lòng!

Hỏi ngày 28 tháng 4 năm 2016 lúc 1:12Apr 28, 2016 at 1:12

4

Nếu đó là một tệp thực tế (một cái gì đó sẽ không chỉ đơn giản là hiển thị trong trình duyệt của bạn như tệp jpg) thì bạn có thể sử dụng chuyển hướng JavaScript hoặc meta.

hoặc

Nhưng tôi tự hỏi liệu bạn có thể nói về người dùng được hỏi liệu họ có muốn mở hay lưu tệp không (cho dù đó là JPG hay bất cứ điều gì?)

Đã trả lời ngày 28 tháng 4 năm 2016 lúc 3:50Apr 28, 2016 at 3:50

Daniel Williamsdaniel WilliamsDaniel Williams

2.1476 Huy hiệu vàng29 Huy hiệu bạc46 Huy hiệu đồng6 gold badges29 silver badges46 bronze badges

Một cách khác để làm điều đó:

var a = document.createElement('a');
a.setAttribute('href', dataUri);
a.setAttribute('download', filename);

var aj = $(a);
aj.appendTo('body');
aj[0].click();
aj.remove();

Đã trả lời ngày 15 tháng 4 năm 2019 lúc 9:22Apr 15, 2019 at 9:22

ZettacirclzettacirclZettaCircl

7459 Huy hiệu bạc14 Huy hiệu đồng9 silver badges14 bronze badges

2

Một tùy chọn khác là JavaScript thuần túy là:

const downloadFile = (file) => {
  const element = document.createElement('a');
  element.setAttribute('href', 'Download Btn');
  element.setAttribute('download', file);

  element.style.display = 'none';

  document.body.appendChild(element);

  element.click();
  document.body.removeChild(element);
}

Và sau đó bạn có thể gọi chức năng trên tải:

downloadFile(/*pass your file here*/);

Đã trả lời ngày 8 tháng 3 năm 2021 lúc 13:34Mar 8, 2021 at 13:34

Ảnh của Pankaj Patel trên unplash

Tải xuống các tập tin là một khía cạnh thiết yếu của việc lướt Internet. Hàng tấn tệp được tải xuống từ Internet mỗi ngày, từ các tệp nhị phân (như ứng dụng, hình ảnh, video và âm thanh) đến các tệp văn bản đơn giản.

Nếu bạn có một nhà phát triển web và bạn muốn thêm tính năng này vào ứng dụng của mình, đây là cách bạn có thể làm điều đó.

Chúng tôi sẽ kiểm tra 3 cách tiếp cận khác nhau:

• Chế độ cơ bản chỉ sử dụng các phần tử HTML;
• sử dụng JavaScript với các phần tử API Fetch và HTML;
• Sử dụng các phần tử XMLHTTPREQUEST và HTML, nhưng trong một kịch bản phức tạp hơn, trong đó chúng tôi thực hiện một hệ thống để đo lường tiến trình;

Phương pháp i

Phương thức đầu tiên và đơn giản nhất ngụ ý tạo ra một phần tử HTML neo có thuộc tính download.

Theo định nghĩa, 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.

Ngoài ra với thuộc tính download này, chúng tôi có thể chỉ định tên mới của tệp sau khi được tải xuống. Do đó, nếu chúng tôi muốn tải xuống tệp với một tên cụ thể, chúng tôi có thể kiểm soát điều này bằng thuộc tính này. Tuy nhiên, người dùng vẫn có thể thay đổi tên khi cửa sổ tải xuống gốc xuất hiện, nhưng tên chúng tôi cung cấp sẽ là mặc định.

Nếu giá trị bị bỏ qua, tên tệp gốc được sử dụng.

Thô

Phương pháp này là tuyệt vời khi chúng tôi không cần phải thực hiện bất kỳ hành động nào dựa trên quá trình tải xuống này.

Đồng thời, chúng ta có thể sử dụng phương pháp này mặc dù chúng ta có thể hiển thị phần tử HTML neo, sử dụng JavaScript.

Thô

Phương pháp này là tuyệt vời khi chúng tôi không cần phải thực hiện bất kỳ hành động nào dựa trên quá trình tải xuống này.

• Đồng thời, chúng ta có thể sử dụng phương pháp này mặc dù chúng ta có thể hiển thị phần tử HTML neo, sử dụng JavaScript.
• Hàm ở trên đang làm như vậy, chỉ là chúng tôi tạo phần tử HTML neo một cách nhanh chóng, chỉ cho hành động tải xuống này và sau đó chúng tôi xóa nó.

var a = document.createElement('a');
a.setAttribute('href', dataUri);
a.setAttribute('download', filename);

var aj = $(a);
aj.appendTo('body');
aj[0].click();
aj.remove();

0 là URL của hình ảnh chúng tôi muốn tải xuống;

var a = document.createElement('a');
a.setAttribute('href', dataUri);
a.setAttribute('download', filename);

var aj = $(a);
aj.appendTo('body');
aj[0].click();
aj.remove();

1 là tên mới của tệp sau khi nó được tải xuống;

Hạn chế của phương pháp này là nó phải tôn trọng chính sách đồng nghĩa, do đó thuộc tính này hoạt động chính xác cho các URL có nguồn gốc tương tự.

Một kịch bản phổ biến là khi bạn muốn tải xuống một hình ảnh từ một máy chủ khác và thay vì tải xuống, trình duyệt sẽ mở nó trong một tab mới.

Phương pháp II

Phương pháp thứ hai và phương pháp thứ ba sử dụng cùng một kỹ thuật với phần tử neo, nhưng thay vì cung cấp URL hình ảnh, chúng tôi chuyển đổi nội dung tệp thành một blob và sau đó chúng tôi tạo DomString từ nó bằng phương pháp createdObjectURL.

Thô

Phần đầu và khối

var a = document.createElement('a');
a.setAttribute('href', dataUri);
a.setAttribute('download', filename);

var aj = $(a);
aj.appendTo('body');
aj[0].click();
aj.remove();

4 tương tự như hàm thứ hai. Tải xuống phản hồi dưới dạng đối tượng Blob, tạo một DomString và sử dụng phần tử neo để tải xuống tệp.

Inside

var a = document.createElement('a');
a.setAttribute('href', dataUri);
a.setAttribute('download', filename);

var aj = $(a);
aj.appendTo('body');
aj[0].click();
aj.remove();

5 Chúng tôi sử dụng các giá trị

var a = document.createElement('a');
a.setAttribute('href', dataUri);
a.setAttribute('download', filename);

var aj = $(a);
aj.appendTo('body');
aj[0].click();
aj.remove();

6 và

var a = document.createElement('a');
a.setAttribute('href', dataUri);
a.setAttribute('download', filename);

var aj = $(a);
aj.appendTo('body');
aj[0].click();
aj.remove();

7 để tính tiến độ theo tỷ lệ phần trăm và thời gian trôi qua, cũng như tốc độ tải xuống và thời gian còn lại.

Lưu ý trong GIF ở trên rằng chúng ta có hành vi tương tự như đối với phương pháp thứ hai, chỉ bây giờ chúng ta có thể theo dõi tiến trình. Sau khi tệp được tải xuống hoàn toàn, nó sẽ được gửi đến trình duyệt và sau đó nó sẽ được lưu ngay lập tức vào đĩa.

Gói (lại

Mỗi phương thức trên đại diện cho một bản cập nhật qua phương thức trước.

Phương pháp đầu tiên là dễ nhất. Trong đó, chúng tôi chỉ cần chuyển tiếp quá trình tải xuống đến trình duyệt để quản lý nó tự nhiên. Phương pháp này là cách ưa thích khi ứng dụng không phải thực hiện một số hành động nhất định dựa trên trạng thái tải.

Trong lần thứ hai, chúng tôi quản lý tải xuống nội bộ và chỉ gửi cho trình duyệt khi tải xuống hoàn tất. Theo cách này, chúng tôi có thể kiểm soát việc tải xuống bên trong ứng dụng và chúng tôi có thể phản ứng tùy thuộc vào trạng thái của nó. Phương pháp này hoạt động tốt cho các tệp nhỏ được tải xuống nhanh chóng, nhưng khi tệp quá lớn, người dùng có thể nghĩ rằng ứng dụng bị lỗi, nếu không có gì xảy ra trên giao diện người dùng để cho người dùng biết rằng tải xuống đang được tiến hành.

Phương pháp III

Phương pháp thứ ba tương tự như phương pháp thứ hai, chúng ta vẫn sẽ sử dụng Blob và CreatObjectURL, nhưng thay vì sử dụng API tìm nạp, chúng ta sẽ sử dụng XMLHTTPREQUEST.

Chúng tôi đang sử dụng XMLHTTPREQUEST trên Fetch vì hiện tại nói API Fetch không cung cấp giao diện để đo lường tiến độ, trong khi XMLHTTPRequest.

Thô

Phần đầu và khối

var a = document.createElement('a');
a.setAttribute('href', dataUri);
a.setAttribute('download', filename);

var aj = $(a);
aj.appendTo('body');
aj[0].click();
aj.remove();

4 tương tự như hàm thứ hai. Tải xuống phản hồi dưới dạng đối tượng Blob, tạo một DomString và sử dụng phần tử neo để tải xuống tệp.

Inside

var a = document.createElement('a');
a.setAttribute('href', dataUri);
a.setAttribute('download', filename);

var aj = $(a);
aj.appendTo('body');
aj[0].click();
aj.remove();

5 Chúng tôi sử dụng các giá trị

var a = document.createElement('a');
a.setAttribute('href', dataUri);
a.setAttribute('download', filename);

var aj = $(a);
aj.appendTo('body');
aj[0].click();
aj.remove();

6 và

var a = document.createElement('a');
a.setAttribute('href', dataUri);
a.setAttribute('download', filename);

var aj = $(a);
aj.appendTo('body');
aj[0].click();
aj.remove();

7 để tính tiến độ theo tỷ lệ phần trăm và thời gian trôi qua, cũng như tốc độ tải xuống và thời gian còn lại.

Lưu ý trong GIF ở trên rằng chúng ta có hành vi tương tự như đối với phương pháp thứ hai, chỉ bây giờ chúng ta có thể theo dõi tiến trình. Sau khi tệp được tải xuống hoàn toàn, nó sẽ được gửi đến trình duyệt và sau đó nó sẽ được lưu ngay lập tức vào đĩa.

Gói (lại

Mỗi phương thức trên đại diện cho một bản cập nhật qua phương thức trước.

Phương pháp đầu tiên là dễ nhất.Trong đó, chúng tôi chỉ cần chuyển tiếp quá trình tải xuống đến trình duyệt để quản lý nó tự nhiên.Phương pháp này là cách ưa thích khi ứng dụng không phải thực hiện một số hành động nhất định dựa trên trạng thái tải.

Trong lần thứ hai, chúng tôi quản lý tải xuống nội bộ và chỉ gửi cho trình duyệt khi tải xuống hoàn tất.Theo cách này, chúng tôi có thể kiểm soát việc tải xuống bên trong ứng dụng và chúng tôi có thể phản ứng tùy thuộc vào trạng thái của nó.Phương pháp này hoạt động tốt cho các tệp nhỏ được tải xuống nhanh chóng, nhưng khi tệp quá lớn, người dùng có thể nghĩ rằng ứng dụng bị lỗi, nếu không có gì xảy ra trên UI để cho người dùng biết rằng tải xuống đang được tiến hành.

Trong phương pháp cuối cùng, chúng tôi thực hiện phép đo tiến trình của riêng mình, tương tự như trong trình duyệt.