Wie man einen Dateidownload auslöst, wenn man auf eine HTML-Schaltfläche oder JavaScript klickt

Question

Dies ist verrückt, aber ich weiß nicht, wie man das macht, und aufgrund der Häufigkeit der Wörter ist es schwierig, das zu finden, was ich brauche, auf Suchmaschinen. Ich denke, das sollte eine einfache Frage sein.

Ich möchte einen einfachen Dateidownload, der das Gleiche macht wie dies:

Download!

Aber ich möchte einen HTML-Button verwenden, z.B. einen von diesen:

Download!

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

$("#fileRequest").click(function(){ /* Code zum Herunterladen? */ });

Ich suche definitiv nicht nach einer Möglichkeit, einen Anchor zu erstellen, der wie ein Button aussieht, Backend-Skripte zu verwenden oder mit Server-Headern oder MIME-Typen herumzuspielen.

Answer 1

In meinen Tests funktioniert das Folgende für alle Dateitypen und Browser, solange Sie einen relativen Link verwenden:

Herunterladen 2

• /assets/hello.txt ist nur ein relativer Pfad auf meiner Website. Ändern Sie ihn in Ihren eigenen relativen Pfad.
• my_file.txt ist der Name, unter dem die Datei gespeichert wird, wenn sie heruntergeladen wird.

Erklärung

Ich habe festgestellt, dass es unter vielen der Antworten Kommentare gab, die besagten, dass der Browser versuchen würde, die Datei selbst zu öffnen, anstatt sie herunterzuladen, abhängig vom Dateityp. Ich habe festgestellt, dass dies zutrifft.

Ich habe zwei Buttons erstellt, um es mit zwei verschiedenen Methoden auszuprobieren:

Herunterladen 1

Herunterladen 2

Anmerkungen:

• Button 1 öffnete die Textdatei in einem neuen Browser-Tab. Allerdings würde Button 1 die Datei herunterladen, für Dateitypen, die er nicht selbst öffnen konnte (zum Beispiel .apk-Dateien).
• Button 2 hat die Textdatei heruntergeladen. Allerdings hat Button 2 die Datei nur heruntergeladen, wenn der Pfad relativ war. Als ich den Pfad in einen absoluten Pfad geändert habe, hat der Browser sie dann in einem neuen Tab geöffnet.

Ich habe das auf Firefox, Safari und Chrome getestet.

Answer 2

Alles, was du tun musst, ist 'Download' hinter dem Dateinamen hinzuzufügen, den du eingegeben hast:

Vorher:

Download!

Nachher

Download!

Stelle sicher, dass 'Download' mit einem Großbuchstaben geschrieben ist, ansonsten wird es nicht funktionieren.

Answer 3

Hallo, ich füge einfach das Wort 'Download' ein und es funktioniert gut.

Download

Also in JavaScript kannst du das Folgende verwenden:

function onStartedDownload(id) {
  console.log(`Download gestartet: ${id}`);
}

function onFailed(error) {
  console.log(`Download fehlgeschlagen: ${error}`);
}

var downloadUrl = "https://example.org/image.png";

var downloading = browser.downloads.download({
  url : downloadUrl,
  filename : 'mein-bild-wieder.png',
  conflictAction : 'uniquify'
});

downloading.then(onStartedDownload, onFailed);

Answer 4

Wenn Sie nach einer Vanilla JavaScript-Lösung (ohne jQuery) suchen und das HTML5-Attribut nicht verwenden möchten, könnten 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
}

Datei herunterladen
Herunterladen

Answer 5

[Herunterladen!](file.doc)
Dies lädt die Datei als .doc herunter, da die Dateierweiterung nicht unterstützt wird, um im Browser geöffnet zu werden.
Einer der einfachsten Wege für einen Button und die text-decoration wird helfen, um die Textdekoration des Links zu ändern oder zu entfernen.