2010-06-19 6 views
21

Angenommen, wir haben einen PDF-Link "http://manuals.info.apple.com/en/iphone_user_guide.pdf" (nur zum Beispiel und damit Sie wissen, dass die Datei nicht auf meinem Server ist, habe ich nur den Link) ... jetzt Ich muss eine Schaltfläche auf meiner Website bereitstellen, die die Datei herunterladen wird.Erzwingen Sie einen pdf-Link mit Javascript/Ajax/Jquery

Ich habe verschiedene Dinge wie window.open, href etc. Methoden ausprobiert, aber es öffnet den Link auf andere Fenster. Ich weiß das, weil jetzt alle Browser mit einem Adobe-Plugin, das es in einem anderen Fenster öffnet, aber immer noch gibt es keine Möglichkeit, die ich den Benutzer die Option des Downloads lieber als durch clientseitige Skripting ..

plz Hilfe .. danke

+0

Hast du dieses überprüfen? http://stackoverflow.com/questions/349067/download-a-file-using-javascript – Fopfong

Antwort

19

Verwenden die HTML5 "download" -Attribut

<a href="iphone_user_guide.pdf" download="iPhone User's Guide.PDF">click me</a> 

Achtung: als dies geschrieben wurde, funktioniert nicht in IE/Safari finden Sie unter: caniuse.com/#search=download

Edit: Wenn Sie sich für eine tatsächlichen JavaScript-Lösung finden Sie unter lajarre's answer

+0

Wie hilft das in HTML4? Gibt es einen anderen Weg, es zu tun? – Jacques

+0

hi, ich habe einen gleichen Code verwendet, aber dieser Code funktioniert nicht in Safari könnten Sie mir vorschlagen, ein gutes Plugin, das erlaubt ist zu zwingen Download PDF-Datei in Javascript. –

+0

laut caniuse http://caniuse.com/#search=download wird dies derzeit in Safari nicht unterstützt. Ich rate nur, aber Sie können möglicherweise 'contentType' von jquery.ajax verwenden, um dies zu erreichen. Andernfalls, wenn Sie die Kontrolle über den Server haben, können Sie ihm natürlich mitteilen, dass er die Datei mit einem binären Mime-Typ senden soll. – sarink

7

Mit JavaScript ist es sehr schwierig, wenn nicht unmöglich (?). Ich würde vorschlagen, eine Art Code-Behind-Sprache wie PHP, C# oder Java zu verwenden. Wenn Sie PHP verwenden, könnten Sie in der Seite Ihre Schaltfläche Beiträge, tun Sie etwas wie folgt aus:

<?php 
header('Content-type: application/pdf'); 
header('Content-disposition: attachment; filename=filename.pdf'); 
readfile("http://manuals.info.apple.com/en/iphone_user_guide.pdf"); 
?> 

Dies gilt auch für JS scheint zu funktionieren (von http://www.phpbuilder.com/board/showthread.php?t=10149735):

<body> 
<script> 
function downloadme(x){ 
myTempWindow = window.open(x,'','left=10000,screenX=10000'); 
myTempWindow.document.execCommand('SaveAs','null','download.pdf'); 
myTempWindow.close(); 
} 
</script> 

<a href=javascript:downloadme('http://manuals.info.apple.com/en/iphone_user_guide.pdf');>Download this pdf</a> 
</body> 
+0

es funktioniert nicht. –

30

Hier ist eine Javascript Lösung (für Leute wie mich, die waren auf der Suche nach einer Antwort auf den Titel) auf der Suche:

function SaveToDisk(fileURL, fileName) { 
    // for non-IE 
    if (!window.ActiveXObject) { 
     var save = document.createElement('a'); 
     save.href = fileURL; 
     save.target = '_blank'; 
     save.download = fileName || 'unknown'; 

     var evt = new MouseEvent('click', { 
      'view': window, 
      'bubbles': true, 
      'cancelable': false 
     }); 
     save.dispatchEvent(evt); 

     (window.URL || window.webkitURL).revokeObjectURL(save.href); 
    } 

    // for IE < 11 
    else if (!! window.ActiveXObject && document.execCommand)  { 
     var _window = window.open(fileURL, '_blank'); 
     _window.document.close(); 
     _window.document.execCommand('SaveAs', true, fileName || fileURL) 
     _window.close(); 
    } 
} 

Quelle: http://muaz-khan.blogspot.fr/2012/10/save-files-on-disk-using-javascript-or.html

Leider ist die für mich arbeiten mit IE11, die nicht neu Mouseevent akzeptiert. Ich verwende die folgenden in diesem Fall:

//... 
try { 
    var evt = new MouseEvent(...); 
} catch (e) { 
    window.open(fileURL, fileName); 
} 
//... 
+1

Fehler fehlgeschlagen keine Datei Bugfixer

+0

danke für die Methode. es speichert die Dateien als "unbekannt" Ich änderte es in fileURL es gespeichert es als "http --- localhost-ielts/gtreading-workbook-Activity_3_1.pdf" Irgendeine Idee, wie Sie es beheben? – hijacker83

+0

Danke! Für mich geht das. :) –

0

In JavaScript verwenden, die prevent() Methode des Ereignisses args Parameter.

<a href="no-script.html">Download now!</a> 

$('a').click(function(e) { 
    e.preventDefault(); // stop the browser from following 
    window.location.href = 'downloads/file.pdf'; 
}); 
0

Wenn htaccess ist eine Option, diese werden alle PDF-Links herunterladen statt Öffnung im Browser machen

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