(HTML) Tıklandığında tarayıcıda açmak yerine bir PDF dosyası indirin

Tarayıcıda açmak yerine bir PDF dosyası bağlantısını nasıl indirilebilir hale getireceğimi merak ediyordum. Bu html'de nasıl yapılır? (Bunun javascript veya başka bir şeyle yapıldığını varsayıyorum).

Bunu HTML ile yapamazsınız. Sunucu tabanlı bir çözümdür. Tarayıcının kaydetme iletişim kutusunu tetiklemesi için dosyayı akışa almalısınız.

Bunu yapmamayı tavsiye ederim. Bir kullanıcının bir PDF ile nasıl etkileşim kuracağı kullanıcıya bırakılmalıdır.

GÜNCELLEME (2014):

Yani ... bu cevap hala pek çok olumsuz oy alıyor. Sanırım bunun bir kısmı 4 yıl önce yanıtlanmıştı ve Sarım'ın da işaret ettiği gibi artık bunu halledebilecek HTML 5 downloadözelliği var.

Katılıyorum ve Sarım'ın cevabının iyi olduğunu düşünüyorum (OP geri dönerse muhtemelen seçilen cevap bu olmalıdır). Bununla birlikte, bu cevap hala onu ele almanın güvenilir yoludur (Yiğit Yener'in cevabının işaret ettiği ve - garip bir şekilde - insanlar aynı fikirde olduğu gibi). İndirme özelliği destek kazanmış olsa da, hala yetersiz:

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

Html5 ile artık mümkün. Öğesinde bir "indirme" özelliği ayarlayın.

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

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

Bu, yalnızca sunucu tarafı koduyla bir http yanıt başlığının ayarlanmasıyla mümkündür. Yani;

Content-Disposition: attachment; filename=fname.ext

Gönderilen http başlıklarını değiştirmeniz gerekiyor. Sunucunuza bağlı olarak, .htaccess'inizi aşağıdaki gibi değiştirebilirsiniz:

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

bir PHP betiği (veya bunun için başka bir sunucu tarafı dili) kullanmanız gerekecek

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

ve pdf yerine PHP dosyasına yeniden yönlendirmek (yeniden yazmak) içinhttacces kullanın

Kullanabilirsiniz

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

Bu örneğe bakın:

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

Bu ASP.NET için geçerlidir. Diğer tüm sunucu tarafı dillerinde benzer çözümler bulabileceğinize eminim. Ancak bildiğim kadarıyla javascript çözümü yok.

Html5 özniteliği olmadan bunu php kullanarak başarabilirsiniz:

Bu kodla download.php adlı php dosyası oluşturun :

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

Şimdi otomatik olarak pdf indirmeye başlamak istiyorsanız bu javascript'i yazın:

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

Bunun bir bağlantı üzerinde çalışmasını istiyorsanız, bunu kullanın ...

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

Herhangi bir görüntüyü veya pdf dosyasını yeni sekmede açmak yerine tarayıcıdan doğrudan indirmek istediğinizde, javascript'te dinamik bağlantı oluştur özelliğinin indirme özelliğini ayarlamalısınız.

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

Yeni Chrome güncellemesi için bir süre olay çalışmıyor. bunun için aşağıdaki kod kullanılacaktır

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

Alt öğe eklemek ve çocuğu kaldırmak yalnızca Internet Explorer tarayıcısı olan Firefox için kullanışlıdır. Chrome'da, alt öğe eklemeden ve kaldırmadan çalışır

Benim için en çok işe yarayan çözüm, Nick'in blogunda yazdığı çözümdü

Çözümünün temel fikri, Apache sunucuları başlık modunu kullanmak ve .htaccess'i, tüm * .pdf dosyalarını bir ek yerine akış olarak davranmaya zorlayan bir FileMatch yönergesi içerecek şekilde düzenlemektir. Bu aslında HTML'yi düzenlemeyi içermese de (orijinal soruya göre) kendi başına herhangi bir programlama gerektirmez.

Nick'in yaklaşımını tercih etmemin ilk nedeni, onu klasör bazında ayarlamama izin vermesiydi, böylece bir klasördeki PDF'ler tarayıcıda açılabilirken diğerlerine de izin verebilir (kullanıcıların düzenlemesini ve sonra yeniden yüklemesini istediğimiz olanlar) indirme olarak zorlanacak.

Ayrıca, PDF'lerin doldurulabilir formları bir API aracılığıyla sunucularınıza gönderme / gönderme seçeneği olduğunu, ancak bunun uygulanması biraz zaman aldığını da eklemek isterim.

İkinci neden, zamanın bir değerlendirme olmasıdır. Header () içindeki içerik kullanımını zorlamak için bir PHP dosya işleyicisi yazmak da API'den daha kısa, ancak yine de Nick'in yaklaşımından daha uzun sürecektir.

Bir Apache modunu nasıl açacağınızı ve .htaccs'leri nasıl düzenleyeceğinizi biliyorsanız, bunu yaklaşık 10 dakika içinde alabilirsiniz. Linux barındırma gerektirir (Windows değil). Bu, yapılandırmak için yüksek düzeyde sunucu erişimi gerektirdiğinden tüm kullanımlar için uygun bir yaklaşım olmayabilir. Bu nedenle, erişim dediyseniz, bunun nedeni muhtemelen bu iki şeyi nasıl yapacağınızı zaten bilmenizdir. Değilse, daha fazla talimat için Nick'in bloguna bakın.

Html5 yolu (önceki cevabım) tüm tarayıcılarda mevcut olmadığından, bu biraz daha hackleme yöntemidir.

Bu çözüm, amaçlanan dosyayı aynı etki alanından sunmanızı gerektirir VEYA CORS iznine sahiptir.

1. Öncelikle dosyanın içeriğini XMLHttpRequest (Ajax) aracılığıyla indirin.
2. Ardından, dosyanın içeriğini base64 kodlayarak bir veri URI'si oluşturun ve medya türünü olarak ayarlayın application/octet-stream. Sonuç şöyle görünmeli

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

Şimdi ayarlayın location.href = data. Bu, tarayıcının dosyayı indirmesine neden olacaktır. Maalesef bu şekilde dosya adını veya uzantısını ayarlayamazsınız. Medya türüyle uğraşmak bir şeyler getirebilir.

Ayrıntılara bakın: https://developer.mozilla.org/en-US/docs/Web/HTTP/data_URIs

Bunu, belirli bir klasörde dinamik adlarla oluşturulan ve IIS tarafından sunulan dosyalar için yapmam gerekiyordu.

Bu benim için çalıştı:

• IIS'de, bu klasöre gidin ve HTTP Yanıt Başlıkları'na çift tıklayın.

• Aşağıdaki bilgilerle yeni bir başlık ekleyin:

  Name: content-disposition Value: attachment

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

HTML5 kullanıyorsanız (ve sanırım şimdi herkes bunu kullanıyor), adında bir özellik var download.

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

burada filenameisteğe bağlıdır, ancak sağlanırsa, indirilen dosya için bu adı alır.

Davranış, tarayıcının çeşitli MIME türlerini işleyecek şekilde nasıl ayarlandığına bağlı olmalıdır. Bu durumda MIME türü application / pdf'dir. Tarayıcıyı dosyayı indirmeye zorlamak istiyorsanız, PDF dosyalarında farklı bir MIME türünü zorlamayı deneyebilirsiniz. Buna karşı tavsiye ederim, çünkü kullanıcıların bir PDF dosyasını açtıklarında ne olacağını seçmeleri gerekir.

Download.js'yi ( https://github.com/rndme/download ve http://danml.com/download.html ) kullanabilirsiniz. Dosya harici bir URL'deyse, bir Ajax isteğinde bulunmanız gerekir, ancak değilse, o zaman işlevi kullanabilirsiniz:

download(Path, name, mime)

GitHub'da daha fazla ayrıntı için belgelerini okuyun.

Sonunda buldum ...... dinamik bağlantı etiketi oluşturun ve üzerine tıklayın

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

"Payment.pdf" yalnızca özel ad içindir.