javascript - Enkleste måten å åpne et nedlastingsvindu uten å navigere bort fra siden

Hva er den beste måten på tvers av nettlesere å åpne en nedlastingsdialog (la oss anta at vi kan sette content-disposition: attachment i headerne) uten å navigere bort fra den nåværende siden, eller åpne popups, som ikke fungerer godt i Internet Explorer (IE) 6.

Svar #1

Denne JavaScripten er fin fordi den ikke åpner et nytt vindu eller en ny fane.

window.location.assign(url);

Svar #2

7 år har gått, og jeg vet ikke om det fungerer for IE6 eller ikke, men dette åpner OpenFileDialog i FF og Chrome.

var file_path = 'host/path/file.ext';
var a = document.createElement('A');
a.href = file_path;
a.download = file_path.substr(file_path.lastIndexOf('/') + 1);
document.body.appendChild(a);
a.click();
document.body.removeChild(a);

Svar #3

Jeg vet at spørsmålet ble stilt for 7 år og 9 måneder siden, men mange publiserte løsninger ser ikke ut til å fungere, for eksempel fungerer bruk av en <iframe> bare med Firefox og fungerer ikke med Chrome.

Beste løsning:

Den beste arbeidende løsningen for å åpne en filnedlastingspop-up i JavaScript er å bruke et HTML-linkelement, uten behov for å legge linkelementet til document.body som angitt i andre svar.

Du kan bruke følgende funksjon:

function downloadFile(filePath){
    var link=document.createElement('a');
    link.href = filePath;
    link.download = filePath.substr(filePath.lastIndexOf('/') + 1);
    link.click();
}

I min applikasjon bruker jeg det på denne måten:

downloadFile('report/xls/myCustomReport.xlsx');

Arbeidende demo:

function downloadFile(filePath) {
  var link = document.createElement('a');
  link.href = filePath;
  link.download = filePath.substr(filePath.lastIndexOf('/') + 1);
  link.click();
}

downloadFile("http://www.adobe.com/content/dam/Adobe/en/accessibility/pdfs/accessing-pdf-sr.pdf");

Merk:

  • Du må bruke link.download-attributtet slik at nettleseren ikke åpner filen i en ny fane og utløser nedlastingsvinduet.
  • Dette ble testet med flere filtyper (docx, xlsx, png, pdf, ...).

Svar #4

Jeg legger alltid til target="_blank" på nedlastingslenken. Dette vil åpne et nytt vindu, men så snart brukeren klikker lagre, lukkes det nye vinduet.

Svar #5

Sett dette i HTML-hodedelen, og sett url-variabelen til URL-en til filen som skal lastes ned:

<script type="text/javascript">  
function startDownload()  
{  
     var url='http://server/folder/file.ext';    
     window.open(url, 'Download');  
}  
</script>

Sett deretter dette i kroppen, som vil starte nedlastingen automatisk etter 5 sekunder:

<script type="text/javascript">  
setTimeout('startDownload()', 5000); //starts download after 5 seconds  
</script>

(Fra her.)

Svar #6

Jeg har lett etter en god måte å bruke JavaScript for å starte nedlasting av en fil, akkurat som dette spørsmålet antyder. Imidlertid har ikke disse svarene vært hjelpsomme. Jeg gjorde deretter noen testing i forskjellige nettlesere og har funnet ut at en iframe fungerer best i alle moderne nettlesere IE>8.

downloadUrl = "http://example.com/download/file.zip";
var downloadFrame = document.createElement("iframe"); 
downloadFrame.setAttribute('src',downloadUrl);
downloadFrame.setAttribute('class',"screenReaderText"); 
document.body.appendChild(downloadFrame);

class="screenReaderText" er min klasse for å style innhold som er til stede, men ikke synlig.

css :

.screenReaderText { 
  border: 0; 
  clip: rect(0 0 0 0); 
  height: 1px; 
  margin: -1px; 
  overflow: hidden; 
  padding: 0; 
  position: absolute; 
  width: 1px; 
}

samme som .visuallyHidden i html5boilerplate

Jeg foretrekker dette fremfor JavaScript window.open-metoden fordi hvis lenken er ødelagt, gjør iframe-metoden rett og slett ingenting, i motsetning til å omdirigere til en blank side som sier at filen ikke kunne åpnes.

window.open(downloadUrl, 'download_window', 'toolbar=0,location=no,directories=0,status=0,scrollbars=0,resizeable=0,width=1,height=1,top=0,left=0');
window.focus();

Relaterte artikler