Come scaricare file invece di aprirli in nuova scheda con solo HTML

Nulla di più semplice con il nuovo attributo download


Come scaricare file invece di aprirli in nuova scheda con solo HTML

HTML come scaricare file invece di aprirli

Aggiungi l'attributo download e permetti di scaricare direttamente i file

Stai scrivendo dell'HTML e vorresti far scaricare al visitatore un file pdf.

Però, invece che essere scaricato, viene aperto dal web browser in un'altra scheda.

La soluzione a questo problema è davvero banale con l'HTML5 o meglio HTML. L'attributo download infatti esiste proprio per questo scopo (versioni dei browser che lo supportano).

Una riga di codice come questa infatti:

    
        
    

ha solo bisogno della definizione dell'attributo download:

    
        
    

L'attributo download richiede solo il nome con cui volete che il file venga scaricato dal web browser.

L'unica cosa a cui fare attenzione è che il file abbia la stessa origine del sito in cui è presente il codice con cui scaricarlo. Se si tenta di far scaricare un file di origine diversa, il download potrebbe non funzionare perché molte versioni di web browser non supportano la politica di download sui file multi-origine. Ad esempio, le versioni di Chrome precedenti alla 65 consentivano il download di file di cross-origin poi questa possibilità è stata rimossa con le versioni successive per tutelare la sicurezza dell'utente (fonte). Leggi questo per maggiori dettagli.

Per forzare il download da indirizzi diversi puoi utilizzare Content-Disposition nell'header HTTP (fonte).

Se ti è piaciuto questo articolo e vorresti leggerne altri quando disponibili, considera di aggiungere il Feed RSS in un aggregatore di notizie come Feedly oppure salva questo sito tra i preferiti e torna quando vuoi 👋


Author: Fantantonio 

Date: 08/02/2023

Categories: devtips

Tags: html html5 download cors