Download button

-1

Ich mache einen Audio-Player, und ich würde gerne eine Schaltfläche hinzufügen, die den aktuellen Titel herunterlädt. Ich habe die üblichen Lösungen ausprobiert, die Leute vorschlagen, aber diese öffnen nur die .mp3 in einem neuen Vorsprung und spielen es. Dies ist, was ich verwende:Download button

document.getElementById("dlButton").addEventListener("click", function(){ 
window.location = "tracks/CFKZ.mp3";});

ich eine andere Lösung here auf Stack-Überlauf sah:

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

ich das nicht verstehen. Es macht für mich keinen Sinn, warum eine Download-Schaltfläche Informationen an die Datei senden müsste, die heruntergeladen werden soll.

Quelle

2016-07-22 nth-chile

Clyde, was ist dlButton auf deinem Beitrag? –

Warum machst du nicht einfach einen Link? – SLaks

versuchen Sie dies [FileSaver] (https://github.com/eligrey/FileSaver.js/) Bibliothek –

HTML5-Lösung mit einem einfachen Anker-Tag mit dem 'Download' Attribute (kein Javascript benötigt):

<a href="/music/somefile.mp3" download="somefile.mp3">Download mp3</a>

das Download-Attribut kann auch die Datei umbenennen verwendet werden:

<a href ="/music/3ri3nlfkndfoiweuio.mp3" download="TheManWhoSoldTheWorld.mp3" >Download a Bowie Hit</a>

wird als ‚TheManWhoSoldTheWorld.mp3‘ herunterladen

bearbeiten für Cross-Browser-Unterstützung (setzt auf Modernizr - die Sie wenn besorgt verwenden sollten abou t Cross-Browser-Unterstützung https://modernizr.com/):

vielleicht wird diese Geige helfen: https://jsfiddle.net/abigwonderful/3jfqz5j0/2/ oder öffnen Sie einfach das Fenster in mehreren Browsern und klicken Sie auf 'Ausführen von beliebigem Code-Snippet' unter:

var a = document.createElement('a'); 
 
if (typeof a.download == "undefined") { 
 
    //append some text to inform the user 
 
    //they should right-click the link to download 
 
    //example: 
 
    var downloadDiv = document.getElementById('download'); 
 
    downloadDiv.innerHTML = "Right-click the link and select 'Save as...' to download the mp3"; 
 

 
}

<a href="/music/somefile.mp3" download="somefile.mp3">Download mp3</a> 
 
<div id="download"></div>

Quelle

2016-07-22 02:30:48 abigwonderful

Ja, aber dies wird Cross-Browser nicht unterstützt –

@Clyde verwenden Sie Modernisierer? – abigwonderful

nein, wie würde das helfen? –

Wie mit einem Anker-Tag, verwenden Sie einfach Bootstrap, um es wie eine Schaltfläche aussehen.

<a href="tracks/CFKZ.mp3" download="tracks/CFKZ.mp3">Download!</a>

Quelle

2016-07-22 02:26:36 XDProgrammer

Dies öffnet CFKZ.mp3 in einem neuen Tab und spielt es mit dem Standard-Audio-Player des Browsers ab, lädt es jedoch nicht herunter. –

versuchen Sie den Download attritus. Bitte siehe obigen Code bearbeiten. – XDProgrammer

Die beste Praxis für die Download-Links ist der folgende:

<a href="path/to/file" class="button" download>Some text</a>

Dies ist ziemlich gut Cross-Browser unterstützt. Sie können den Link mit einer Klasse Stil, um es wie ein Knopf aussehen zu lassen, vielleicht mit etwas wie folgt aus:

.button { 
    text-decoration: none !important; 
    border: 1px solid black; 
}

Edit: Wenn Sie diese verwenden möchten, und haben es in Safari oder IE funktionieren, schauen Sie in Verwendung etwas wie Modernizr.

Quelle

2016-07-22 02:30:41

hinweis: funktioniert nicht im internet explorer oder safari –

Ah das ist richtig. Ich bin an Modernizr sehr gewöhnt. –

Probieren Sie den folgenden Code und sehen Sie, ob es das ist, was Sie wollen

<a href="test.zip" download='test'><input type="button" value="Download Now"></a>

Quelle

2016-09-26 10:08:51

Download button

Antwort

Verwandte Themen