(HTML) Scarica un file PDF invece di aprirlo nel browser quando fai clic

Mi chiedevo come rendere scaricabile un collegamento a un file PDF invece di aprirli nel browser? Come si fa in html? (Presumo che sia fatto tramite javascript o qualcosa del genere).

Non puoi farlo con HTML. È una soluzione basata su server. È necessario eseguire lo streaming del file in modo che il browser attivi la finestra di dialogo di salvataggio.

Consiglierei di non farlo. Il modo in cui un utente interagisce con un PDF dovrebbe essere lasciato all'utente.

AGGIORNAMENTO (2014):

Quindi ... questa risposta riceve ancora molti voti negativi. Presumo che parte di ciò sia che questo è stato risposto 4 anni fa e come fa notare Sarim, ora c'è l' attributo HTML 5download che può gestirlo.

Sono d'accordo e penso che la risposta di Sarim sia buona (probabilmente dovrebbe essere la risposta scelta se l'OP ritorna). Tuttavia, questa risposta è ancora il modo affidabile per gestirla (come sottolinea la risposta di Yiğit Yener e - stranamente - le persone sono d'accordo). Sebbene l'attributo download abbia ottenuto il supporto, è ancora imprevedibile:

http://caniuse.com/#feat=download

Con html5, ora è possibile. Imposta un elemento "download" nell'elemento.

<a href="http://link/to/file" download="FileName">Download it!</a>

Fonte: http://updates.html5rocks.com/2011/08/Downloading-resources-in-HTML5-a-download

Ciò è possibile solo impostando un'intestazione di risposta http dal codice lato server. Vale a dire;

Content-Disposition: attachment; filename=fname.ext

È necessario modificare le intestazioni http inviate. A seconda del tuo server, puoi modificare il tuo .htaccess come segue:

<FilesMatch "\.(?i:pdf)$">
  ForceType application/octet-stream
  Header set Content-Disposition attachment
</FilesMatch>

dovrai usare uno script PHP (o un altro linguaggio lato server per questo)

<?php
// We'll be outputting a PDF
header('Content-type: application/pdf');

// It will be called downloaded.pdf
header('Content-Disposition: attachment; filename="downloaded.pdf"');

// The PDF source is in original.pdf
readfile('original.pdf');
?>

e usa explore per reindirizzare (riscrivere) al file PHP invece che al pdf

Puoi usare

Response.AddHeader("Content-disposition", "attachment; filename=" + Name);

Guarda questo esempio:

http://www.codeproject.com/KB/aspnet/textfile.aspx

Questo vale per ASP.NET. Sono sicuro che puoi trovare soluzioni simili in tutte le altre lingue lato server. Tuttavia non esiste una soluzione javascript al meglio delle mie conoscenze.

Senza l'attributo html5 si può ottenere ciò utilizzando php:

Crea un file php denominato download.php con questo codice:

<?php
ob_start();
$file = "yourPDF.pdf"

if (file_exists($file)) 
{
    header('Content-Description: File Transfer');
    header('Content-Type: application/octet-stream');
    header('Content-Disposition: attachment; filename='.basename($file));
    header('Content-Transfer-Encoding: binary');
    header('Expires: 0');
    header('Cache-Control: must-revalidate');
    header('Pragma: public');
    header('Content-Length: ' . filesize($file));
    ob_clean();
    flush();
    readfile($file);
    exit();
}

Ora se vuoi avviare automaticamente il download del pdf scrivi questo javascript:

<script>window.location = "download.php";</script>

Se vuoi che funzioni su un collegamento, usa questo ...

<a href='javascript:window.location = "download.php"'>
    Download it!
</a>

Quando vuoi scaricare direttamente qualsiasi immagine o file pdf dal browser invece di aprirlo in una nuova scheda, allora in javascript dovresti impostare il valore per scaricare l'attributo di creare un collegamento dinamico

    var path= "your file path will be here"; 
    var save = document.createElement('a');  
    save.href = filePath; 
    save.download = "Your file name here"; 
    save.target = '_blank'; 
    var event = document.createEvent('Event');
    event.initEvent('click', true, true); 
    save.dispatchEvent(event);
   (window.URL || window.webkitURL).revokeObjectURL(save.href);

Per il nuovo aggiornamento di Chrome alcuni eventi temporali non funzionano. per quel codice verrà utilizzato il seguente

  var path= "your file path will be here"; 
    var save = document.createElement('a');  
    save.href = filePath; 
    save.download = "Your file name here"; 
    save.target = '_blank'; 
    document.body.appendChild(save);
    save.click();
    document.body.removeChild(save);

L'aggiunta e la rimozione di un bambino è utile per Firefox, solo per il browser Internet Explorer. Su Chrome funzionerà senza aggiungere e rimuovere il bambino

La soluzione che ha funzionato meglio per me è stata quella scritta da Nick sul suo blog

L'idea di base della sua soluzione è quella di utilizzare il mod di intestazione dei server Apache e modificare .htaccess per includere una direttiva FileMatch che costringe tutti i file * .pdf ad agire come un flusso invece di un allegato. Sebbene ciò non implichi effettivamente la modifica dell'HTML (come da domanda originale) non richiede alcuna programmazione di per sé.

Il primo motivo per cui ho preferito l'approccio di Nick è perché mi ha permesso di impostarlo in base alla cartella in modo che i PDF in una cartella potessero ancora essere aperti nel browser consentendo agli altri (quelli che vorremmo che gli utenti modificassero e quindi ricaricassero) da forzare come download.

Vorrei anche aggiungere che esiste un'opzione con i PDF per inviare / inviare moduli compilabili tramite un'API ai tuoi server, ma l'implementazione richiede del tempo.

La seconda ragione è che il tempo è una considerazione. Anche la scrittura di un gestore di file PHP per forzare la disposizione del contenuto nell'header () richiederà meno tempo di un'API, ma comunque più tempo dell'approccio di Nick.

Se sai come attivare una mod Apache e modificare il file .htaccss, puoi ottenerlo in circa 10 minuti. Richiede hosting Linux (non Windows). Questo potrebbe non essere un approccio appropriato per tutti gli usi in quanto richiede l'accesso al server di alto livello per la configurazione. Pertanto, se hai detto accesso è probabilmente perché sai già come fare queste due cose. In caso contrario, controlla il blog di Nick per ulteriori istruzioni.

Poiché il modo html5 (la mia risposta precedente) non è disponibile in tutti i browser, ecco un altro modo leggermente hackerato.

Questa soluzione richiede che tu stia servendo il file previsto dallo stesso dominio, OPPURE abbia l'autorizzazione CORS.

1. Prima scarica il contenuto del file tramite XMLHttpRequest (Ajax).
2. Quindi crea un URI dati codificando in base64 il contenuto del file e imposta il tipo di supporto su application/octet-stream. Il risultato dovrebbe assomigliare

data:application/octet-stream;base64,SGVsbG8sIFdvcmxkIQ%3D%3D

Adesso imposta location.href = data. Ciò farà sì che il browser scarichi il file. Sfortunatamente non puoi impostare il nome o l'estensione del file in questo modo. Giocherellare con il tipo di media potrebbe produrre qualcosa.

Vedi i dettagli: https://developer.mozilla.org/en-US/docs/Web/HTTP/data_URIs

Avevo bisogno di farlo per i file creati con nomi dinamici in una cartella particolare e serviti da IIS.

Questo ha funzionato per me:

• In IIS, vai a quella cartella e fai doppio clic su Intestazioni risposta HTTP.

• Aggiungi una nuova intestazione con le seguenti informazioni:

  Name: content-disposition Value: attachment

(da: http://forums.iis.net/t/1175103.aspx?add+CustomHeaders+only+for+certain+file+types+ )

Se stai usando HTML5 (e immagino che ora tutti lo usino), c'è un attributo chiamato download .

ex. <a href="somepathto.pdf" download="filename">

qui filenameè facoltativo, ma se fornito, prenderà questo nome per il file scaricato.

Il comportamento dovrebbe dipendere da come è impostato il browser per gestire i vari tipi MIME. In questo caso il tipo MIME è application / pdf. Se vuoi forzare il browser a scaricare il file puoi provare a forzare un diverso tipo MIME sui file PDF. Raccomando di non farlo perché dovrebbe essere la scelta degli utenti cosa accadrà quando apriranno un file PDF.

Puoi utilizzare download.js ( https://github.com/rndme/download e http://danml.com/download.html ). Se il file si trova in un URL esterno, devi effettuare una richiesta Ajax, ma se non lo è, puoi utilizzare la funzione:

download(Path, name, mime)

Leggi la loro documentazione per maggiori dettagli in GitHub.

Finalmente ho trovato ...... crea tag di ancoraggio dinamico e fai clic su di esso

<script> 
   $('#myclick').click(function(){
       $('body').append('<a id="link" href="mypdf.pdf" 
        download="Payment.pdf">&nbsp;</a>');
       $('#link')[0].click();
   });
</script>

"Payment.pdf" è solo per il nome personalizzato.