(HTML) Laden Sie eine PDF-Datei herunter, anstatt sie beim Klicken im Browser zu öffnen

Ich habe mich gefragt, wie ich einen PDF-Dateilink zum Herunterladen machen kann, anstatt ihn im Browser zu öffnen. Wie geht das in HTML? (Ich würde annehmen, dass es über Javascript oder so gemacht wird).

Mit HTML ist dies nicht möglich. Es ist eine serverbasierte Lösung. Sie müssen die Datei streamen, damit der Browser dann den Speicherdialog auslöst.

Ich würde raten, dies nicht zu tun. Wie ein Benutzer mit einer PDF-Datei interagiert, sollte dem Benutzer überlassen bleiben.

UPDATE (2014):

Also ... diese Antwort bekommt immer noch viele Downvotes. Ich gehe davon aus, dass dies vor 4 Jahren beantwortet wurde und wie Sarim betont, gibt es jetzt das HTML 5- downloadAttribut , das damit umgehen kann.

Ich stimme zu und denke, dass Sarims Antwort gut ist (es sollte wahrscheinlich die gewählte Antwort sein, wenn das OP jemals zurückkehrt). Diese Antwort ist jedoch immer noch die zuverlässige Methode, um damit umzugehen (wie die Antwort von Yiğit Yener hervorhebt und - seltsamerweise - die Leute zustimmen). Obwohl das Download-Attribut Unterstützung erhalten hat, ist es immer noch fleckig:

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

Mit HTML5 ist das jetzt möglich. Stellen Sie ein "Download" -Attr im Element ein.

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

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

Dies ist nur möglich, wenn ein http-Antwortheader durch den serverseitigen Code festgelegt wird. Nämlich;

Content-Disposition: attachment; filename=fname.ext

Sie müssen die gesendeten http-Header ändern. Abhängig von Ihrem Server können Sie Ihren .htaccess wie folgt ändern:

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

Sie müssen ein PHP-Skript (oder eine andere serverseitige Sprache dafür) verwenden.

<?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');
?>

und verwenden Sie httacces, um zur PHP-Datei anstatt zum PDF umzuleiten (umzuschreiben)

Sie können verwenden

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

Schauen Sie sich dieses Beispiel an:

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

Dies gilt für ASP.NET. Ich bin sicher, dass Sie ähnliche Lösungen in allen anderen serverseitigen Sprachen finden können. Nach meinem besten Wissen gibt es jedoch keine Javascript-Lösung.

Ohne das HTML5-Attribut kann man dies mit php erreichen:

Erstellen Sie eine PHP-Datei mit dem Namen download.php mit diesem Code:

<?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();
}

Wenn Sie nun automatisch mit dem Herunterladen von PDF-Dateien beginnen möchten, schreiben Sie dieses Javascript:

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

Wenn dies für einen Link funktionieren soll, verwenden Sie diesen ...

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

Wenn Sie ein Bild oder eine PDF-Datei direkt vom Browser herunterladen möchten, anstatt sie in einem neuen Tab zu öffnen, sollten Sie in Javascript den Wert für das Download-Attribut zum Erstellen eines dynamischen Links festlegen

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

Bei einem neuen Chrome-Update funktioniert ein Zeitereignis nicht. Für diesen wird der folgende Code verwendet

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

Das Anhängen eines Kindes und das Entfernen eines Kindes ist nur für Firefox, den Internet Explorer-Browser, nützlich. Auf Chrome funktioniert es, ohne dass ein Kind angehängt und entfernt wird

Die Lösung, die für mich am besten funktioniert hat, war die, die Nick in seinem Blog geschrieben hat

Die Grundidee seiner Lösung besteht darin, den Header-Mod des Apache-Servers zu verwenden und den .htaccess so zu bearbeiten, dass er eine FileMatch-Direktive enthält, die alle * .pdf-Dateien dazu zwingt, anstelle eines Anhangs als Stream zu fungieren. Dies beinhaltet zwar nicht das Bearbeiten von HTML (gemäß der ursprünglichen Frage), erfordert jedoch keine Programmierung an sich.

Der erste Grund, warum ich Nicks Ansatz vorgezogen habe, ist, dass ich ihn auf Ordnerbasis festlegen konnte, sodass PDF-Dateien in einem Ordner weiterhin im Browser geöffnet werden können, während andere zugelassen werden (diejenigen, die Benutzer bearbeiten und dann erneut hochladen sollen). als Downloads gezwungen werden.

Ich möchte auch hinzufügen, dass es bei PDFs eine Option gibt, ausfüllbare Formulare über eine API an Ihre Server zu senden / zu senden, aber die Implementierung dauert eine Weile.

Der zweite Grund war, dass Zeit eine Überlegung ist. Das Schreiben eines PHP-Datei-Handlers, um die Inhaltsdisposition im Header () zu erzwingen, dauert ebenfalls weniger Zeit als eine API, aber immer noch länger als Nicks Ansatz.

Wenn Sie wissen, wie man einen Apache-Mod einschaltet und die .htaccss bearbeitet, können Sie dies in etwa 10 Minuten erhalten. Es erfordert Linux-Hosting (nicht Windows). Dies ist möglicherweise nicht für alle Verwendungszwecke geeignet, da für die Konfiguration ein Serverzugriff auf hoher Ebene erforderlich ist. Wenn Sie also Zugriff gesagt haben, liegt dies wahrscheinlich daran, dass Sie bereits wissen, wie diese beiden Dinge zu tun sind. Wenn nicht, überprüfen Sie Nicks Blog für weitere Anweisungen.

Da der HTML5-Weg (meine vorherige Antwort) nicht in allen Browsern verfügbar ist, ist hier ein weiterer leicht hackiger Weg.

Für diese Lösung müssen Sie die beabsichtigte Datei aus derselben Domäne bereitstellen, ODER Sie haben die CORS-Berechtigung.

1. Laden Sie zuerst den Inhalt der Datei über XMLHttpRequest (Ajax) herunter.
2. Erstellen Sie dann einen Daten-URI, indem Sie base64 den Inhalt der Datei codieren und den Medientyp auf festlegen application/octet-stream. Ergebnis sollte so aussehen

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

Jetzt einstellen location.href = data. Dadurch lädt der Browser die Datei herunter. Leider können Sie den Dateinamen oder die Erweiterung nicht auf diese Weise festlegen. Das Fummeln mit dem Medientyp könnte etwas bringen.

Siehe Details: https://developer.mozilla.org/en-US/docs/Web/HTTP/data_URIs

Ich musste dies für Dateien tun, die mit dynamischen Namen in einem bestimmten Ordner erstellt und von IIS bereitgestellt wurden.

Das hat bei mir funktioniert:

• Wechseln Sie in IIS zu diesem Ordner und doppelklicken Sie auf HTTP-Antwortheader.

• Fügen Sie einen neuen Header mit den folgenden Informationen hinzu:

  Name: content-disposition Value: attachment

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

Wenn Sie HTML5 verwenden (und ich denke, dass heutzutage jeder das verwendet), gibt es ein Attribut namens download.

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

Hier filenameist optional, aber falls angegeben, wird dieser Name für die heruntergeladene Datei verwendet.

Das Verhalten sollte davon abhängen, wie der Browser für die Verarbeitung verschiedener MIME-Typen eingerichtet ist. In diesem Fall lautet der MIME-Typ application / pdf. Wenn Sie den Browser zum Herunterladen der Datei zwingen möchten, können Sie versuchen, einen anderen MIME-Typ für die PDF-Dateien zu erzwingen. Ich empfehle dagegen, da der Benutzer selbst entscheiden sollte, was beim Öffnen einer PDF-Datei passieren soll.

Sie können download.js verwenden ( https://github.com/rndme/download und http://danml.com/download.html ). Wenn sich die Datei in einer externen URL befindet, müssen Sie eine Ajax-Anfrage stellen. Ist dies nicht der Fall, können Sie die folgende Funktion verwenden:

download(Path, name, mime)

Lesen Sie die Dokumentation für weitere Details im GitHub.

Endlich habe ich gefunden ...... dynamisches Ankertag erstellen und darauf klicken

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

'Payment.pdf' ist nur für benutzerdefinierte Namen.