Cara yang disarankan untuk menyematkan PDF dalam HTML?

Mungkin pendekatan terbaik adalah menggunakan pustaka PDF.JS. Ini adalah penyaji HTML5/JavaScript murni untuk dokumen PDF tanpa plugin pihak ketiga.

Demo online: http://mozilla.github.com/pdf.js/web/viewer.html

GitHub: https://github.com/mozilla/pdf.js

Ini adalah cepat, mudah, to the point dan doesn't membutuhkan pihak ketiga script:

UPDATE (1/2018):

Browser Chrome di Android tidak lagi mendukung PDF komprehensif. Anda bisa mendapatkan sekitar ini dengan menggunakan Google Drive PDF viewer

Anda juga dapat menggunakan Google PDF viewer untuk tujuan ini. Sejauh yang saya tahu itu's tidak resmi, fitur Google (apakah saya salah dalam hal ini?), tapi itu bekerja untuk saya dengan sangat baik dan lancar. Anda perlu meng-upload PDF anda di suatu tempat dan hanya menggunakan URL-nya:

Apa yang penting adalah bahwa hal itu doesn't membutuhkan Flash player, menggunakan JavaScript.

Anda memiliki kontrol atas bagaimana PDF muncul di browser dengan melewati beberapa pilihan dalam string query. Saya senang untuk kerja ini, sampai saya menyadari itu tidak bekerja di IE8. :(

Ia bekerja di Chrome 9 dan Firefox 3.6, tapi di IE8 ini menunjukkan pesan "Menyisipkan pesan kesalahan berikut ini, jika PDF tidak dapat ditampilkan."

Aku ingin't belum diuji versi dari semua browser di atas, meskipun. Tapi di sini's kode saya telah pula dalam hal membantu siapa pun. Ini set zoom hingga 85%, menghilangkan scrollbar, toolbar dan nav panel. I'll update posting saya jika saya menemukan sesuatu yang bekerja di IE juga.

    <p>Insert your error message here, if the PDF cannot be displayed.</p>

Menggunakan kedua <objek> dan <cantumkan> akan memberikan anda yang lebih luas luasnya kompatibilitas browser.

        <p>This browser does not support PDFs. Please download the PDF to view it: <a href="http://yoursite.com/the.pdf">Download PDF</a>.</p>

Convert ke PNG melalui ImageMagick, dan menampilkan PNG (cepat dan kotor).

<?php
  $dir = '/absolute/path/to/my/directory/';
  $name = 'myPDF.pdf';
  exec("/bin/convert $dir$name $dir$name.png");
  print '';
?>

Ini adalah pilihan yang baik jika anda membutuhkan solusi yang cepat, ingin menghindari cross-browser PDF melihat masalah, dan jika PDF hanya satu atau dua halaman. Tentu saja, anda perlu ImageMagick diinstal (yang pada gilirannya kebutuhan Ghostscript) pada server web anda, pilihan yang mungkin tidak tersedia di shared hosting lingkungan. Ada juga plugin PHP (disebut imagick) yang bekerja seperti ini tetapi memiliki itu's memiliki persyaratan khusus.

Melihat-lihat untuk ini kode Untuk embed PDF di HTML

    <a href="YourFile.pdf">shree</a> 

FDView menggabungkan PDF2SWF (yang didasarkan pada xpdf) dengan penampil SWF sehingga Anda dapat mengonversi dan menyematkan dokumen PDF dengan cepat di server Anda.

xpdf bukanlah konverter PDF yang sempurna. Jika Anda membutuhkan hasil yang lebih baik, maka Ghostview memiliki beberapa kemampuan untuk mengonversi dokumen PDF ke dalam format lain yang mungkin dapat Anda buat penampil Flash dengan lebih mudah.

Tetapi untuk dokumen PDF sederhana, FDView seharusnya bekerja dengan cukup baik.

Masalah kita adalah bahwa untuk alasan hukum kita tidak diperbolehkan untuk menyimpan sementara file PDF pada hard disk. Selain itu, seluruh halaman tidak harus reloaded ketika menampilkan PDF sebagai Preview di Browser.

Pertama kami mencoba PDF.jS. Bekerja dengan Base64 di penampil untuk Firefox dan Chrome. Namun, itu terlalu lambat untuk PDF. IE/Edge didn't bekerja pada semua.

Oleh karena itu kami mencoba dengan Base64 string di HTML tag objek. Ini lagi didn't bekerja untuk IE/Edge (mungkin masalah yang sama seperti dengan PDF.js). Di Chrome/Firefox/Safari lagi tidak ada masalah. Yang's mengapa kami memilih solusi hybrid. IE/Edge kita menggunakan IFrame dan untuk semua browser lain objek-tag.

IFrame solusi tentunya juga bekerja untuk Chrome dan co. Alasan kenapa kita ngga't menggunakan solusi ini untuk Chrome adalah bahwa meskipun PDF akan ditampilkan dengan benar, Chrome membuat permintaan baru untuk server segera setelah anda klik pada "download" di preview. Yang diperlukan tersembunyi-bidang pdfHelperTransferData (untuk mengirim data formulir yang diperlukan untuk generasi PDF) tidak lagi diatur karena PDF adalah ditampilkan dalam IFrame. Ini fitur/bug lihat https://stackoverflow.com/questions/32725608/chrome-sends-two-requests-when-downloading-a-pdf-and-cancels-one-of-them.

Sekarang masalahnya anak-anak IE9 dan IE10 tetap. Untuk ini kami memberikan sebuah preview solusi dan hanya mengirim dokumen dengan mengklik tombol preview sebagai download untuk pengguna (bukan preview). Kami telah mencoba banyak tetapi bahkan jika kita telah menemukan solusi usaha ekstra untuk ini bagian kecil dari pengguna tidak akan sepadan dengan usaha. Anda dapat menemukan solusi kami untuk men-download di sini: Download PDF tanpa refresh dengan IFrame.

Kami Javascript:

var transferData = getFormAsJson()
if (isMicrosoftBrowser()) {
        // Case IE / Edge (because doesn't recoginzie Pdf-Base64 use Iframe)
        var form = document.getElementById('pdf-helper-form');
        $("#pdfHelperTransferData").val(transferData);
        form.target = "iframe-pdf-shower";
        form.action = "serverSideFunctonWhichWritesPdfinResponse";
        form.submit();
 } else {
        // Case non IE use Object tag instead of iframe
        $.ajax({
            url: "serverSideFunctonWhichRetrivesPdfAsBase64",
            type: "post",
            data: { downloadHelperTransferData: transferData },
            success: function (result) {
                $("#object-pdf-shower").attr("data", result);
            }
        })
 }

Kami HTML:

<div id="pdf-helper-hidden-container" style="display:none">

        <input type="hidden" name="pdfHelperTransferData" id="pdfHelperTransferData" />

</div>

<div id="pdf-wrapper" class="modal-content">


</div>

Untuk memeriksa jenis browser IE/Edge lihat di sini: Bagaimana saya bisa mendeteksi Internet Explorer (IE) dan Microsoft Edge menggunakan JavaScript? saya berharap temuan ini akan menyelamatkan orang lain waktu.

1. Buat wadah untuk menyimpan PDF Anda

<div id="example1"></div>

2. Beritahu PDFObject PDF mana yang akan ditanamkan, dan di mana menanamkan itu

<script src="/js/pdfobject.js"></script>
<script>PDFObject.embed("/pdf/sample-3pp.pdf", "#example1");</script>

3. Anda dapat secara opsional menggunakan CSS untuk menentukan styling visual, termasuk dimensi, batas, margin, dll.

.pdfobject-container { height: 500px;}
.pdfobject { border: 1px solid #666; }

sumber: https://pdfobject.com

Scribd tidak lagi mengharuskan anda untuk meng-host dokumen anda pada server mereka. Jika anda membuat account dengan mereka agar anda mendapatkan ID publisher. Ini hanya membutuhkan beberapa baris kode JavaScript untuk memuat file PDF yang tersimpan di server anda sendiri.

Untuk lebih jelasnya, lihat Developer Tools.

Anda dapat menggunakan lokasi relatif pdf yang disimpan seperti ini:

Example1

Example2

<iframe src="contoh.pdf" style="width:1000px; height:800px;" frameborder="0" allowfullscreen></iframe>

PdfToImageServlet menggunakan ImageMagick's convert perintah.

Contoh penggunaan: <img src=&#39;/webAppDirectory/PdfToImageServlet?pdfFile=/usr/share/cups/data/default-testpage.pdf&#39;>

Salah satu pilihan yang harus anda pertimbangkan adalah Penting PDF Memiliki rencana bebas kecuali jika anda berencana melakukan real-time kolaborasi online di pdf

Cantumkan berikut iframe untuk html dan menikmati hasilnya:

Untuk melakukan streaming file ke browser, lihat pertanyaan Stack Overflow Bagaimana cara streaming file PDF sebagai biner ke browser menggunakan .NET 2.0 - perhatikan bahwa, dengan sedikit variasi, hal ini dapat berfungsi baik jika Anda menayangkan file dari sistem file atau dibuat secara dinamis.

Dengan demikian, artikel MSDN yang direferensikan mengambil pandangan yang agak sederhana, jadi kamu mungkin ingin membaca Berhasil Menyajikan PDF ke browser melalui HTTPS juga untuk beberapa header yang mungkin perlu kamu sediakan.

Dengan menggunakan pendekatan itu, iframe mungkin adalah cara terbaik untuk digunakan. Miliki satu webform yang mengalirkan file, lalu letakkan iframe di halaman lain dengan atribut src yang diatur ke form pertama.

Ini adalah cara yang saya lakukan dengan AXIOS dan Vue.js:

        axios({
            url: `urltoPDFfile.pdf`,
            method: 'GET',
            headers: headers,
            responseType: 'blob'
        })
        .then((response) => {
            this.urlPdf = URL.createObjectURL(response.data)
        })
        .catch((error) => {
            console.log('ERROR   ', error)
        })

tambahkan urlPDF secara dinamis ke HTML:

1. Membangun sebuah gumpalan input PDF byte
2. Menggunakan iframe dan PDF.js ditambal dengan ini cross browser solusi

URI iframe harus melihat sesuatu seperti ini:

/viewer.html?file=blob:19B579EA-5217-41C6-96E4-5D8DF5A5C70B

Sekarang FF, Chrome, IE 11, dan C semua menampilkan PDF viewer pada iframe lulus melalui standar gumpalan URI dalam URL.

Jika anda don't ingin tuan rumah PDF.JS pada anda sendiri, anda bisa mencoba DocDroid. Hal ini mirip dengan Google Drive PDF viewer tetapi memungkinkan custom branding.

Saya menemukan ini bekerja baik-baik saja dan browser menangani itu di firefox. Aku belum diperiksa YAITU...

<script>window.location='url'</script>