Een bestandsdownload activeren wanneer u op een HTML-knop of JavaScript klikt

Dit is gek, maar ik weet niet hoe ik dit moet doen, en omdat de woorden zo vaak voorkomen, is het moeilijk te vinden wat ik nodig heb op zoekmachines. Ik denk dat dit makkelijk te beantwoorden moet zijn.

Ik wil een eenvoudige bestandsdownload, die hetzelfde zou doen als dit:

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

Maar ik wil een HTML-knop gebruiken, b.v. een van deze:

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

Is het ook mogelijk om een ​​eenvoudige download via JavaScript te activeren?

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

Ik ben zeker niet op zoek naar een manier om een ​​anker te maken dat eruitziet als een knop, back-endscripts te gebruiken of te knoeien met serverheaders of mime-types.


Antwoord 1, autoriteit 100%

Voor de knop die u kunt doen

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

Antwoord 2, autoriteit 98%

U kunt een download activeren met het HTML5-kenmerk download.

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

Waar:

  • path_to_file is een pad dat wordt omgezet in een URL op de dezelfde oorsprong. Dat betekent dat de pagina en het bestand hetzelfde domein, subdomein, protocol (HTTP versus HTTPS) en poort (indien gespecificeerd) moeten delen. Uitzonderingen zijn blob: en data: (die altijd work), en file: (wat nooit werkt).
  • proposed_file_name is de bestandsnaam waarnaar moet worden opgeslagen. Als het leeg is, gebruikt de browser standaard de naam van het bestand.

Documentatie: MDN, HTML-standaard voor downloaden, HTML-standaard op download, CanIUse


Antwoord 3, autoriteit 32%

HTML:

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

Antwoord 4, autoriteit 22%

Met jQuery:

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

Antwoord 5, autoriteit 21%

Een eenvoudige JS-oplossing:

function download(url) {
  const a = document.createElement('a')
  a.href = url
  a.download = url.split('/').pop()
  document.body.appendChild(a)
  a.click()
  document.body.removeChild(a)
}

Antwoord 6, autoriteit 8%

Je kunt het doen met “truc” met onzichtbaar iframe. Wanneer u “src” erop instelt, reageert de browser alsof u op een link met dezelfde “href” zou klikken. In tegenstelling tot een oplossing met formulier, kunt u hiermee extra logica insluiten, bijvoorbeeld het activeren van de download na een time-out, wanneer aan bepaalde voorwaarden is voldaan, enz.

Het is ook erg stil, er is geen knipperend nieuw venster/tabblad zoals bij het gebruik van window.open.

HTML:

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

Javascript:

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

Antwoord 7, autoriteit 6%

Bootstrap-versie

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

Gedocumenteerd in Bootstrap 4-documenten en werkt ook in Bootstrap 3.


Antwoord 8, autoriteit 4%

Ik denk dat dit de oplossing is die u zocht

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

Ik heb een geval gehad waarin mijn Javascript een CSV-bestand genereerde. Aangezien er geen externe URL is om het te downloaden, gebruik ik de volgende implementatie.

downloadCSV: function(data){
    var MIME_TYPE = "text/csv";
    var blob = new Blob([data], {type: MIME_TYPE});
    window.location.href = window.URL.createObjectURL(blob);
}

Antwoord 9, autoriteit 3%

Je kunt de downloadlink verbergen en de knop erop laten klikken.

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

Antwoord 10, autoriteit 3%

Hoe zit het met:

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

Antwoord 11

Als u op zoek bent naar een vanille JavaScript-oplossing (geen jQuery) en zonder het HTML5-kenmerk te gebruiken, kunt u dit proberen.

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>

Antwoord 12

Dit is wat uiteindelijk voor mij werkte, aangezien het te downloaden bestand werd bepaald toen de pagina werd geladen.

JS om het actiekenmerk van het formulier bij te werken:

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

JS aanroepen om het actiekenmerk van het formulier bij te werken:

<body onLoad="setFormAction();">

Formulier tag met de verzendknop:

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

Het volgende werkte NIET:

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

Antwoord 13

Overal tussen uw <body> en </body> tags, plaats een knop met de onderstaande code:

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

Dit gaat zeker werken!


Antwoord 14

Als je het formulier niet kunt gebruiken, past een andere benadering met downloadjs goed. Downloadjs gebruiken blob en html 5 file API onder de motorkap:

<div onClick=(()=>{downloadjs(url, filename)})/>

*het is jsx/react-syntaxis, maar kan worden gebruikt in pure html


Antwoord 15

In mijn oorspronkelijke antwoord bood ik een omweg die niet langer werkt: als het te downloaden bestand zich niet op dezelfde server bevindt, werkt het kenmerk download niet. Het probleem is dat het attribuut download alleen werkt als het te downloaden bestand zich op dezelfde server van het tabblad bevindt. Anderen hebben ook met dit probleem te maken gehad en het probleem wordt uitgebreid behandeld op Chrome-downloadkenmerk werkt niet .

Oorspronkelijk antwoord:

Er is een verschil tussen het laden van een bestand en het downloaden van een bestand. De volgende html-code laadt een bestand:

<a href="http://www.fbi.gov/top-secret.pdf">loading on the same tab</a>

Nadat u op deze link heeft geklikt, wordt uw huidige tabblad vervangen door het pdf-bestand dat vervolgens kan worden gedownload. Door met de rechtermuisknop op deze link te klikken, kunt u het menu-item link opslaan als kiezen om het bestand direct te downloaden. Als u een opslaan als-dialoogvenster wilt krijgen door op een dergelijke link te klikken, kunt u de volgende code gebruiken:

<a href="http://www.fbi.gov/top-secret.pdf?download=1">save as...</a>

Uw browser zal dit bestand onmiddellijk downloaden als u ervoor kiest om een ​​downloadmap in uw opties te gebruiken. Anders biedt uw browser een dialoogvenster voor opslaan als aan.

Je kunt ook een knop kiezen om te downloaden:

<button type="submit" onclick="window.open('http://www.fbi.gov/top-secret.pdf?download=1')">
    save as...
</button>

Als u de link op een nieuw tabblad wilt laden, neemt u

<a href="http://www.fbi.gov/top-secret.pdf" target="_blank">loading on a new tab</a>

Een formulierelement houdt geen rekening met de richtlijn ?download=1. Het houdt alleen rekening met de richtlijn target=”_blank”:

<form method="get" action="http://www.fbi.gov/top-secret.pdf" target="_blank">
    <button type="submit">loading on a new tab</button>
</form>

Antwoord 16

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

Een van de eenvoudigste manieren om een ​​knop en de text-decoration te gebruiken, helpt om de tekstdecoratie van de link te wijzigen of te verwijderen.


Antwoord 17

In mijn testen werkt het volgende voor alle bestandstypen en browsers, zolang je een relatieve link gebruikt:

<a href="/assets/hello.txt" download="my_file.txt"><button>Download 2</button></a>
  • /assets/hello.txt is slechts een relatief pad op mijn site. Verander het in je eigen relatieve pad.
  • my_file.txt is de naam die u wilt dat het bestand wordt genoemd wanneer het wordt gedownload.

Uitleg

Het viel me op dat er onder veel van de antwoorden opmerkingen stonden waarin stond dat de browser alleen zou proberen het bestand zelf te openen in plaats van het te downloaden, afhankelijk van het bestandstype. Ik ontdekte dat dit waar was.

Ik heb twee knoppen gemaakt om het uit te testen met behulp van twee verschillende methoden:

voer hier de afbeeldingsbeschrijving in

<button onclick="window.location.href='/assets/hello.txt';">Download 1</button>
<a href="/assets/hello.txt" download="my_file.txt"><button>Download 2</button></a>

Opmerkingen:

  • Knop 1 opende het tekstbestand in een nieuw browsertabblad. Knop 1 zou echter het bestand downloaden voor bestandstypen die het zelf niet kon openen (bijvoorbeeld .apk-bestanden).
  • Knop 2 heeft het tekstbestand gedownload. Knop 2 heeft het bestand echter alleen gedownload als het pad relatief was. Toen ik het pad veranderde in een absoluut pad, opende de browser het in een nieuw tabblad.

Ik heb dit getest in Firefox, Safari en Chrome.


Antwoord 18

Hallo, ik voeg alleen het woord ‘download’ toe en het werkt goed.

<a href="file.pdf" download>Download</a>

Dus in javascript kun je het volgende gebruiken:

function onStartedDownload(id) {
  console.log(`Started downloading: ${id}`);
}
function onFailed(error) {
  console.log(`Download failed: ${error}`);
}
var downloadUrl = "https://example.org/image.png";
var downloading = browser.downloads.download({
  url : downloadUrl,
  filename : 'my-image-again.png',
  conflictAction : 'uniquify'
});
downloading.then(onStartedDownload, onFailed);

Antwoord 19

Een andere manier om dit te doen als u een complexe URL heeft, zoals file.doc?foo=bar&jon=doe, is door een verborgen veld in het formulier toe te voegen

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

geïnspireerd op @Cfreak antwoord dat niet compleet is


Antwoord 20

De oplossing die ik heb bedacht, is dat je het downloadkenmerk in de ankertag kunt gebruiken, maar het werkt alleen als je html-bestand op de server staat. maar je hebt misschien een vraag zoals tijdens het ontwerpen van een eenvoudige html-pagina, hoe kunnen we controleren of je daarvoor VS code live server of bracket live server kunt gebruiken en je zult zien dat je downloadattribuut zal werken, maar als je probeert het eenvoudig te openen door gewoon dubbelklikken op de html-pagina om het bestand te openen in plaats van het te downloaden.
conclusie: attribuutdownload in ankertag werkt alleen als je html-bestand geen server is.


Antwoord 21

Voor mij werkt het toevoegen van een knop in plaats van ankertekst heel goed.

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

Het is misschien niet oké volgens de meeste regels, maar het ziet er best goed uit.


Antwoord 22

Als u de tag <a> gebruikt, vergeet dan niet de volledige url te gebruiken die naar het bestand leidt — d.w.z.:

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

LEAVE A REPLY

Please enter your comment!
Please enter your name here

nineteen − 5 =

Other episodes