Come determinare se il browser supporta gli URI di dati per collegamenti ipertestuali

Question

C'è un modo per determinare se un browser supporta l'uso di URI di dati per collegamenti ipertestuali, oltre allo sniffing del browser?

Ecco il quadro:

Sto creando un link che o scarica un file CSV di informazioni generate tramite JavaScript utilizzando una connessione dati a portata di mano URI o, se il browser non supporta l'utilizzo di URI di dati per i collegamenti ipertestuali, genera una tabella HTML del contenuto desiderato.

In questo momento il mio codice controlla l'esistenza della proprietà window.URL, che non esiste in IE9 e sotto. (Questo è il lavoro va bene per ora, perché gli utenti di IE che devo sostenere sono in esecuzione in modalità di compatibilità, che emula IE8.)

if(window.URL){ 
    downloadLink.href = "data:text/csv;charset=utf-8," + encodeURIComponent(data); 
    downloadLink.setAttribute("download","download.csv"); 
}else{ 
    downloadLink.href= "#"; 
    downloadLink.innerHTML = "table view"; 
    downloadLink.onclick = function(){ 
     // build and display HTML table 
     return false; 
    }; 
} 

Tuttavia, c'è una certa sovrapposizione con le versioni più recenti di Internet Explorer (10, 11, così come Edge) in quanto supportano l'oggetto window.URL ma fanno non consenti URI di dati per collegamenti ipertestuali.

Come faccio a garantire che il collegamento per scaricare un CSV non venga mai visualizzato su un browser che non supporta tale sfarzo?

Answer 1

Credo di aver trovato la risposta. Prova a rilevare la presenza di un attributo download su un elemento <a>.

var browserSupportsDataURIsForHyperlinks = 
    typeof document.createElement("a").download !== "undefined"; 

o

var browserSupportsDataURIsForHyperlinks = 
    "download" in document.createElement("a"); 

... Nel mio caso, ho già avuto un tag di ancoraggio per lavorare con (downloadLink), quindi non ho bisogno di crearne uno nuovo:

if(typeof downloadLink.download !== "undefined"){ 
    downloadLink.href = "data:text/csv;charset=utf-8," + encodeURIComponent(data); 
    downloadLink.setAttribute("download","download.csv"); 
}else{ 
    downloadLink.href= "#"; 
    downloadLink.innerHTML = "table view"; 
    downloadLink.onclick = function(){ 
     // build and display HTML table 
     return false; 
    }; 
} 

Se qualcuno vede qualcosa di sbagliato in questo approccio, per favore fatemelo sapere.