Cách kích hoạt tải xuống tệp khi nhấp vào nút HTML hoặc JavaScript

Điều này thật điên rồ nhưng tôi không biết làm thế nào để làm điều này và vì mức độ phổ biến của các từ này, thật khó để tìm thấy những gì tôi cần trên các công cụ tìm kiếm. Tôi nghĩ rằng đây là một câu trả lời dễ dàng.

Tôi muốn tải xuống tập tin đơn giản, sẽ làm như vậy:

<a href="file.doc">Download!</a>

Nhưng tôi muốn sử dụng nút HTML, ví dụ:

<input type="button" value="Download!">
<button>Download!</button>

Tương tự như vậy, có thể kích hoạt tải xuống đơn giản qua JavaScript không?

$("#fileRequest").click(function(){ /* code to download? */ });

Tôi chắc chắn không tìm cách tạo ra một cái neo trông giống như một nút, sử dụng bất kỳ tập lệnh back-end nào, hoặc gây rối với các tiêu đề máy chủ hoặc các loại mime.

Đối với nút bạn có thể làm

<form method="get" action="file.doc">
   <button type="submit">Download!</button>
</form>

Bạn có thể kích hoạt tải xuống với downloadthuộc tính HTML5 .

<a href="path_to_file" download="proposed_file_name">Download</a>

Ở đâu:

• path_to_filelà một con đường mà giải quyết đến một URL trên cùng một nguồn gốc . Điều đó có nghĩa là trang và tệp phải chia sẻ cùng một tên miền, tên miền phụ, giao thức (HTTP so với HTTPS) và cổng (nếu được chỉ định). Các ngoại lệ là blob:và data:(luôn luôn hoạt động) và file:(không bao giờ hoạt động).
• proposed_file_namelà tên tệp để lưu vào. Nếu nó trống, trình duyệt mặc định là tên của tệp.

Tài liệu: MDN , Tiêu chuẩn HTML khi tải xuống , Tiêu chuẩn HTML trêndownload , CanIUse

HTML:

<button type="submit" onclick="window.open('file.doc')">Download!</button>

Với jQuery:

$("#fileRequest").click(function() {
    // // hope the server sets Content-Disposition: attachment!
    window.location = 'file.doc';
});

Chủ đề cũ nhưng nó thiếu một giải pháp js đơn giản:

let a = document.createElement('a')
a.href = item.url
a.download = item.url.split('/').pop()
document.body.appendChild(a)
a.click()
document.body.removeChild(a)

Bạn có thể làm điều đó với "mẹo" với iframe vô hình. Khi bạn đặt "src" cho nó, trình duyệt sẽ phản ứng như thể bạn sẽ nhấp vào một liên kết có cùng "href". Ngược lại với giải pháp với hình thức, nó cho phép bạn nhúng logic bổ sung, ví dụ kích hoạt tải xuống sau khi hết thời gian, khi một số điều kiện được đáp ứng, v.v.

Nó cũng rất im lặng, không có cửa sổ / tab mới nhấp nháy như khi sử dụng window.open.

HTML:

<iframe id="invisible" style="display:none;"></iframe>

Javascript:

function download() {
    var iframe = document.getElementById('invisible');
    iframe.src = "file.doc";
}

Phiên bản Bootstrap

<a class="btn btn-danger" role="button" href="path_to_file"
   download="proposed_file_name">
  Download
</a>

Tài liệu trong tài liệu Bootstrap 4 và cũng hoạt động trong Bootstrap 3.

Tôi nghĩ rằng đây là giải pháp bạn đang tìm kiếm

<button type="submit" onclick="window.location.href='file.doc'">Download!</button>

Tôi có một trường hợp Javascript của tôi tạo tệp CSV. Vì không có URL từ xa để tải xuống nên tôi sử dụng cách thực hiện sau.

downloadCSV: function(data){
    var MIME_TYPE = "text/csv";

    var blob = new Blob([data], {type: MIME_TYPE});
    window.location.href = window.URL.createObjectURL(blob);
}

Thế còn:

<input type="button" value="Download Now!" onclick="window.location = 'file.doc';">

Bạn có thể ẩn liên kết tải xuống và làm cho nút bấm vào nó.

<button onclick="document.getElementById('link').click()">Download!</button>
<a id="link" href="file.doc" download hidden></a>

Nếu bạn đang tìm kiếm một giải pháp JavaScript vanilla (không có jQuery) và không sử dụng thuộc tính HTML5, bạn có thể thử điều này.

const download = document.getElementById("fileRequest");

download.addEventListener('click', request);

function request() {
    window.location = 'document.docx';
}

.dwnld-cta {
    border-radius: 15px 15px;
    width: 100px;
    line-height: 22px
}

<h1>Download File</h1>
<button id="fileRequest" class="dwnld-cta">Download</button>

Đây là những gì cuối cùng đã làm việc cho tôi vì tệp được tải xuống được xác định khi trang được tải.

JS để cập nhật thuộc tính hành động của biểu mẫu:

function setFormAction() {
    document.getElementById("myDownloadButtonForm").action = //some code to get the filename;
}

Gọi JS để cập nhật thuộc tính hành động của biểu mẫu:

<body onLoad="setFormAction();">

Thẻ mẫu với nút gửi:

<form method="get" id="myDownloadButtonForm" action="">
    Click to open document:  
    <button type="submit">Open Document</button>
</form>

Những điều sau đây KHÔNG hoạt động:

<form method="get" id="myDownloadButtonForm" action="javascript:someFunctionToReturnFileName();">

Nếu bạn không thể sử dụng biểu mẫu, một cách tiếp cận khác với downloadjs rất phù hợp. Downloadjs sử dụng API tệp blob và html 5 trong phần mềm:

{downloadjs (url, tên tệp)}) />

* đó là cú pháp jsx / React, nhưng có thể được sử dụng trong html thuần

Bất cứ nơi nào giữa thẻ <body>và </body>thẻ của bạn, hãy đặt một nút bằng mã dưới đây:

<button>
    <a href="file.doc" download>Click to Download!</a>
</button>

Điều này là chắc chắn để làm việc!

Một cách khác để làm trong trường hợp bạn có một URL phức tạp, chẳng hạn như file.doc?foo=bar&jon=doethêm trường ẩn bên trong biểu mẫu

<form method="get" action="file.doc">
  <input type="hidden" name="foo" value="bar" />
  <input type="hidden" name="john" value="doe" />
  <button type="submit">Download Now</button>
</form>

lấy cảm hứng từ câu trả lời @Cfreak chưa hoàn thành

bạn có thể thêm thẻ mà không cần bất kỳ văn bản nào nhưng có liên kết. và khi bạn nhấp vào nút như bạn có trong mã, chỉ cần chạy hàm $ ("yourlink class"). click ().

tải thuộc tính làm điều đó

 <a class="btn btn-success btn-sm" href="/file_path/file.type" download>
     <span>download </span>&nbsp;<i class="fa fa-download"></i>
 </a>

Nếu bạn sử dụng <a>thẻ, đừng quên sử dụng toàn bộ url dẫn đến tệp - tức là:

<a href="http://www.example.com/folder1/file.doc">Download</a>

Đối với tôi nút ading thay vì neo văn bản hoạt động thực sự tốt.

<a href="file.doc"><button>Download!</button></a>

Nó có thể không ổn theo hầu hết các quy tắc, nhưng nó có vẻ khá tốt.