it-swarm.com.de

So lösen Sie einen Dateidownload aus, wenn Sie auf eine HTML-Schaltfläche oder JavaScript klicken

Das ist verrückt, aber ich weiß nicht, wie ich das machen soll, und weil die Wörter so häufig vorkommen, ist es schwierig, in Suchmaschinen zu finden, was ich brauche. Ich denke, das sollte leicht zu beantworten sein.

Ich möchte eine einfache Datei herunterladen, die das gleiche wie folgt tun würde:

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

Ich möchte jedoch eine HTML-Schaltfläche verwenden, z. eins von denen:

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

Ist es auch möglich, einen einfachen Download über JavaScript auszulösen?

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

Ich suche definitiv nicht nach einer Möglichkeit, einen Anker zu erstellen, der wie eine Schaltfläche aussieht, Back-End-Skripte zu verwenden oder mit Server-Headern oder zu verwechseln Pantomimetypen.

371
brentonstrine

Für die Schaltfläche können Sie tun

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

Ich habe einige Nachforschungen angestellt und die beste Antwort gefunden. Sie können einen Download mit dem neuen HTML5-Attribut download auslösen.

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

Wo :

  • path_to_file ist entweder ein absoluter oder ein relativer Pfad,
  • proposed_file_name der Dateiname, unter dem gespeichert werden soll (kann leer sein, dann wird standardmäßig der tatsächliche Dateiname verwendet).

Hoffe das ist hilfreich.

WhatwgDokumentation

Caniuse

391
Joe Pigott

HTML:

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

Mit jQuery:

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

Alter Thread, aber es fehlt eine einfache js-Lösung:

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)
22
Stefanos Chrs

Du kannst es mit "trick" mit unsichtbarem iframe machen. Wenn Sie "src" darauf setzen, reagiert der Browser so, als würden Sie auf einen Link mit demselben "href" klicken. Im Gegensatz zur Lösung mit Formular können Sie zusätzliche Logik einbetten, z. B. das Aktivieren des Herunterladens nach einer Zeitüberschreitung, wenn bestimmte Bedingungen erfüllt sind usw.

Es ist auch sehr leise, es blinkt kein neues Fenster/Tab wie bei der Verwendung von window.open.

HTML:

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

Javascript:

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

Bootstrap-Version

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

Documented in Bootstrap 4 docs und funktioniert auch in Bootstrap 3.

12
CFP Support

Ich denke, das ist die Lösung, nach der Sie gesucht haben

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

Ich hatte einen Fall, in dem mein Javascript eine CSV-Datei generiert. Da es keine entfernte URL zum Herunterladen gibt, verwende ich die folgende Implementierung.

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

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

Wie wäre es mit:

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

Sie können den Download-Link ausblenden und mit der Schaltfläche darauf klicken.

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

Wenn Sie nach einer Vanilla JavaScript-Lösung (ohne jQuery) suchen und das HTML5-Attribut nicht verwenden, können Sie dies versuchen.

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>
3
David Willhite
 <a href="complexDownload" download="file.doc" onclick="this.href='file.doc';">
     <button>Download <i>File.doc</i> Now!</button>
 </a>

Es scheint nicht in Safari zu funktionieren, aber es hat in Chrome funktioniert. Wenn Sie das href-Attribut des Links ändern, nachdem der Benutzer darauf geklickt hat, funktioniert es anscheinend auch in älteren Versionen von IE, jedoch nicht in den neuesten Versionen von IE oder Edge.

1
IamGuest

Das hat bei mir endlich geklappt, da die herunterzuladende Datei beim Laden der Seite ermittelt wurde.

JS, um das Aktionsattribut des Formulars zu aktualisieren:

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

JS aufrufen, um das Aktionsattribut des Formulars zu aktualisieren:

<body onLoad="setFormAction();">

Formular Tag mit dem Submit Button:

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

Folgendes hat NICHT funktioniert:

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

Wenn Sie das Formular nicht verwenden können, verwenden Sie einen anderen Ansatz mit downloadjs fit Nice. Downloadjs verwenden Blob und HTML 5-Datei-API unter der Haube:

{downloadjs (URL, Dateiname)}) />

* Es ist Jsx/React-Syntax, kann aber in reinem HTML verwendet werden

1
Gleb Dolzikov

Eine andere Möglichkeit für den Fall, dass Sie eine komplexe URL wie file.doc?foo=bar&jon=doe haben, besteht darin, ein verstecktes Feld in das Formular einzufügen

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

inspiriert von @Cfreak Antwort, die nicht vollständig ist

0
Bellash

Fügen Sie zwischen den Tags <body> und </body> eine Schaltfläche mit dem folgenden Code ein:

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

Das wird sicher funktionieren!

0
Ronaldo

download-Attribut machen Sie es

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

Sie könnten einfach verwenden:

<form action="/file.doc" align="center"> <input type="submit" id="custom-buttons" value="Click Here To Download" /> </form>

0
MartinNajemi