PDF'yi HTML'ye gömmek için önerilen yol?

PDF'yi HTML'ye gömmek için önerilen yol nedir?

• iFrame?
• Nesne?
• Göm?

Adobe bu konuda ne diyor?

Benim durumumda, PDF anında üretilir, bu yüzden yıkamadan önce üçüncü taraf bir çözüme yüklenemez.

Muhtemelen en iyi yaklaşım PDF.JS kütüphanesini kullanmaktır . Herhangi bir üçüncü taraf eklentisi olmayan PDF belgeleri için saf bir HTML5 / JavaScript oluşturucu.

Çevrimiçi demo: http://mozilla.github.com/pdf.js/web/viewer.html

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

Bu, hızlı, kolaydır, herhangi bir üçüncü taraf komut dosyası gerektirmez:

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

GÜNCELLEME (1/2018):

Android'deki Chrome tarayıcı artık PDF yerleştirmelerini desteklemiyor. Google Drive PDF görüntüleyicisini kullanarak bu sorunu çözebilirsiniz.

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

Bu amaçla Google PDF görüntüleyiciyi de kullanabilirsiniz. Bildiğim kadarıyla resmi bir Google özelliği değil (bu konuda yanlış mıyım?), Ama benim için çok güzel ve sorunsuz bir şekilde çalışıyor. PDF'nizi daha önce bir yere yüklemeniz ve URL'sini kullanmanız gerekir:

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

Önemli olan bir Flash oynatıcıya ihtiyaç duymaması, JavaScript kullanması.

Sorgu dizesindeki bazı seçenekleri ileterek PDF'nin tarayıcıda nasıl göründüğü üzerinde kontrolünüz vardır. IE8'de çalışmadığını fark edene kadar bu çalışmadan memnun kaldım. :(

Chrome 9 ve Firefox 3.6'da çalışır, ancak IE8'de "PDF görüntülenemiyorsa hata mesajınızı buraya ekleyin" mesajını gösterir.

Yine de yukarıdaki tarayıcılardan herhangi birinin eski sürümlerini test etmedim. Ama burada herkese yardımcı olması durumunda zaten kod var. Bu, yakınlaştırmayı% 85'e ayarlar, kaydırma çubuklarını, araç çubuklarını ve gezinme bölmelerini kaldırır. IE'de de çalışan bir şeyle karşılaşırsam gönderimi güncelleyeceğim.

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

Her ikisini de kullanmak <object>ve <embed>size daha geniş bir tarayıcı uyumluluğu sunar.

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

ImageMagick ile PNG'ye dönüştürün ve PNG'yi (hızlı ve kirli) görüntüleyin.

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

Hızlı bir çözüme ihtiyacınız varsa, tarayıcılar arası PDF görüntüleme sorunlarından kaçınmak istiyorsanız ve PDF yalnızca bir veya iki sayfa ise bu iyi bir seçenektir. Tabii ki, web barındırma sunucunuzda paylaşılan barındırma ortamlarında bulunmayan bir seçenek olan ImageMagick'in yüklü olması gerekir (bu da Ghostscript'e ihtiyaç duyar). Orada bir PHP eklentisi (denilen imagick) işlerin o da böyle ama buna kendi özel gereksinimleri var sahiptir.

Bu kodu inceleyin- PDF'yi HTML'ye gömmek için

<!-- 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 , PDF2SWF'yi (kendisi xpdf tabanlı ) bir SWF görüntüleyici ile birleştirir, böylece PDF belgelerini sunucunuza anında dönüştürüp gömebilirsiniz.

xpdf mükemmel bir PDF dönüştürücü değildir. Daha iyi sonuçlara ihtiyacınız varsa Ghostview , PDF belgelerini daha kolay bir Flash görüntüleyici oluşturabileceğiniz diğer biçimlere dönüştürme yeteneğine sahiptir.

Ancak, basit PDF belgeleri için FDView makul şekilde iyi çalışmalıdır.

Sorunumuz, yasal nedenlerle PDF'yi geçici olarak sabit diskte saklamamıza izin verilmiyor . Ayrıca, PDF'yi Tarayıcıda Önizleme olarak görüntülerken sayfanın tamamı yeniden yüklenmemelidir.

Önce PDF.jS'yi denedik. Firefox ve Chrome için görüntüleyicide Base64 ile çalıştı. Ancak, PDF'imiz için kabul edilemez derecede yavaştı. IE / Edge hiç çalışmadı.

Bu nedenle bir HTML nesne etiketindeki Base64 dizesiyle denedik. Bu yine IE / Edge için işe yaramadı (belki PDF.js ile aynı sorun). Chrome / Firefox / Safari'de yine sorun değil. Bu yüzden hibrit bir çözüm seçtik. IE / Edge bir IFrame kullanıyoruz ve diğer tüm tarayıcılar için object-tag'i kullanıyoruz.

IFrame çözümü elbette Chrome ve ortak çalışanlar için de kullanılabilir. Chrome için bu çözümü kullanmamamızın nedeni, PDF'nin doğru bir şekilde görüntülenmesine rağmen , önizlemede "indir" i tıkladığınızda Chrome'un sunucuya yeni bir istekte bulunmasıdır . PDF bir IFrame'de görüntülendiğinden, gerekli gizli alan pdfHelperTransferData (PDF oluşturma için gereken form verilerimizi göndermek için) artık ayarlanmamış. Bu özellik / hata için bkz.Chrome, PDF indirirken iki istek gönderir (ve bunlardan birini iptal eder) .

Şimdi sorun IE9 ve IE10 çocuklar kalır. Bunlar için bir önizleme çözümü bıraktık ve sadece bir önizleme düğmesini tıklatarak kullanıcıya önizleme yerine dokümanı gönderdik. Çok denedik, ancak bir çözüm bulmuş olsak bile, kullanıcıların bu küçük kısmı için ekstra çaba çabaya değmezdi. Karşıdan yükleme için çözümümüzü burada bulabilirsiniz: IFrame ile yenilemeden PDF indirin .

Javascriptimiz:

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

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

IE / Edge tarayıcı türünü kontrol etmek için buraya bakın: JavaScript kullanarak Internet Explorer (IE) ve Microsoft Edge'i nasıl algılayabilirim? Umarım bu bulgular bir başkasını zamandan kurtarır.

Kaydedilen pdf'in göreli konumunu şu şekilde kullanabilirsiniz:

Örnek 1

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

Örnek2

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

1. PDF'nizi saklamak için bir kap oluşturun

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

2. PDFObject'e hangi PDF'yi ve nereye yerleştireceğinizi söyleyin

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

3. İsteğe bağlı olarak, boyutlar, kenarlık, kenar boşlukları vb. Gibi görsel stilleri belirtmek için CSS'yi kullanabilirsiniz.

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

Kaynak: https://pdfobject.com/

Scribd artık belgelerinizi sunucularında barındırmanızı gerektirmiyor. Onlarla bir hesap oluşturursanız, bir yayıncı kimliği alırsınız. Kendi sunucunuzda depolanan PDF dosyalarını yüklemek yalnızca birkaç satır JavaScript kodu gerektirir.

Daha fazla ayrıntı için bkz. Geliştirici Araçları .

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

ImageMagick'in convertkomutunu kullanarak PdfToImageServlet .

Kullanım örneği: <img src='/webAppDirectory/PdfToImageServlet?pdfFile=/usr/share/cups/data/default-testpage.pdf'>

AXIOS ve Vue.js ile yaptığım yol:

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

urlPDF'yi HTML'ye dinamik olarak ekleyin:

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

Dikkate almanız gereken seçeneklerden biri, PDF
PDF'lerde gerçek zamanlı çevrimiçi işbirliği yapmayı planlamıyorsanız ücretsiz bir planı var

Aşağıdakileri iframeherhangi bir html'ye gömün ve sonuçların tadını çıkarın:

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

Dosyayı tarayıcıya aktarmak için bkz. Yığın Taşması sorusu Bir PDF dosyasını .NET 2.0 kullanarak tarayıcıya ikili olarak nasıl aktarabilirsiniz? - küçük varyasyonlarda, dosya sisteminden bir dosya sunarken bu çalışmanın işe yarayacağını unutmayın veya dinamik olarak oluşturulmuştur.

Bununla birlikte, atıfta bulunulan MSDN makalesi dünyanın oldukça basit bir görünümünü alır, bu nedenle HTTPS aracılığıyla tarayıcıya PDF'yi Başarılı Bir Şekilde Akıtmak için de sağlamanız gerekebilir.

Bu yaklaşımı kullanarak, bir iframe muhtemelen en iyi yoldur. Dosyayı akış yapan bir web srcformuna sahip olun ve sonra iframe'i niteliği ilk forma ayarlanmış olarak başka bir sayfaya koyun .

1. Giriş PDF baytlarının bir blobunu oluşturun
2. Bir kullan iframe ve PDF.js ile yamalı bu çapraz tarayıcı geçici çözüm

İframe için URI şu şekilde görünmelidir:

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

Şimdi FF, Chrome, IE 11 ve Edge, PDF'yi URL'deki standart blob URI'sinden geçirilen iframe'de bir görüntüleyicide görüntüler.

React ile bir PDF önizleme yapmak zorunda kaldım, bu yüzden birkaç kütüphaneyi denedikten sonra en uygun çözümüm veri almak ve onu ebed etmekti.

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

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

Kendi başınıza ev sahibi PDF.JS istemiyorsanız varsa, deneyebilirsin DocDroid . Google Drive PDF görüntüleyicisine benzer, ancak özel markalamaya izin verir.

Bunun işe yaradığını gördüm ve tarayıcı bunu firefox'ta halletti. IE kontrol etmedim ...

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