Cara yang disarankan untuk menanamkan PDF dalam HTML?

Apa cara yang disarankan untuk menanamkan PDF dalam HTML?

• iFrame?
• Obyek?
• Menanamkan?

Apa yang dikatakan Adobe tentang hal itu?

Dalam kasus saya, PDF dibuat dengan cepat, sehingga tidak dapat diunggah ke solusi pihak ketiga sebelum dibilas.

Mungkin pendekatan terbaik adalah dengan menggunakan perpustakaan 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 cepat, mudah, to the point dan tidak memerlukan skrip pihak ketiga:

<embed src="http://example.com/the.pdf" width="500" height="375" 
 type="application/pdf">

UPDATE (1/2018):

Browser Chrome di Android tidak lagi mendukung penyematan PDF. Anda dapat menyiasatinya dengan menggunakan penampil PDF Google Drive

<embed src="https://drive.google.com/viewerng/
viewer?embedded=true&url=http://example.com/the.pdf" width="500" height="375">

Anda juga dapat menggunakan penampil Google PDF untuk tujuan ini. Sejauh yang saya tahu itu bukan fitur Google resmi (apakah saya salah dalam hal ini?), Tetapi berfungsi dengan baik dan lancar bagi saya. Anda perlu mengunggah PDF Anda di suatu tempat sebelumnya dan cukup menggunakan URL-nya:

<iframe src="http://docs.google.com/gview?url=http://example.com/mypdf.pdf&embedded=true" style="width:718px; height:700px;" frameborder="0"></iframe>

Yang penting adalah bahwa itu tidak memerlukan Flash player, ia menggunakan JavaScript.

Anda memiliki kontrol atas bagaimana PDF muncul di browser dengan melewatkan beberapa opsi dalam string kueri. Saya senang bekerja ini, sampai saya menyadari itu tidak berfungsi di IE8. :(

Ini bekerja di Chrome 9 dan Firefox 3.6, tetapi di IE8 itu menunjukkan pesan "Sisipkan pesan kesalahan Anda di sini, jika PDF tidak dapat ditampilkan."

Saya belum menguji versi yang lebih lama dari salah satu browser di atas. Tapi ini kode yang saya miliki kalau-kalau itu membantu siapa pun. Ini mengatur zoom ke 85%, menghilangkan scrollbar, toolbar, dan panel nav. Saya akan memperbarui posting saya jika saya menemukan sesuatu yang berfungsi di IE juga.

<object width="400" height="500" type="application/pdf" data="/my_pdf.pdf?#zoom=85&scrollbar=0&toolbar=0&navpanes=0">
    <p>Insert your error message here, if the PDF cannot be displayed.</p>
</object>

Menggunakan keduanya <object>dan <embed>akan memberi Anda kompatibilitas browser yang lebih luas.

<object data="http://yoursite.com/the.pdf" type="application/pdf" width="750px" height="750px">
    <embed src="http://yoursite.com/the.pdf" type="application/pdf">
        <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>
    </embed>
</object>

Konversikan ke PNG melalui ImageMagick, dan tampilkan PNG (cepat dan kotor).

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

Ini adalah opsi yang baik jika Anda memerlukan solusi cepat, ingin menghindari masalah tampilan lintas-browser PDF, dan jika PDF hanya satu atau dua halaman. Tentu saja, Anda perlu menginstal ImageMagick (yang pada gilirannya membutuhkan Ghostscript) pada server web Anda, opsi yang mungkin tidak tersedia di lingkungan hosting bersama. Ada juga plugin PHP (disebut imagick) yang berfungsi seperti ini tetapi memiliki persyaratan khusus sendiri.

Lihat kode ini - Untuk menanamkan PDF dalam HTML

<!-- Embed PDF File -->
<object data="YourFile.pdf" type="application/x-pdf" title="SamplePdf" width="500" height="720">
    <a href="YourFile.pdf">shree</a> 
</object>

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

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

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

Masalah kami adalah karena alasan hukum kami tidak diperbolehkan menyimpan sementara PDF di hard disk . Selain itu, seluruh halaman tidak boleh dimuat ulang saat menampilkan PDF sebagai Pratinjau di Browser.

Pertama kami mencoba PDF.jS. Ini bekerja dengan Base64 di penampil untuk Firefox dan Chrome. Namun, itu sangat lambat untuk PDF kami. IE / Edge tidak berfungsi sama sekali.

Karena itu kami mencobanya dengan string Base64 dalam tag objek HTML. Ini lagi tidak bekerja untuk IE / Edge (mungkin masalah yang sama dengan PDF.js). Di Chrome / Firefox / Safari lagi tidak ada masalah. Itu sebabnya kami memilih solusi hybrid. IE / Edge kami menggunakan IFrame dan untuk semua browser lainnya tag-objek.

Solusi IFrame tentu saja juga akan berfungsi untuk Chrome dan co. Alasan mengapa kami tidak menggunakan solusi ini untuk Chrome adalah bahwa meskipun PDF ditampilkan dengan benar, Chrome membuat permintaan baru ke server segera setelah Anda mengklik "unduh" di pratinjau . PdfHelperTransferData -bidang tersembunyi yang diperlukan (untuk mengirim data formulir yang diperlukan untuk pembuatan PDF) tidak lagi ditetapkan karena PDF ditampilkan dalam IFrame. Untuk fitur / bug ini, lihatChrome mengirimkan dua permintaan saat mengunduh PDF (dan membatalkan salah satunya) .

Sekarang masalah anak-anak IE9 dan IE10 tetap. Untuk ini, kami memberikan solusi pratinjau dan hanya mengirim dokumen dengan mengklik tombol pratinjau sebagai unduhan kepada pengguna (bukan pratinjau). Kami telah mencoba banyak tetapi meskipun kami telah menemukan solusi, upaya ekstra untuk bagian kecil pengguna ini tidak akan sepadan dengan usaha tersebut. Anda dapat menemukan solusi kami untuk unduhan di sini: Unduh PDF tanpa menyegarkan dengan IFrame .

Javascript kami:

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

HTML kami:

<div id="pdf-helper-hidden-container" style="display:none">
   <form id="pdf-helper-form" method="post">
        <input type="hidden" name="pdfHelperTransferData" id="pdfHelperTransferData" />
   </form>
</div>

<div id="pdf-wrapper" class="modal-content">
    <iframe id="iframe-pdf-shower" name="iframe-pdf-shower"></iframe>
    <object id="object-pdf-shower" type="application/pdf"></object>
</div>

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

Anda dapat menggunakan lokasi relatif dari pdf yang disimpan seperti ini:

Contoh 1

<embed src="example.pdf" width="1000" height="800" frameborder="0" allowfullscreen>

Contoh2

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

1. Buat wadah untuk menyimpan PDF Anda

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

2. Beri tahu PDFObject PDF mana yang akan disematkan, dan di mana untuk menyematkannya

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

3. Anda dapat menggunakan CSS untuk menentukan penataan visual, termasuk dimensi, batas, margin, dll.

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

sumber: https://pdfobject.com/

Scribd tidak lagi mengharuskan Anda meng-host dokumen Anda di server mereka. Jika Anda membuat akun dengan mereka, maka Anda mendapatkan ID penerbit. Hanya diperlukan beberapa baris kode JavaScript untuk memuat file PDF yang disimpan di server Anda sendiri.

Untuk detail lebih lanjut, lihat Alat Pengembang .

<object width="400" height="400" data="helloworld.pdf"></object>

PdfToImageServlet menggunakan convertperintah ImageMagick .

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

Inilah 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:

<object width='100%' height='600px' :data='urlPdf' type='application/pdf'></object>

Salah satu opsi yang harus Anda pertimbangkan adalah PDF Terkemuka.
Ini memiliki paket gratis kecuali Anda berencana melakukan kolaborasi online real-time pada pdf

Sematkan yang berikut iframeke html apa saja dan nikmati hasilnya:

<iframe width='1000' height='800' src='http://bit.ly/1JxrtjR' frameborder='0' allowfullscreen></iframe>

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 variasi kecil, ini harus berfungsi apakah Anda menyajikan file dari sistem file atau dihasilkan secara dinamis.

Dengan demikian, artikel MSDN yang dirujuk mengambil pandangan yang agak sederhana tentang dunia, jadi Anda mungkin ingin membaca Berhasil Streaming PDF ke browser melalui HTTPS juga untuk beberapa tajuk yang mungkin perlu Anda pasok.

Menggunakan pendekatan itu, iframe mungkin merupakan cara terbaik untuk pergi. Minta satu webform yang mengalirkan file, lalu letakkan iframe di halaman lain dengan srcatributnya disetel ke formulir pertama.

1. Buat gumpalan input byte PDF
2. Gunakan iframe dan PDF.js yang ditambal dengan solusi lintas browser ini

URI untuk iframe akan terlihat seperti ini:

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

Sekarang FF, Chrome, IE 11, dan Edge semua menampilkan PDF dalam penampil di iframe yang diteruskan melalui URI gumpalan standar di URL.

Saya harus melihat pratinjau PDF dengan React jadi setelah mencoba beberapa perpustakaan solusi optimal saya adalah untuk mengambil data dan menyatukannya.

const pdfBase64 = //fetched from url or generated with jspdf or other library

  <embed
    src={pdfBase64}
    width="500"
    height="375"
    type="application/pdf"
  ></embed>

Jika Anda tidak ingin meng-host PDF.JS sendiri, Anda dapat mencoba DocDroid . Ini mirip dengan penampil PDF Google Drive tetapi memungkinkan pemberian merek kustom.

cukup gunakan iFrame untuk PDF.

Saya memiliki kebutuhan spesifik di aplikasi React.js saya, mencoba jutaan solusi tetapi berakhir dengan iFrame :) Selamat mencoba!

Saya menemukan ini berfungsi dengan baik dan browser menanganinya di firefox. Saya belum memeriksa IE ...

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