Bagaimana cara memaksa file untuk dibuka di browser alih-alih mengunduh (PDF)?

210

Apakah ada cara untuk memaksa file PDF untuk dibuka di browser ketika opsi "Tampilkan PDF di browser" tidak dicentang?

Saya mencoba menggunakan tag embed dan iframe, tetapi hanya berfungsi ketika opsi itu dicentang.

Apa yang dapat saya?

elloalisboa
sumber

Jawaban:

419

Untuk menunjukkan kepada browser bahwa file harus dilihat di browser, respons HTTP harus menyertakan tajuk ini:

Content-Type: application/pdf
Content-Disposition: inline; filename="filename.pdf"

Agar file diunduh daripada dilihat:

Content-Type: application/pdf
Content-Disposition: attachment; filename="filename.pdf"

Kutipan di sekitar nama file diperlukan jika nama file berisi karakter khusus seperti filename[1].pdfyang dapat merusak kemampuan browser untuk menangani respons.

Cara Anda mengatur header respons HTTP akan bergantung pada server HTTP Anda (atau, jika Anda menghasilkan respons PDF dari kode sisi server: bahasa pemrograman sisi server Anda).

Kolin
sumber
13
Untuk memaksa unduhan, saya lebih suka menggunakan Content-Type: application / octet-stream.
Papick G. Taboada
25
@ PapickG.Taboada tetapi kemudian sistem pengguna mungkin tidak tahu jenis file. Misalnya beberapa pengguna mungkin memilih "Selalu buka file jenis ini" untuk file PDF. Mungkin jika Anda ingin mengesampingkan preferensi pengguna maka octet-stream akan menjadi cara untuk pergi, tetapi memberikan jenis yang benar dan nama file yang disarankan adalah cara yang "benar" untuk menyediakan unduhan.
ColinM
2
hai @ColinM Saya agak bingung di sini ... kami mengalami masalah rendering pdf, itu hanya memberikan teks acak. di mana kita mengatur Content-Type: application / pdf Content-Disposition: inline; "filename.pdf"? karena kami mengunggahnya menggunakan kode angular-js. Jadi pertanyaan saya adalah apakah jenis konten harus ditetapkan sebelum mengunggah? Dan juga, kami hanya mendapatkan tautan dari tim backend, url yang memberikan path file, yang kami buka di tab baru menggunakan: window.open (url, '_blank'). Focus ();
Kailas
3
@ Kailas Saya tidak mengerti apa yang Anda coba lakukan .. Jawabannya merujuk pada tajuk yang harus dikirim oleh server ke klien ketika menanggapi permintaan HTTP untuk file PDF. Header ini tidak berpengaruh pada upload file, Anda harus memiliki kode di belakang url mengatur header setiap kali itu diunduh oleh klien.
ColinM
1
@ColinM Terima kasih sobat, Anda mengatakannya dengan benar, masalah saat kami melakukan debug adalah jenis mime disetel saat mengunggah file. Ini harus dilakukan oleh tim back-end. Saya mencoba untuk mendapatkan kode tentang cara menambahkan header dalam skrip java tetapi tidak berhasil. Terima kasih, karena saya mendapatkan ide nyata dari Anda ... :)
Kailas
19

Jika Anda menggunakan HTML5 (dan saya kira saat ini semua orang menggunakannya), ada atribut yang disebut download.

Sebagai contoh,

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

Ini filenameopsional, tetapi jika disediakan, nama ini akan diambil untuk file yang diunduh.

Akshay
sumber
2
Jika Anda memiliki kendali atas kode server Anda harus menggunakan 'lampiran' karena ini akan memungkinkan untuk menggunakan kode nama file generasi yang sama. Jika Anda tidak memiliki kendali atas server, ini adalah solusi yang baik.
Christophe Roussy
Namun ini adalah solusi yang brilian untuk masalah ini, seperti biasa, IE menahan kami untuk menggunakannya: caniuse.com/#search=download
Rory McCrossan
1
Penting untuk dicatat bahwa ini tidak berfungsi di seluruh domain (mis. Kebijakan yang sama asal menghalangi). Jika mengunduh dari satu domain, atribut unduhan tidak akan berfungsi jika konten disimpan di domain yang berbeda. CORS dapat mengizinkan konten tersebut untuk melewati (belum diuji).
vol7ron
59
Ini benar-benar kebalikan dari apa yang diminta OP :)
Chuck Le Butt
1
Ya pikir! : \ Saya mengerti pertanyaan yang salah dan menjawab. Tetapi banyak orang mendarat di sini hanya menemukan yang sebaliknya, itu sebabnya tidak diedit / dihapus jawabannya.
Akshay
16

Jenis yang benar adalah application/pdfuntuk PDF, bukan application/force-download. Ini terlihat seperti retasan untuk beberapa browser lawas. Selalu gunakan mimetype yang benar jika Anda bisa.

Jika Anda memiliki kendali atas kode server:

  • Unduh / konfirmasi paksa: gunakan header("Content-Disposition", "attachment; filename=myfilename.myextension");
  • Browser mencoba membukanya: gunakan header("Content-Disposition", "inline; filename=myfilename.myextension");

Tidak ada kontrol atas kode server:

CATATAN: Saya lebih suka mengatur nama file di sisi server karena Anda mungkin memiliki informasi lebih lanjut dan dapat menggunakan kode umum.

Christophe Roussy
sumber
2

Jika Anda memiliki Apache, tambahkan ini ke .htaccessfile:

<FilesMatch "\.(?i:pdf)$">
    ForceType application/octet-stream
    Header set Content-Disposition attachment
</FilesMatch>
Alex
sumber
bagaimana kita bisa menambahkan banyak ekstensi? Saya ingin menambahkan ekstensi DOC dan XLS juga. Mohon saran saya. Terima kasih sebelumnya.
Kamlesh
Itu bertentangan dengan apa yang diminta
Quentin
1

Ups, ada kesalahan pengetikan di pos saya sebelumnya.

    header("Content-Type: application/force-download");
    header("Content-type: application/pdf");
    header("Content-Disposition: inline; filename=\"".$name."\";");

Jika Anda tidak ingin browser meminta pengguna, gunakan "inline" untuk string ketiga alih-alih "lampiran". Inline bekerja dengan sangat baik. Tampilan PDF segera tanpa meminta pengguna untuk mengklik Open. Saya telah menggunakan "lampiran" dan ini akan meminta pengguna untuk Buka, Simpan. Saya sudah mencoba mengubah mur pengaturan browser itu tidak mencegah prompt.

trangsinh1952
sumber
4
Apa posting sebelumnya?
Peter Mortensen
0

Ini untuk ASP.NET MVC

Di halaman cshtml Anda:

<section>
    <h4><a href="@Url.Action("Download", "Document", new { id = @Model.GUID })"><i class="fa fa-download"></i> @Model.Name</a></h4>
    <object data="@Url.Action("View", "Document", new { id = @Model.GUID })" type="application/pdf" width="100%" height="800" class="col-md-12">
        <h2>Your browser does not support viewing PDFs, click on the link above to download the document.</h2>
    </object>
</section>

Di controller Anda:

public ActionResult Download(Guid id)
    {
        if (id == Guid.Empty)
            return null;

        var model = GetModel(id);

        return File(model.FilePath, "application/pdf", model.FileName);
    }

public FileStreamResult View(Guid id)
    {
        if (id == Guid.Empty)
            return null;

        var model = GetModel(id);

        FileStream fs = new FileStream(model.FilePath, FileMode.Open, FileAccess.Read);

        return File(fs, "application/pdf");
    }
Leon van Wyk
sumber
-1

Sementara yang berikut ini berfungsi dengan baik di firefox, itu TIDAK bekerja pada browser chrome dan seluler.

Content-Type: application/pdf
Content-Disposition: inline; filename="filename.pdf"

Untuk memperbaiki kesalahan chrome & browser seluler, lakukan hal berikut:

  • Simpan file Anda di direktori di proyek Anda
  • Gunakan Google PDF Viewer

Google PDF Viewer dapat digunakan sebagai berikut:

<iframe src="http://docs.google.com/gview?url=http://example.com/path/to/my/directory/pdffile.pdf&embedded=true" frameborder="0"></iframe>
Nick Kongk.
sumber
-4

Buka downloads.php dari rootfile.

Lalu buka baris 186 dan ubah menjadi yang berikut:

        if(preg_match("/\.jpg|\.gif|\.png|\.jpeg/i", $name)){
            $mime = getimagesize($download_location);
            if(!empty($mime)) {
                header("Content-Type: {$mime['mime']}");
            }
        }
        elseif(preg_match("/\.pdf/i", $name)){
            header("Content-Type: application/force-download");
            header("Content-type: application/pdf");
            header("Content-Disposition: inline; filename=\"".$name."\";");
        }

        else{
            header("Content-Type: application/force-download");
            header("Content-type: application/octet-stream");
            header("Content-Disposition: attachment; filename=\"".$name."\";");
        }
Christian Felix Kazuya
sumber
7
Tidak disebutkan bahwa mereka menggunakan PHP. Bagaimana jika backend mereka menggunakan Python atau .NET?
Maxime Rouiller
1
... bicara tentang bidang kiri. Dia bahkan tidak mengatakan kerangka apa yang dia bicarakan.
Archonic
-4

Anda dapat melakukan ini dengan cara berikut:

<a href="path to PDF file">Open PDF</a>

Jika file PDF ada di dalam beberapa folder dan folder itu tidak memiliki izin untuk mengakses file di folder itu secara langsung, maka Anda harus melewati beberapa pembatasan akses .htaccessfile menggunakan pengaturan file dengan cara ini:

<FilesMatch ".*\.(jpe?g|JPE?G|gif|GIF|png|PNG|swf|SWF|pdf|PDF)$" >
    Order Allow,Deny
    Allow from all
</FilesMatch>

Tetapi sekarang izinkan saja file-file tertentu yang diperlukan.

Saya telah menggunakan kode ini dan bekerja dengan sempurna.

Mohsin
sumber
Tidak disebutkan bahwa mereka menggunakan Apache. Bagaimana jika mereka menggunakan IIS? Atau Ekspres?
Maxime Rouiller
-7

Baik digunakan

<embed src="file.pdf" />

jika embedding adalah opsi atau plugin baru saya, PIFF: https://github.com/terrasoftlabs/piff

Gabriel Ryan Nahmias
sumber
-7

Berikut adalah metode lain untuk memaksa file melihat di browser dalam PHP:

$extension = pathinfo($file_name, PATHINFO_EXTENSION);
$url = 'uploads/'.$file_name;
        echo '<html>'
                .header('Content-Type: application/'.$extension).'<br>'
                .header('Content-Disposition: inline; filename="'.$file_name.'"').'<br>'
                .'<body>'
                .'<object   style="overflow: hidden; height: 100%;
             width: 100%; position: absolute;" height="100%" width="100%" data="'.$url.'" type="application/'.$extension.'">
                    <embed src="'.$url.'" type="application/'.$extension.'" />
             </object>'
            .'</body>'
            . '</html>';
pengguna28864
sumber
1
headertidak berfungsi setelah Anda mulai menghasilkan badan permintaan (dan tidak mengembalikan string untuk digabungkan dalam dokumen HTML)
Quentin
-9

Cukup buka Adobe Reader, menu → EditPreferencesInternet , lalu ubah ke mode peramban atau untuk petunjuk terperinci tentang berbagai peramban, coba Tampilkan PDF di peramban | Acrobat, Acrobat Reader .

lawl
sumber
3
Bagaimana jika Anda tidak menggunakan AdobeReader atau tidak menggunakan windows? Jawaban Anda tidak akan berhasil. Selain itu, diperlukan meminta pengguna untuk mengubah pengaturan mereka, yang tidak dapat Anda lakukan di dunia nyata.
Clawfire
-12

Jika Anda menautkan ke .PDF itu akan terbuka di browser.
Jika kotak ini tidak dicentang, kotak itu harus terhubung ke .zip untuk memaksa unduhan.

Jika .zip bukan opsi, gunakan header di PHP untuk memaksa unduhan

header('Content-Type: application/force-download'); 
header('Content-Description: File Transfer'); 
Kirk Strobeck
sumber
Ya, tapi saya perlu cara untuk memaksa membuka di browser untuk tidak mengunduh. Saya tidak tahu apakah itu mungkin.
elloalisboa
2
Jika Anda tidak memaksa untuk mengunduh, maka Anda memaksa untuk membukanya di browser. Jika tidak terbuka di browser, itu karena pengguna memiliki pengaturan khusus, yang tidak dapat Anda timpa atau mereka tidak memiliki perangkat lunak pembacaan PDF.
Kirk Strobeck
1
Sebenarnya, lihat jawaban saya.
Gabriel Ryan Nahmias
21
Ini salah. Tidak ada aplikasi / unduhan paksa. Anda dapat menggunakan alskjdsdjk / aljksdlasdj juga. Browser akan mengunduh karena tidak tahu tipe mime ini. Jenis pantomim yang tepat untuk diunduh akan saya aplikasi / octet-stream
Papick G. Taboada