(HTML) Unduh file PDF alih-alih membukanya di browser saat diklik

Saya bertanya-tanya bagaimana cara membuat tautan file PDF dapat diunduh alih-alih membukanya di browser? Bagaimana ini dilakukan di html? (Saya akan berasumsi itu dilakukan melalui javascript atau sesuatu).

Anda tidak dapat melakukan ini dengan HTML. Ini adalah solusi berbasis server. Anda harus melakukan streaming file agar browser memicu dialog simpan.

Saya menyarankan untuk tidak melakukan ini. Bagaimana pengguna berinteraksi dengan PDF harus diserahkan kepada pengguna.

UPDATE (2014):

Jadi ... jawaban ini masih banyak mendapat downvote. Saya berasumsi sebagian dari itu adalah bahwa ini telah dijawab 4 tahun yang lalu dan seperti yang Sarim tunjukkan, sekarang ada atribut HTML 5download yang dapat menangani ini.

Saya setuju, dan menurut saya jawaban Sarim bagus (mungkin itu jawaban yang dipilih jika OP pernah kembali). Namun, jawaban ini masih merupakan cara yang dapat diandalkan untuk menanganinya (seperti yang ditunjukkan oleh jawaban Yiğit Yener dan - anehnya - orang setuju dengannya). Meskipun atribut download telah mendapatkan dukungan, itu masih belum tentu:

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

Dengan html5, sekarang dimungkinkan. Setel elemen "unduh".

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

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

Ini hanya dapat dilakukan dengan menyetel header tanggapan http dengan kode sisi server. Yaitu;

Content-Disposition: attachment; filename=fname.ext

Anda perlu mengubah header http yang dikirim. Bergantung pada server Anda, Anda dapat mengubah .htaccess Anda sebagai berikut:

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

Anda perlu menggunakan skrip PHP (atau bahasa sisi server lain untuk ini)

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

dan gunakan httacces untuk mengarahkan (menulis ulang) ke file PHP, bukan pdf

Kamu bisa memakai

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

Lihat contoh ini:

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

Ini berlaku untuk ASP.NET. Saya yakin Anda dapat menemukan solusi serupa di semua bahasa sisi server lainnya. Namun tidak ada solusi javascript yang terbaik dari pengetahuan saya.

Tanpa atribut html5 seseorang dapat mencapai ini dengan menggunakan php:

Buat file php bernama download.php dengan kode ini:

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

Sekarang jika Anda ingin mengunduh pdf secara otomatis, tulis javascript ini:

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

Jika Anda ingin ini berfungsi pada tautan, gunakan ini ...

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

Ketika Anda ingin langsung mengunduh gambar atau file pdf dari browser alih-alih membukanya di tab baru maka di javascript Anda harus mengatur nilai untuk mengunduh atribut buat tautan dinamis

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

Untuk pembaruan Chrome baru beberapa acara waktu tidak berfungsi. untuk kode berikut akan digunakan

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

Menambahkan anak dan menghapus anak berguna untuk Firefox, browser penjelajah Internet saja. Di chrome ini akan bekerja tanpa menambahkan dan menghapus child

Solusi yang paling berhasil untuk saya adalah yang ditulis oleh Nick di blognya

Ide dasar dari solusinya adalah dengan menggunakan mod header server Apache dan mengedit .htaccess untuk menyertakan direktif FileMatch yang memaksa semua file * .pdf untuk bertindak sebagai aliran alih-alih lampiran. Meskipun ini tidak benar-benar melibatkan pengeditan HTML (sesuai pertanyaan asli), ini tidak memerlukan pemrograman apa pun.

Alasan pertama saya lebih suka pendekatan Nick adalah karena ini memungkinkan saya untuk mengaturnya berdasarkan per folder sehingga PDF dalam satu folder masih dapat dibuka di browser sambil mengizinkan orang lain (yang kami ingin pengguna mengedit dan kemudian mengunggahnya kembali) untuk dipaksa sebagai unduhan.

Saya juga ingin menambahkan bahwa ada opsi dengan PDF untuk mengirim / mengirimkan formulir yang dapat diisi melalui API ke server Anda, tetapi itu membutuhkan waktu untuk diterapkan.

Alasan kedua karena waktu adalah pertimbangan. Menulis penangan file PHP untuk memaksa disposisi konten di header () juga akan memakan waktu lebih sedikit daripada API, tetapi masih lebih lama daripada pendekatan Nick.

Jika Anda tahu cara mengaktifkan mod Apache dan mengedit .htaccss, Anda bisa mendapatkannya dalam waktu sekitar 10 menit. Ini membutuhkan hosting Linux (bukan Windows). Ini mungkin bukan pendekatan yang tepat untuk semua penggunaan karena memerlukan akses server tingkat tinggi untuk mengonfigurasi. Dengan demikian, jika Anda mengatakan akses, itu mungkin karena Anda sudah tahu cara melakukan dua hal itu. Jika tidak, periksa blog Nick untuk instruksi lebih lanjut.

Karena cara html5 (jawaban saya sebelumnya) tidak tersedia di semua browser, berikut cara lain yang sedikit diretas.

Solusi ini mengharuskan Anda menyajikan file yang dimaksudkan dari domain yang sama, ATAU memiliki izin CORS.

1. Pertama unduh konten file melalui XMLHttpRequest (Ajax).
2. Kemudian buat URI data dengan base64 yang menyandikan konten file dan setel jenis media ke application/octet-stream. Hasilnya akan terlihat seperti ini

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

Sekarang siap location.href = data . Ini akan menyebabkan browser mengunduh file. Sayangnya Anda tidak dapat mengatur nama file atau ekstensi dengan cara ini. Mengotak-atik jenis media bisa menghasilkan sesuatu.

Lihat detailnya: https://developer.mozilla.org/en-US/docs/Web/HTTP/data_URIs

Saya perlu melakukan ini untuk file yang dibuat dengan nama dinamis dalam folder tertentu dan dilayani oleh IIS.

Ini berhasil untuk saya:

• Di IIS, buka folder itu dan klik dua kali HTTP Response Headers.

• Tambahkan tajuk baru dengan info berikut:

  Name: content-disposition Value: attachment

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

Jika Anda menggunakan HTML5 (dan saya rasa sekarang hari semua orang menggunakan itu), ada atribut yang disebut download.

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

di sini filenameopsional, tetapi jika disediakan, ini akan menggunakan nama ini untuk file yang diunduh.

Perilaku tersebut harus bergantung pada cara browser disiapkan untuk menangani berbagai jenis MIME. Dalam hal ini tipe MIME adalah application / pdf. Jika Anda ingin memaksa browser untuk mengunduh file, Anda dapat mencoba memaksa jenis MIME yang berbeda pada file PDF. Saya merekomendasikan untuk tidak melakukannya karena seharusnya menjadi pilihan pengguna apa yang akan terjadi ketika mereka membuka file PDF.

Anda dapat menggunakan download.js ( https://github.com/rndme/download dan http://danml.com/download.html ). Jika file ada di URL eksternal, Anda harus membuat permintaan Ajax, tetapi jika tidak, maka Anda dapat menggunakan fungsi:

download(Path, name, mime)

Baca dokumentasi mereka untuk detail lebih lanjut di GitHub.

Akhirnya saya menemukan ...... buat tag anchor dinamis dan klik di atasnya

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

'Payment.pdf' hanya untuk nama kustom.