HTML में PDF को एम्बेड करने का अनुशंसित तरीका क्या है?
- iFrame?
- वस्तु?
- एम्बेड?
Adobe खुद इसके बारे में क्या कहता है?
मेरे मामले में, पीडीएफ मक्खी पर उत्पन्न होता है, इसलिए इसे फ्लश करने से पहले इसे तृतीय-पक्ष समाधान पर अपलोड नहीं किया जा सकता है।
HTML में PDF को एम्बेड करने का अनुशंसित तरीका क्या है?
Adobe खुद इसके बारे में क्या कहता है?
मेरे मामले में, पीडीएफ मक्खी पर उत्पन्न होता है, इसलिए इसे फ्लश करने से पहले इसे तृतीय-पक्ष समाधान पर अपलोड नहीं किया जा सकता है।
जवाबों:
संभवतः PDF.JS लाइब्रेरी का उपयोग करना सबसे अच्छा तरीका है । यह किसी भी तृतीय-पक्ष प्लगइन्स के बिना पीडीएफ दस्तावेजों के लिए एक शुद्ध एचटीएमएल 5 / जावास्क्रिप्ट रेंडरर है।
ऑनलाइन डेमो: http://mozilla.github.com/pdf.js/web/viewer.html
<object>
: github.com/mozilla/pdf.js/blob/master/examples/helloworld/…
यह इस बिंदु पर त्वरित, आसान है, और किसी भी तृतीय-पक्ष स्क्रिप्ट की आवश्यकता नहीं है:
<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">
type='application/pdf'
एम्बेड टैग में जोड़ें
<object>
टैग का उपयोग करने के लिए बेहतर है क्योंकि यह ब्राउज़रों में वैकल्पिक सामग्री प्रदर्शित कर सकता है जो पीडीएफ़ प्रदर्शित नहीं कर सकता है। अगर आप चाहें तो एक <embed>
टैग भी लगा सकते <object>
हैं। Ref: stackoverflow.com/questions/1244788/embed-vs-object
आप इस उद्देश्य के लिए 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>
यह महत्वपूर्ण है कि इसमें फ़्लैश प्लेयर की आवश्यकता नहीं है, यह जावास्क्रिप्ट का उपयोग करता है।
public
, sign-in required
और private
। यह निश्चित रूप से एक आधिकारिक विशेषता है, Google डॉक्स पर किसी भी दस्तावेज़ पर विचार करना एक embed
विकल्प है।
आपके पास कुछ नियंत्रण है कि क्वेरी स्ट्रिंग में कुछ विकल्प पास करके ब्राउज़र में पीडीएफ कैसे दिखाई देता है। मैं इस काम से खुश था, जब तक मुझे एहसास नहीं हुआ कि यह 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>
दोनों का उपयोग करना <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>
embed
स्वयं टैग का उपयोग unsafe
करके क्रोम और फ़ायरफ़ॉक्स द्वारा समझा गया था ।
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 प्लगइन (जिसे इमेजिक कहा जाता है) भी है जो इस तरह से काम करता है लेकिन इसकी अपनी विशेष आवश्यकताएं हैं।
foreach($pdf->pages as $page)
और प्रत्येक पृष्ठ के लिए एक छवि बना सकते हैं
इस कोड के लिए एक नजर है- 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>
src
लिए स्विच करना data
काम करता है।
FDView एक SWF के साथ PDF2SWF (जो खुद xpdf पर आधारित है ) को जोड़ती है दर्शक के ताकि आप अपने सर्वर पर पीडीएफ डॉक्यूमेंट्स को मक्खी पर परिवर्तित और एम्बेड कर सकें।
xpdf एक परफेक्ट PDF कन्वर्टर नहीं है। यदि आपको बेहतर परिणामों की आवश्यकता है, तो घोस्टव्यू में पीडीएफ दस्तावेजों को अन्य प्रारूपों में बदलने की कुछ क्षमता है, जिसके लिए आप आसानी से एक फ्लैश दर्शक का निर्माण कर सकते हैं।
लेकिन साधारण पीडीएफ दस्तावेजों के लिए, FDView को अच्छी तरह से काम करना चाहिए।
हमारी समस्या यह है कि कानूनी कारणों से हमें हार्ड डिस्क पर अस्थायी रूप से एक पीडीएफ स्टोर करने की अनुमति नहीं है । इसके अलावा, ब्राउज़र में पूर्वावलोकन के रूप में एक पीडीएफ प्रदर्शित करते समय पूरे पृष्ठ को फिर से लोड नहीं किया जाना चाहिए।
पहले हमने 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>
आईई / एज के लिए ब्राउज़र प्रकार की जांच करने के लिए यहां देखें: मैं जावास्क्रिप्ट का उपयोग करके इंटरनेट एक्सप्लोरर (आईई) और माइक्रोसॉफ्ट एज का पता कैसे लगा सकता हूं? मुझे उम्मीद है कि ये निष्कर्ष किसी और समय को बचाएंगे।
अपने PDF को रखने के लिए एक कंटेनर बनाएँ
<div id="example1"></div>
PDF को बताएं कि किस PDF को एम्बेड करना है, और उसे कहां एम्बेड करना है
<script src="/js/pdfobject.js"></script>
<script>PDFObject.embed("/pdf/sample-3pp.pdf", "#example1");</script>
आप विज़ुअल स्टाइल को निर्दिष्ट करने के लिए वैकल्पिक रूप से CSS का उपयोग कर सकते हैं, जिसमें आयाम, सीमा, मार्जिन आदि शामिल हैं।
<style>
.pdfobject-container { height: 500px;}
.pdfobject { border: 1px solid #666; }
</style>
स्रोत: https://pdfobject.com/
pdf.output('bloburl')
lib jspdf से किया है, लेकिन ऐसा IE11 पर काम नहीं कर रहा है।
आप इस तरह से सहेजे गए पीडीएफ के सापेक्ष स्थान का उपयोग कर सकते हैं:
उदाहरण 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>
स्क्रिब्ड को अब आपको अपने दस्तावेज़ों को उनके सर्वर पर होस्ट करने की आवश्यकता नहीं है। यदि आप उनके साथ एक खाता बनाते हैं तो आपको एक प्रकाशक आईडी मिलता है। यह केवल आपके स्वयं के सर्वर पर संग्रहीत पीडीएफ फाइलों को लोड करने के लिए जावास्क्रिप्ट कोड की कुछ पंक्तियां लेता है।
अधिक जानकारी के लिए, डेवलपर टूल देखें ।
ImageMagick की convert
कमांड का उपयोग करके PdfToImageServlet ।
उपयोग उदाहरण:
<img src='/webAppDirectory/PdfToImageServlet?pdfFile=/usr/share/cups/data/default-testpage.pdf'>
यह वही तरीका है जो मैंने 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>
आपके द्वारा विचार किए जाने वाले विकल्पों में से एक है उल्लेखनीय पीडीएफ
यह एक मुफ्त योजना है जब तक कि आप पीडीएफ़ पर वास्तविक समय ऑनलाइन सहयोग करने की योजना नहीं बना रहे हैं।
निम्नलिखित iframe
को किसी भी HTML में एम्बेड करें और परिणाम का आनंद लें:
<iframe width='1000' height='800' src='http://bit.ly/1JxrtjR' frameborder='0' allowfullscreen></iframe>
फ़ाइल को ब्राउज़र में स्ट्रीम करने के लिए, स्टैक ओवरफ़्लो प्रश्न देखें । .NET 2.0 का उपयोग करके ब्राउज़र के लिए बाइनरी के रूप में एक पीडीएफ फाइल को कैसे स्ट्रीम किया जाए - ध्यान दें, मामूली बदलाव के साथ, यह काम करना चाहिए कि क्या आप फ़ाइल सिस्टम से फ़ाइल की सेवा कर रहे हैं या गतिशील रूप से उत्पन्न।
उस कहा के साथ, संदर्भित MSDN लेख दुनिया का एक सरल दृष्टिकोण लेता है, इसलिए आप HTTPS के माध्यम से ब्राउज़र में PDF स्ट्रीम करने के लिए सफलतापूर्वक स्ट्रीम कर सकते हैं और साथ ही कुछ हेडर जिन्हें आप आपूर्ति करने की आवश्यकता कर सकते हैं।
उस दृष्टिकोण का उपयोग करते हुए, एक आइफ्रेम शायद सबसे अच्छा तरीका है। एक वेबफ़ॉर्म है जो फ़ाइल को स्ट्रीम करता है, और फिर आइफ्रेम को दूसरे पृष्ठ पर src
पहले विशेषता के साथ सेट करता है।
Iframe के लिए URI कुछ इस तरह दिखना चाहिए:
/viewer.html?file=blob:19B579EA-5217-41C6-96E4-5D8DF5A5C70B
अब एफएफ, क्रोम, आईई 11 और एज सभी यूआरएल में मानक ब्लब यूआरआई के माध्यम से पारित iframe में एक दर्शक में पीडीएफ प्रदर्शित करते हैं।
यदि आप अपने दम पर PDF.JS होस्ट नहीं करना चाहते हैं, तो आप DocDroid की कोशिश कर सकते हैं । यह Google ड्राइव पीडीएफ दर्शक के समान है लेकिन कस्टम ब्रांडिंग की अनुमति देता है।
मुझे प्रतिक्रिया के साथ एक पीडीएफ का पूर्वावलोकन करना था, इसलिए कई पुस्तकालयों की कोशिश करने के बाद मेरा इष्टतम समाधान डेटा प्राप्त करना था और इसे निकाल दिया।
const pdfBase64 = //fetched from url or generated with jspdf or other library
<embed
src={pdfBase64}
width="500"
height="375"
type="application/pdf"
></embed>
मैंने पाया कि यह ठीक काम करता है और ब्राउज़र इसे फ़ायरफ़ॉक्स में संभालता है। मैंने IE की जाँच नहीं की है ...
<script>window.location='url'</script>