(HTML) Pobierz plik PDF zamiast otwierać go w przeglądarce po kliknięciu

Zastanawiałem się, jak sprawić, by łącze do pliku PDF można było pobrać zamiast otwierać je w przeglądarce? Jak to się robi w html? (Zakładam, że jest to zrobione przez javascript lub coś w tym rodzaju).

Nie możesz tego zrobić za pomocą HTML. To rozwiązanie serwerowe. Musisz przesyłać strumieniowo plik, aby przeglądarka wyzwoliła okno dialogowe zapisu.

Radziłbym tego nie robić. Sposób interakcji użytkownika z plikiem PDF należy pozostawić użytkownikowi.

AKTUALIZACJA (2014):

Więc ... ta odpowiedź wciąż spotyka się z wieloma negatywnymi opiniami. Zakładam, że po części odpowiedź na to pytanie udzielono 4 lata temu i jak wskazuje Sarim, istnieje teraz atrybut HTML 5,download który może to obsłużyć.

Zgadzam się i uważam, że odpowiedź Sarima jest dobra (prawdopodobnie powinna to być odpowiedź wybrana, jeśli OP kiedykolwiek powróci). Jednak ta odpowiedź jest nadal niezawodnym sposobem na poradzenie sobie z tym (jak wskazuje odpowiedź Yiğita Yenera i - co dziwne - ludzie się z nią zgadzają). Chociaż atrybut pobierania zyskał poparcie, nadal jest nierówny:

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

Dzięki html5 jest to teraz możliwe. Ustaw atrybut „download” w elemencie.

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

Źródło: http://updates.html5rocks.com/2011/08/Downloading-resources-in-HTML5-a-download

Jest to możliwe tylko po ustawieniu nagłówka odpowiedzi http za pomocą kodu po stronie serwera. Mianowicie;

Content-Disposition: attachment; filename=fname.ext

Musisz zmienić wysłane nagłówki http. W zależności od serwera możesz zmodyfikować swój .htaccess w następujący sposób:

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

będziesz musiał użyć skryptu PHP (lub innego języka do tego celu po stronie serwera)

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

i użyj httacces do przekierowania (przepisania) do pliku PHP zamiast do pliku PDF

Możesz użyć

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

Sprawdź ten przykład:

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

Dotyczy to ASP.NET. Jestem pewien, że możesz znaleźć podobne rozwiązania we wszystkich innych językach po stronie serwera. Jednak o ile wiem, nie ma rozwiązania javascript.

Bez atrybutu html5 można to osiągnąć za pomocą php:

Utwórz plik php o nazwie download.php z tym kodem:

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

Teraz, jeśli chcesz automatycznie rozpocząć pobieranie pliku PDF, napisz ten javascript:

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

Jeśli chcesz, aby to działało na łączu, użyj tego ...

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

Jeśli chcesz bezpośrednio pobrać dowolny obraz lub plik pdf z przeglądarki zamiast otwierać go w nowej karcie, to w javascript należy ustawić wartość na pobranie atrybutu tworzenia dynamicznego łącza

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

W przypadku nowej aktualizacji Chrome czasami zdarzenie nie działa. do tego zostanie użyty następujący kod

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

Dołączanie elementu podrzędnego i usuwanie elementu podrzędnego jest przydatne tylko w przypadku Firefoksa, przeglądarki Internet Explorer. Na Chrome będzie działać bez dołączania i usuwania dziecka

Najlepszym rozwiązaniem dla mnie było to, które napisał Nick na swoim blogu

Podstawową ideą jego rozwiązania jest użycie modów nagłówkowych serwerów Apache i edycja pliku .htaccess, tak aby zawierała dyrektywę FileMatch, która wymusza działanie wszystkich plików * .pdf jako strumienia zamiast załącznika. Chociaż w rzeczywistości nie wymaga to edycji HTML (jak w oryginalnym pytaniu), nie wymaga żadnego programowania jako takiego.

Pierwszym powodem, dla którego wolałem podejście Nicka, jest to, że pozwoliło mi to ustawić je dla poszczególnych folderów, aby pliki PDF w jednym folderze mogły być nadal otwierane w przeglądarce, podczas gdy inne (te, które chcielibyśmy, aby użytkownicy mogli edytować, a następnie ponownie przesłać) być zmuszane jako pliki do pobrania.

Chciałbym również dodać, że w przypadku plików PDF istnieje opcja wysyłania / wysyłania formularzy do wypełnienia za pośrednictwem interfejsu API na serwery, ale implementacja zajmuje trochę czasu.

Drugim powodem było to, że liczy się czas. Napisanie procedury obsługi plików PHP w celu wymuszenia dyspozycji zawartości w nagłówku () również zajmie mniej czasu niż API, ale nadal będzie dłuższe niż podejście Nicka.

Jeśli wiesz, jak włączyć mod Apache i edytować pliki .htaccss, możesz to uzyskać w około 10 minut. Wymaga hostingu Linux (nie Windows). To może nie być odpowiednie podejście do wszystkich zastosowań, ponieważ wymaga dostępu do serwera wysokiego poziomu do konfiguracji. W związku z tym, jeśli powiedziałeś o dostępie, prawdopodobnie dlatego, że wiesz już, jak zrobić te dwie rzeczy. Jeśli nie, sprawdź blog Nicka, aby uzyskać więcej instrukcji.

Ponieważ sposób html5 (moja poprzednia odpowiedź) nie jest dostępny we wszystkich przeglądarkach, oto inny nieco hackowy sposób.

To rozwiązanie wymaga udostępniania zamierzonego pliku z tej samej domeny LUB posiadania uprawnienia CORS.

1. Najpierw pobierz zawartość pliku przez XMLHttpRequest (Ajax).
2. Następnie utwórz identyfikator URI danych przez kodowanie base64 zawartości pliku i ustaw typ nośnika na application/octet-stream. Wynik powinien wyglądać

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

Teraz gotowe location.href = data. Spowoduje to pobranie pliku przez przeglądarkę. Niestety nie możesz w ten sposób ustawić nazwy pliku ani rozszerzenia. Majstrowanie przy mediach może coś przynieść.

Zobacz szczegóły: https://developer.mozilla.org/en-US/docs/Web/HTTP/data_URIs

Musiałem to zrobić dla plików utworzonych z dynamicznymi nazwami w określonym folderze i obsługiwanych przez IIS.

To zadziałało dla mnie:

• W usługach IIS przejdź do tego folderu i kliknij dwukrotnie nagłówki odpowiedzi HTTP.

• Dodaj nowy nagłówek z następującymi informacjami:

  Name: content-disposition Value: attachment

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

Jeśli używasz HTML5 (i myślę, że teraz wszyscy go używają), istnieje atrybut o nazwie download.

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

tutaj filenamejest opcjonalne, ale jeśli zostanie podane, przyjmie tę nazwę dla pobranego pliku.

Zachowanie powinno zależeć od tego, jak przeglądarka jest skonfigurowana do obsługi różnych typów MIME. W tym przypadku typ MIME to application / pdf. Jeśli chcesz zmusić przeglądarkę do pobrania pliku, możesz spróbować wymusić inny typ MIME na plikach PDF. Odradzam to, ponieważ użytkownik powinien wybrać, co się stanie, gdy otworzą plik PDF.

Możesz użyć download.js ( https://github.com/rndme/download i http://danml.com/download.html ). Jeśli plik znajduje się w zewnętrznym adresie URL, musisz wysłać żądanie Ajax, ale jeśli tak nie jest, możesz użyć funkcji:

download(Path, name, mime)

Przeczytaj ich dokumentację, aby uzyskać więcej informacji w GitHub.

Wreszcie znalazłem ...... utwórz dynamiczny tag kotwicy i kliknij go

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

„Payment.pdf” dotyczy tylko nazwy niestandardowej.