HTML में PDF एम्बेड करने का अनुशंसित तरीका?


1181

HTML में PDF को एम्बेड करने का अनुशंसित तरीका क्या है?

  • iFrame?
  • वस्तु?
  • एम्बेड?

Adobe खुद इसके बारे में क्या कहता है?

मेरे मामले में, पीडीएफ मक्खी पर उत्पन्न होता है, इसलिए इसे फ्लश करने से पहले इसे तृतीय-पक्ष समाधान पर अपलोड नहीं किया जा सकता है।


6
कोशिश करें pdf2htmlEX: github.com/coolwanglu/pdf2htmlEX
Tezcat

Pdf2htmlEX रेपो के विकी पर न केवल विशिष्ट समाधानों बल्कि सामान्य रणनीतियों की एक बड़ी तुलना है । इसके अलावा, हालांकि मैंने इसकी कोशिश नहीं की है, यह एक बनाए रखा कांटा है।
श्रीवत्सआर

जवाबों:


541

संभवतः PDF.JS लाइब्रेरी का उपयोग करना सबसे अच्छा तरीका है । यह किसी भी तृतीय-पक्ष प्लगइन्स के बिना पीडीएफ दस्तावेजों के लिए एक शुद्ध एचटीएमएल 5 / जावास्क्रिप्ट रेंडरर है।

ऑनलाइन डेमो: http://mozilla.github.com/pdf.js/web/viewer.html

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


12
जैसा कि एक अन्य जवाब में कहा गया है, वास्तव में पीडीएफ फाइलों को बदलने के लिए scrid pdf2swf का उपयोग करता है
पीटर क्रेग

8
मैं स्काइबर्ड का उपयोग करने के खिलाफ अत्यधिक सलाह देता हूं - मैंने सिर्फ एक विशेष दस्तावेज़ पर एक प्रयोग किया है और फ़ायरफ़ॉक्स 4 में यह केवल पहले 3 पृष्ठों को प्रदर्शित करता है, जबकि IE9 में इसका प्रतिपादन पाठ गलत है - इसके पृष्ठ के कुछ अनुभागों को ऑफसेट करता है। इसलिए तकनीकी रूप से यह छोटी बात है। इसके अतिरिक्त वे अपेक्षा करते हैं कि आप दस्तावेजों को प्रिंट या डाउनलोड करने के लिए सदस्यता लें! अनिवार्य रूप से वे पहले से मुक्त दस्तावेज ले रहे हैं और उनके चारों ओर एक पेवल बना रहे हैं।
फ्रैंकस्टर

9
PDF.js लाइब्रेरी वास्तव में एक बहुत अच्छे समाधान की तरह दिखती है, हालांकि लिंक किए गए डेमो इसे एक पेज में एम्बेडेड नहीं दिखाते हैं (यह पूरे पृष्ठ को लेता है)। लेकिन यह HMTL5 कैनवास का उपयोग करता है, इसलिए इसे एम्बेड करना आसान होना चाहिए, और यह तेज़ है । नीचे की ओर, इसका उपयोग करने के लिए कुछ js लगते हैं, इसके विपरीत <object>: github.com/mozilla/pdf.js/blob/master/examples/helloworld/…
LarsH

33
Chrome जैसे टैबलेट ब्राउज़र पर pdf.js खराब तरीके से काम करता है। मुझे यह भी लगता है कि बड़े पीडीएफ दस्तावेजों के लिए यह बहुत धीमा है।
रोक्को द टैको

10
मेरा मानना ​​है कि यह सिफारिश की जा रही है। ऑनलाइन डेमो में फॉन्ट रेंडरिंग को देखें, तो वे आकर्षक और भयानक दिखते हैं। यह बहुत अच्छा लगता है उप-पिक्सेल रेंडरिंग के साथ जब एडोब रीडर में खोला जाता है।
स्पीड प्लेन

530

यह इस बिंदु पर त्वरित, आसान है, और किसी भी तृतीय-पक्ष स्क्रिप्ट की आवश्यकता नहीं है:

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

अद्यतन (1/2018):

Android पर Chrome ब्राउज़र अब PDF एम्बेड का समर्थन नहीं करता है। आप Google डिस्क पीडीएफ दर्शक का उपयोग करके इसे प्राप्त कर सकते हैं

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

30
<ऑब्जेक्ट> टैग का उपयोग करने के लिए बेहतर है ताकि आप फ़ॉल-बैक शामिल कर सकें।
जोनाथन हिल

1
मैंने सोचा था कि डेवलपर्स जानना चाहेंगे कि मैक / फ़ायरफ़ॉक्स को एक टूटी हुई प्लगइन छवि मिलती है। प्लगइन पृष्ठ उस प्लगइन को लोड नहीं करेगा जिसे वह खोज रहा है। किसी भी विचार कैसे इस के आसपास पाने के लिए?
शनीमल

62
यदि आप यह सुनिश्चित करना चाहते हैं कि यह ऑटो के बजाय पीडीएफ डाउनलोड करने के लिए दिखाया जाएगा (जैसा कि यह मेरे लिए बहुत अच्छा है) type='application/pdf'एम्बेड टैग में जोड़ें
हस्सेक

31
<object>टैग का उपयोग करने के लिए बेहतर है क्योंकि यह ब्राउज़रों में वैकल्पिक सामग्री प्रदर्शित कर सकता है जो पीडीएफ़ प्रदर्शित नहीं कर सकता है। अगर आप चाहें तो एक <embed>टैग भी लगा सकते <object>हैं। Ref: stackoverflow.com/questions/1244788/embed-vs-object
राफेल

1
@raphaelcm वास्तव में, जैसा कि मैंने पहले कहा था, बस सभी प्रमुख ब्राउज़रों में एम्बेड टैग काम करता है। यहाँ तक कि IE 7 और 8.
बैटफ़ैन

360

आप इस उद्देश्य के लिए Google PDF व्यूअर का भी उपयोग कर सकते हैं। जहां तक ​​मुझे पता है कि यह एक आधिकारिक Google विशेषता नहीं है (क्या मैं इस पर गलत हूं?), लेकिन यह मेरे लिए बहुत अच्छी तरह और आसानी से काम करता है। आपको अपना PDF कहीं पहले अपलोड करना होगा और बस उसके URL का उपयोग करना होगा:

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

यह महत्वपूर्ण है कि इसमें फ़्लैश प्लेयर की आवश्यकता नहीं है, यह जावास्क्रिप्ट का उपयोग करता है।


29
एक बात का उल्लेख किया जाना चाहिए कि पीडीएफ के आकार की एक ऊपरी सीमा है जिसे प्रदर्शित किया जा सकता है। मुझे लगता है कि यह वर्तमान में 10 एमबी / 100 पृष्ठ है। पुनश्च: मुझे नहीं लगता कि दर्शक "अनौपचारिक" है; उनके पास एक ऐसा पृष्ठ भी है जो आपके लिए एम्बेड URL का निर्माण करता है: docs.google.com/viewer
सुपरइलेक्ट्रिक

30
यह विकल्प बहुत अच्छा काम करता है, लेकिन आपको अपने पीडीएफ को सार्वजनिक रूप से सुलभ बनाना होगा, जो मेरे लिए हमेशा एक विकल्प नहीं है।
कोविनेट

4
@riot_starter इस समाधान से अब काम नहीं करता है, यदि आप पूरी तरह से Google से लॉग आउट हो गए हैं तो यह ठीक लोड होता है, यदि आप इसमें पूरी तरह से लॉग इन हैं तो ठीक लोड होता है, हालाँकि यदि आप इसके बीच में हैं (जो भी इसका मतलब है) यह आपसे आपका पासवर्ड पूछता है। और iframe के मामले में यह सिर्फ लोड नहीं करता है।
dwenaus

5
आप के बीच किसी भी गूगल डॉक्स की गोपनीयता सेट करने की अनुमति है public, sign-in requiredऔर private। यह निश्चित रूप से एक आधिकारिक विशेषता है, Google डॉक्स पर किसी भी दस्तावेज़ पर विचार करना एक embedविकल्प है।
b1nary.atr0phy

6
एक और बात जिसका उल्लेख किया जाना चाहिए "आपने हाल ही में कई अनुरोध किए हैं" चेतावनी, जो एक सीमा है।
कोमराधोमर जुने

115

आपके पास कुछ नियंत्रण है कि क्वेरी स्ट्रिंग में कुछ विकल्प पास करके ब्राउज़र में पीडीएफ कैसे दिखाई देता है। मैं इस काम से खुश था, जब तक मुझे एहसास नहीं हुआ कि यह IE8 में काम नहीं करता है। :(

यह क्रोम 9 और फ़ायरफ़ॉक्स 3.6 में काम करता है, लेकिन IE8 में यह संदेश दिखाता है "अपनी त्रुटि संदेश यहां डालें, अगर पीडीएफ प्रदर्शित नहीं किया जा सकता है।"

मैंने अभी तक उपरोक्त किसी भी ब्राउज़र के पुराने संस्करणों का परीक्षण नहीं किया है, हालांकि। लेकिन यहाँ कोड मेरे पास वैसे भी है जब यह किसी की मदद करता है। यह ज़ूम को 85% पर सेट करता है, स्क्रॉलबार, टूलबार और नेवी पैन को हटा देता है। अगर मैं IE में काम करने वाली किसी चीज़ में आता हूँ तो मैं अपनी पोस्ट को अपडेट करूँगा।

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

6
यह सबसे अच्छा समाधान है क्योंकि ब्राउज़र क्षमताओं का उपयोग कर रहा है न कि एक जटिल तृतीय-पक्ष समाधान। सभी आधुनिक ब्राउज़रों (IE9, FF या Chrome) में पीडीएफ को अच्छी तरह से एम्बेड करना चाहिए। IE 6/7 उपयोगकर्ताओं के लिए क्षमा करें। उन्हें अपग्रेड करना है। हमने बहुत समय पहले इन ब्राउज़रों का समर्थन करना बंद कर दिया था। :(
एड्रियन पी।

2
Chrome के मेरे मोबाइल टैबलेट संस्करण पर काम नहीं करता है। FYI ... अफ़सोस, एक त्वरित फ़िक्स होता।
रोक्को द टैको

1
हालांकि ज़ूम और स्क्रॉल विकल्पों को संबोधित करने के लिए +1, यह नवीनतम क्रोम संस्करण (44) में काम नहीं कर रहा है ... पीडीएफ दस्तावेज़ लोड करने में विफल।
NotJay

एक करीबी बटन जोड़ना संभव है? और कैसे?
रॉबर्टो सेपूलेदा ब्रावो

@RoccoTheTaco Seconded, एंड्रॉइड पर मोबाइल क्रोम पर काम नहीं करता है
बेनामी

65

दोनों का उपयोग करना <object>और <embed>आपको ब्राउज़र संगतता की एक विस्तृत चौड़ाई प्रदान करेगा।

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

4
यह ब्राउज़र में काम नहीं करेगा यदि pdf एडऑन स्थापित या पुराना नहीं है
Umair Hamid

इसके अलावा, यह उन लोगों के लिए मान्य नहीं होगा जो कोड सत्यापन से संबंधित हैं।
NotJay

1
इसने मेरे लिए बहुत अच्छा काम किया, जबकि embedस्वयं टैग का उपयोग unsafeकरके क्रोम और फ़ायरफ़ॉक्स द्वारा समझा गया था ।
रिची थॉमस

1
Android (क्रोम) पर किसी कारण से यह पीडीएफ एम्बेड नहीं करता है और इसके बजाय इसे डाउनलोड करने की पेशकश करता है। IPhone (सफारी) पर यह केवल पीडीएफ का पहला पेज दिखाता है।
इवान रुबिन्सन

21

ImageMagick के माध्यम से इसे PNG में कनवर्ट करें, और PNG (त्वरित और गंदे) प्रदर्शित करें।

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

यह एक अच्छा विकल्प है यदि आपको त्वरित समाधान की आवश्यकता है, क्रॉस-ब्राउज़र पीडीएफ देखने की समस्याओं से बचना चाहते हैं, और यदि पीडीएफ केवल एक या दो पृष्ठ है। बेशक, आपको अपने वेबसर्वर पर ImageMagick इंस्टॉल (जिसे बदले में घोस्टस्क्रिप्ट) की आवश्यकता है, एक विकल्प जो साझा होस्टिंग वातावरण में उपलब्ध नहीं हो सकता है। एक PHP प्लगइन (जिसे इमेजिक कहा जाता है) भी है जो इस तरह से काम करता है लेकिन इसकी अपनी विशेष आवश्यकताएं हैं।


या किसी एप्लिकेशन का उपयोग करके छवि को PNG में रूपांतरित करें, जैसे कि Mac पर पूर्वावलोकन।
गैरेट

2
लेकिन क्या आप प्रोग्राम कर सकते हैं?
दान मेंटली

क्या होगा यदि दस्तावेज़ में 1 पृष्ठ से अधिक है? मुझे लगता है कि आप केवल पहले पृष्ठ को दिखाएंगे
seb

@seb कुछ समय हो गया है, लेकिन मैं इसे 2 या 3 पेज लंबे पीडीएफ पर उपयोग करने में सक्षम था। उस से बहुत बड़ा जाना बुद्धिमानी नहीं होगी, मुझे लगता है कि मोबाइल ब्राउज़रों की तरह ही एक कठिन समय चित्र प्रदर्शित होता है। यही कारण है कि मैंने इसे "त्वरित और गंदा" विधि कहा है, लेकिन यह एक अच्छा है जो मुझे लगता है कि पीडीएफ कुछ पृष्ठों से अधिक नहीं है।
दान मेंटिला

1
यदि आप zend पुस्तकालय का उपयोग करके पीडीएफ खोलते हैं, तो आप एक कर सकते हैं foreach($pdf->pages as $page)और प्रत्येक पृष्ठ के लिए एक छवि बना सकते हैं
99 समस्याएं -

18

इस कोड के लिए एक नजर है- 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>

6
यह काम नहीं लगता है। मैं हमेशा पीडीएफ के बजाय एक रिक्त ग्रे स्क्रीन के साथ समाप्त होता हूं। लेकिन @ गेल के जवाब में, के srcलिए स्विच करना dataकाम करता है।
मोटी

1
मैं Chrome 44 का उपयोग कर रहा हूं और यह काम नहीं करेगा। मैंने src में डेटा स्विच करने का भी प्रयास किया।
NotJay

प्रकार = "एप्लिकेशन / पीडीएफ" समस्या को ठीक करता है। क्रोम में ठीक काम करता है।
गेविन सिम्पसन

13

FDView एक SWF के साथ PDF2SWF (जो खुद xpdf पर आधारित है ) को जोड़ती है दर्शक के ताकि आप अपने सर्वर पर पीडीएफ डॉक्यूमेंट्स को मक्खी पर परिवर्तित और एम्बेड कर सकें।

xpdf एक परफेक्ट PDF कन्वर्टर नहीं है। यदि आपको बेहतर परिणामों की आवश्यकता है, तो घोस्टव्यू में पीडीएफ दस्तावेजों को अन्य प्रारूपों में बदलने की कुछ क्षमता है, जिसके लिए आप आसानी से एक फ्लैश दर्शक का निर्माण कर सकते हैं।

लेकिन साधारण पीडीएफ दस्तावेजों के लिए, FDView को अच्छी तरह से काम करना चाहिए।


क्या FDView कहीं और उपलब्ध है? code4net.com गायब हो गया लगता है।
माइकल मायर्स

@ मिचेल ऐसा नहीं है जो मुझे आसानी से मिल जाए। मैं इस जवाब को बंद मौके पर छोड़ दूंगा कि कोई व्यक्ति फिर से कहीं और fdview की मेजबानी करे।
एडम डेविस

12

हमारी समस्या यह है कि कानूनी कारणों से हमें हार्ड डिस्क पर अस्थायी रूप से एक पीडीएफ स्टोर करने की अनुमति नहीं है । इसके अलावा, ब्राउज़र में पूर्वावलोकन के रूप में एक पीडीएफ प्रदर्शित करते समय पूरे पृष्ठ को फिर से लोड नहीं किया जाना चाहिए।

पहले हमने PDF.jS की कोशिश की। यह बेस 64 के साथ फ़ायरफ़ॉक्स और क्रोम के लिए दर्शक में काम करता है। हालाँकि, यह हमारे PDF के लिए अस्वीकार्य था। IE / Edge बिल्कुल काम नहीं किया।

इसलिए हमने इसे HTML ऑब्जेक्ट टैग में Base64 स्ट्रिंग के साथ आज़माया। यह फिर से IE / Edge (शायद PDF.js के साथ भी यही समस्या है) के लिए काम नहीं किया। क्रोम / फ़ायरफ़ॉक्स / सफारी में फिर कोई समस्या नहीं है। इसलिए हमने हाइब्रिड समाधान चुना। IE / Edge हम एक IFrame और अन्य सभी ब्राउज़रों के लिए ऑब्जेक्ट-टैग का उपयोग करते हैं।

IFrame समाधान निश्चित रूप से क्रोम और सह के लिए भी काम करेगा। Chrome के लिए इस समाधान का उपयोग न करने का कारण यह है कि यद्यपि PDF सही ढंग से प्रदर्शित किया गया है, जैसे ही आप पूर्वावलोकन में "डाउनलोड" पर क्लिक करते हैं , Chrome सर्वर के लिए एक नया अनुरोध करता है । आवश्यक छिपी हुई फ़ील्ड PDFHelperTransferData (पीडीएफ पीढ़ी के लिए आवश्यक हमारे प्रपत्र डेटा भेजने के लिए) अब सेट नहीं है क्योंकि पीडीएफ एक IFrame में प्रदर्शित होता है। इस सुविधा के लिए / बग देखेंपीडीएफ डाउनलोड करते समय क्रोम दो अनुरोध भेजता है (और उनमें से एक को रद्द करता है)

अब समस्या बच्चों IE9 और IE10 बनी हुई है। इनके लिए हमने एक पूर्वावलोकन समाधान दिया और केवल पूर्वावलोकन बटन पर क्लिक करके उपयोगकर्ता को डाउनलोड (पूर्वावलोकन के बजाय) के रूप में दस्तावेज़ भेजें। हमने बहुत कोशिश की है, लेकिन अगर हमें कोई हल मिल जाता है, तो उपयोगकर्ताओं के इस छोटे से हिस्से के लिए अतिरिक्त प्रयास प्रयास के लायक नहीं होगा। आप यहाँ डाउनलोड के लिए हमारे समाधान पा सकते हैं: IFrame के साथ ताज़ा किए बिना पीडीएफ डाउनलोड करें

हमारे जावास्क्रिप्ट:

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:

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

आईई / एज के लिए ब्राउज़र प्रकार की जांच करने के लिए यहां देखें: मैं जावास्क्रिप्ट का उपयोग करके इंटरनेट एक्सप्लोरर (आईई) और माइक्रोसॉफ्ट एज का पता कैसे लगा सकता हूं? मुझे उम्मीद है कि ये निष्कर्ष किसी और समय को बचाएंगे।


मुझे क्षमा करें, लेकिन मुझे समझ नहीं आ रहा है कि चर "TransferData" का किस प्रकार का मूल्य है?
केट

1
हाय @ केट, हमारे मामले में, हम अपने वेब फॉर्म में उपयोगकर्ता के इनपुट के आधार पर पीडीएफ जेनरेट करते हैं। "ट्रांसफरडाटा" में वह डेटा होता है जो वेब एपीआई में पीडीएफ जेनरेशन फंक्शन में JSON के रूप में भेजा जाता है। मैंने स्पष्टीकरण के लिए एक लाइन और कोड जोड़ा है।
जॉर्ज महिस

10
  1. अपने PDF को रखने के लिए एक कंटेनर बनाएँ

    <div id="example1"></div>
  2. PDF को बताएं कि किस PDF को एम्बेड करना है, और उसे कहां एम्बेड करना है

    <script src="/js/pdfobject.js"></script>
    <script>PDFObject.embed("/pdf/sample-3pp.pdf", "#example1");</script>
  3. आप विज़ुअल स्टाइल को निर्दिष्ट करने के लिए वैकल्पिक रूप से CSS का उपयोग कर सकते हैं, जिसमें आयाम, सीमा, मार्जिन आदि शामिल हैं।

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

स्रोत: https://pdfobject.com/


यह एक बहुत अच्छा समाधान था और बूटस्ट्रैप स्टाइल के साथ मिलकर काम किया। यह सभी अन्य बूटस्ट्रैप तत्वों के ऊपर चला गया।
नेटफेड

क्या आपने बूँद फ़ाइल के साथ कोशिश की? मैंने इसका उपयोग pdf.output('bloburl')lib jspdf से किया है, लेकिन ऐसा IE11 पर काम नहीं कर रहा है।
होआंग ट्रान बेटा

9

आप इस तरह से सहेजे गए पीडीएफ के सापेक्ष स्थान का उपयोग कर सकते हैं:

उदाहरण 1

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

example2

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


8

स्क्रिब्ड को अब आपको अपने दस्तावेज़ों को उनके सर्वर पर होस्ट करने की आवश्यकता नहीं है। यदि आप उनके साथ एक खाता बनाते हैं तो आपको एक प्रकाशक आईडी मिलता है। यह केवल आपके स्वयं के सर्वर पर संग्रहीत पीडीएफ फाइलों को लोड करने के लिए जावास्क्रिप्ट कोड की कुछ पंक्तियां लेता है।

अधिक जानकारी के लिए, डेवलपर टूल देखें ।


1
क्या आप एक और लिंक दिखा सकते हैं कि यह कैसे किया जाता है? आपके द्वारा पोस्ट किए गए लिंक से यह स्पष्ट नहीं है।
सुपरइलेक्ट्रिक

ऐसा लगता है कि उन्होंने अपनी वेबसाइट को अपडेट कर दिया है और इस पेज को बदल दिया है। मुझे लगता है कि इस पृष्ठ में वह सामग्री है जिसका मैं अपने मूल पोस्ट में उल्लेख कर रहा था: scribd.com/developers/api?method_name=Javascript+API
Bjorn

काश मैं इसे एक से अधिक बार पसंद कर सकता, यह पूरी तरह से काम करता है। वेबसाइट के नीचे स्क्रॉल करें और उदाहरण देखने के लिए एपीआई पर क्लिक करें।
रोक्को द टाको

1
पंजीकरण अब स्क्रिब के लिए बंद हो गए हैं।
लांस फिशर


4

ImageMagick की convertकमांड का उपयोग करके PdfToImageServlet

उपयोग उदाहरण: <img src='/webAppDirectory/PdfToImageServlet?pdfFile=/usr/share/cups/data/default-testpage.pdf'>


4

यह वही तरीका है जो मैंने AXIOS और 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)
        })

HTML में urlPDF को गतिशील रूप से जोड़ें:

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

3

आपके द्वारा विचार किए जाने वाले विकल्पों में से एक है उल्लेखनीय पीडीएफ
यह एक मुफ्त योजना है जब तक कि आप पीडीएफ़ पर वास्तविक समय ऑनलाइन सहयोग करने की योजना नहीं बना रहे हैं।

निम्नलिखित iframeको किसी भी HTML में एम्बेड करें और परिणाम का आनंद लें:

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

2

फ़ाइल को ब्राउज़र में स्ट्रीम करने के लिए, स्टैक ओवरफ़्लो प्रश्न देखें । .NET 2.0 का उपयोग करके ब्राउज़र के लिए बाइनरी के रूप में एक पीडीएफ फाइल को कैसे स्ट्रीम किया जाए - ध्यान दें, मामूली बदलाव के साथ, यह काम करना चाहिए कि क्या आप फ़ाइल सिस्टम से फ़ाइल की सेवा कर रहे हैं या गतिशील रूप से उत्पन्न।

उस कहा के साथ, संदर्भित MSDN लेख दुनिया का एक सरल दृष्टिकोण लेता है, इसलिए आप HTTPS के माध्यम से ब्राउज़र में PDF स्ट्रीम करने के लिए सफलतापूर्वक स्ट्रीम कर सकते हैं और साथ ही कुछ हेडर जिन्हें आप आपूर्ति करने की आवश्यकता कर सकते हैं।

उस दृष्टिकोण का उपयोग करते हुए, एक आइफ्रेम शायद सबसे अच्छा तरीका है। एक वेबफ़ॉर्म है जो फ़ाइल को स्ट्रीम करता है, और फिर आइफ्रेम को दूसरे पृष्ठ पर srcपहले विशेषता के साथ सेट करता है।


4
@downvoter को यह बताने के लिए परवाह है कि आप गुमनाम रूप से 10 साल पुराने उत्तर को क्यों रद्द कर रहे हैं?
गैलेक्टीकॉवॉय

1
  1. इनपुट पीडीएफ बाइट्स के एक ब्लॉब का निर्माण करें
  2. इस क्रॉस ब्राउज़र वर्कअराउंड के साथ एक आइफ्रेम और पीडीएफ.जेएस पैच का उपयोग करें

Iframe के लिए URI कुछ इस तरह दिखना चाहिए:

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

अब एफएफ, क्रोम, आईई 11 और एज सभी यूआरएल में मानक ब्लब यूआरआई के माध्यम से पारित iframe में एक दर्शक में पीडीएफ प्रदर्शित करते हैं।


0

यदि आप अपने दम पर PDF.JS होस्ट नहीं करना चाहते हैं, तो आप DocDroid की कोशिश कर सकते हैं । यह Google ड्राइव पीडीएफ दर्शक के समान है लेकिन कस्टम ब्रांडिंग की अनुमति देता है।


0

मुझे प्रतिक्रिया के साथ एक पीडीएफ का पूर्वावलोकन करना था, इसलिए कई पुस्तकालयों की कोशिश करने के बाद मेरा इष्टतम समाधान डेटा प्राप्त करना था और इसे निकाल दिया।

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

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

-7

मैंने पाया कि यह ठीक काम करता है और ब्राउज़र इसे फ़ायरफ़ॉक्स में संभालता है। मैंने IE की जाँच नहीं की है ...

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

यह क्या हासिल करना है? मैं यह नहीं देख सकता कि यह सवाल का जवाब कैसे देता है।
TRIG

जब मैं अपने HTML में एक पीडीएफ एम्बेड कर रहा हूं, तो मुझे लगता है कि इस दस्तावेज़ का लिंक सबसे अच्छा तरीका है। <a href=" server1.network/trifold_JonesChiro.pdf "के रूप में इस तरह के target='_blank'> ग्राहक पोर्टल Trifold (नमूना) </a> यह कभी कभी यह जगह करने के लिए tring बनाम एक पृष्ठ खोलने के लिए और पीडीएफ को दिखाने के लिए एक साफ जवाब है html में। यह पीडीएफ को टैब में खुले रहने की भी अनुमति देता है।
व्यान

तो आपकी सिफारिश लिंक करने की है, एम्बेड करने की नहीं? यह ठीक है, लेकिन एक उत्तर के रूप में यह काफी अस्पष्ट है।
टीआरजी
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.