আমার পুনরুক্তি দ্বারা একটি স্বয়ংক্রিয় উত্পন্ন পিডিএফ ফাইল রয়েছে এবং আমার পিডিএফ ফাইলটি এইচটিএমএলে প্রদর্শিত করতে হবে। আমার প্রশ্ন হ'ল পিডিএফ.জেএস ব্যবহার করে এইচটিএমএলে স্থানীয় পিডিএফ ফাইলটি কীভাবে প্রদর্শিত করবেন ? সেই পিডিএফ ফাইলটি কি কিছু মানদণ্ড দ্বারা উত্পন্ন করা উচিত?
উত্তর:
আপনার এইচটিএমএল ওয়েব পৃষ্ঠায় একটি পিডিএফ ফাইল বাস্তবায়ন খুব সহজ।
<embed src="file_name.pdf" width="800px" height="2100px" />আপনার প্রয়োজনের জন্য প্রস্থ এবং উচ্চতা পরিবর্তন করতে ভুলবেন না। শুভকামনা!
<iframe src="file_name.pdf" style="width: 100%;height: 100%;border: none;"></iframe>
<embed>ট্যাগ খুব সুবিধাজনক HTML5 এর নতুন হয়। এখানে লিঙ্কটি দেখুন
আমি গুগল ডক্স এম্বেডযোগ্য পিডিএফ ভিউয়ার ব্যবহার করি। দস্তাবেজগুলিকে গুগল ডক্সে আপলোড করতে হবে না, তবে সেগুলি অনলাইনে উপলব্ধ থাকতে হবে।
<iframe src="https://docs.google.com/gview?url=https://path.com/to/your/pdf.pdf&embedded=true" style="width:600px; height:500px;" frameborder="0"></iframe>আপনি ব্যবহার pdf.js করতে চান তাহলে, আমি আপনাকে পরামর্শ দিচ্ছি আপনি পড়তে এই
আপনি নিজের পিডিএফ কোথাও (গুগল ড্রাইভের মতো) আপলোড করতে পারেন এবং এর ইউআরএলটি একটি আইফ্রেমে ব্যবহার করতে পারেন
অথবা
<object data="data/test.pdf" type="application/pdf" width="300" height="200">
<a href="data/test.pdf">test.pdf</a>
</object>
আপনি এই জাতীয় এইচটিএমএল পৃষ্ঠায় সহজেই প্রদর্শন করতে পারেন
<embed src="path_of_your_pdf/your_pdf_file.pdf" type="application/pdf" height="700px" width="500">পিসির জন্য এইচটিএমএল পৃষ্ঠায় কার্যকর করা সহজ
<embed src="study/sample.pdf" type="application/pdf" height="300px" width="100%">তবে এই কোড দ্বারা মোবাইলে পিডিএফ শো সম্ভব নয় আপনার অবশ্যই একটি প্লাগইন প্রয়োজন need
যদি আপনার সাইটটিতে প্রতিক্রিয়া না থাকে। তারপরে উপরের কোড পিডিএফ মোবাইলে দেখাবে না তবে আপনি কোডের পরে ডাউনলোড অপশন রাখতে পারেন
<embed src="study/sample.pdf" type="application/pdf" height="300px" width="100%" class="responsive">
<a href="study/sample.pdf">download</a>
সবচেয়ে সহজ উপায় হ'ল ব্যবহার করা,
<iframe src="pdf-link">
</iframe>
এবং যদি এটি দেখার পরিবর্তে এটি ডাউনলোড হয়ে যায় তবে সার্ভারের প্রতিক্রিয়া শিরোনামটি পরীক্ষা করে দেখুন, এটি থাকা উচিত Content-Disposition:Inlineএবং নাও Content-Disposition:Attachment।
1. ব্রাউজার-দেশীয় HTML ইনলাইন এম্বেডিং:
<embed
src="http://infolab.stanford.edu/pub/papers/google.pdf#toolbar=0&navpanes=0&scrollbar=0"
type="application/pdf"
frameBorder="0"
scrolling="auto"
height="100%"
width="100%"
></embed>
<iframe
src="http://infolab.stanford.edu/pub/papers/google.pdf#toolbar=0&navpanes=0&scrollbar=0"
frameBorder="0"
scrolling="auto"
height="100%"
width="100%"
></iframe>
প্রো:
কনস:
২. গুগল ডক্স ভিউয়ার:
<iframe
src="https://drive.google.com/viewerng/viewer?embedded=true&url=http://infolab.stanford.edu/pub/papers/google.pdf#toolbar=0&scrollbar=0"
frameBorder="0"
scrolling="auto"
height="100%"
width="100%"
></iframe>
প্রো:
কনস:
৩. পিডিএফ এম্বেড করার অন্যান্য সমাধান:
গুরুত্বপূর্ণ তথ্য:
দয়া করে এক্স-ফ্রেম-বিকল্পগুলি HTTP প্রতিক্রিয়া শিরোনামটি পরীক্ষা করুন। এটি সমিরিগিন হওয়া উচিত।
X-Frame-Options SAMEORIGIN;পোর্টেবল ডকুমেন্ট ফর্ম্যাট ( পিডিএফ )।
যে কোনও ব্রাউজার the পিডিএফ ফাইল এম্বেড করতে _ এম্বেডযোগ্য গুগল ডকুমেন্ট ভিউয়ার ব্যবহার করুন iframe।
<iframe src="http://docs.google.com/gview?
url=http://infolab.stanford.edu/pub/papers/google.pdf&embedded=true"
style="width:600px; height:500px;" frameborder="0">
</iframe>
শুধুমাত্র ক্রোম ব্রাউজারের জন্য «প্লাগইন ব্যবহার করে ক্রোম পিডিএফ ভিউয়ার। pluginspage=http://www.adobe.com/products/acrobat/readstep2.html।
<embed type="application/pdf"
src="http://www.oracle.com/events/global/en/java-outreach/resources/java-a-beginners-guide-1720064.pdf"
width="100%" height="500" alt="pdf" pluginspage="http://www.adobe.com/products/acrobat/readstep2.html"
background-color="0xFF525659" top-toolbar-height="56" full-frame="" internalinstanceid="21"
title="CHROME">
সিপেট উদাহরণ:
<html>
<head></head>
<body style=" height: 100%;">
<div style=" position: relative;">
<div style="width: 100%; /*overflow: auto;*/ position: relative;height: auto; margin-top: 70px;">
<p>An
<a href="https://en.wikipedia.org/wiki/Image_file_formats" >image</a> is an artifact that depicts visual perception
</p>
<!-- To make div with scroll data [max-height: 500;]-->
<div style="/* overflow: scroll; */ max-height: 500; float: left; width: 49%; height: 100%; ">
<img width="" height="400" src="https://peach.blender.org/wp-content/uploads/poster_bunny_bunnysize.jpg?x11217" title="Google" style="-webkit-user-select: none;background-position: 0px 0px, 10px 10px;background-size: 20px 20px;background-image:linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee 100%),linear-gradient(45deg, #eee 25%, white 25%, white 75%, #eee 75%, #eee 100%);cursor: zoom-in;" />
<p>Streaming an Image form Response Stream (binary data) « This buffers the output in smaller chunks of data rather than sending the entire image as a single block.
<a href="http://www.chestysoft.com/imagefile/streaming.asp" >StreamToBrowser</a>
</p>
</div>
<div style="float: left; width: 10%; background-color: red;"></div>
<div style="float: left;width: 49%; ">
<img width="" height="400" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot"/>
<p>Streaming an Image form Base64 String « embedding images directly into your HTML.
<a href="https://en.wikipedia.org/wiki/Data_URI_scheme">
<sup>Data URI scheme</sup>
</a>
<a href="https://codebeautify.org/image-to-base64-converter">
<sup>, Convert Your Image to Base64</sup>
</a>
<pre>data:[<media type>][;base64],<data></pre>
</p>
</div>
</div>
<div style="width: 100%;overflow: auto;position: relative;height: auto; margin-top: 70px;">
<video style="height: 500px;width: 100%;" name="media" controls="controls">
<!-- autoplay -->
<source src="http://download.blender.org/peach/trailer/trailer_400p.ogg" type="video/mp4">
<source src="http://download.blender.org/peach/trailer/trailer_400p.ogg" type="video/ogg">
</video>
<p>Video courtesy of
<a href="https://www.bigbuckbunny.org/" >Big Buck Bunny</a>.
</p>
<div>
<div style="width: 100%;overflow: auto;position: relative;height: auto; margin-top: 70px;">
<p>Portable Document Format
<a href="https://acrobat.adobe.com/us/en/acrobat/about-adobe-pdf.html?promoid=CW7625ZK&mv=other" >(PDF)</a>.
</p>
<div style="float: left;width: 49%; overflow: auto;position: relative;height: auto;">
<embed type="application/pdf" src="http://www.oracle.com/events/global/en/java-outreach/resources/java-a-beginners-guide-1720064.pdf" width="100%" height="500" alt="pdf" pluginspage="http://www.adobe.com/products/acrobat/readstep2.html" background-color="0xFF525659" top-toolbar-height="56" full-frame="" internalinstanceid="21" title="CHROME">
<p>Chrome PDF viewer
<a href="https://productforums.google.com/forum/#!topic/chrome/MP_1qzVgemo">
<sup>extension</sup>
</a>
<a href="https://chrome.google.com/webstore/detail/surfingkeys/gfbliohnnapiefjpjlpjnehglfpaknnc">
<sup> (surfingkeys)</sup>
</a>
</p>
</div>
<div style="float: left; width: 10%; background-color: red;"></div>
<div style="float: left;width: 49%; ">
<iframe src="https://docs.google.com/gview?url=http://infolab.stanford.edu/pub/papers/google.pdf&embedded=true#:page.7" style="" width="100%" height="500px" allowfullscreen="" webkitallowfullscreen=""></iframe>
<p>Embeddable
<a href="https://googlesystem.blogspot.in/2009/09/embeddable-google-document-viewer.html" >Google</a> Document Viewer. Here's the code I used to embed the PDF file:
<pre>
<iframe
src="http://docs.google.com/gview?
url=http://infolab.stanford.edu/pub/papers/google.pdf&embedded=true"
style="width:600px; height:500px;" frameborder="0"></iframe>
</pre>
</p>
</div>
</div>
</div>
</body>
</html>উপাদানটি সমস্ত ব্রাউজার দ্বারা সমর্থিত হয় এবং এইচটিএমএল ডকুমেন্টের মধ্যে এমবেড করা কোনও বস্তু সংজ্ঞায়িত করে।
নীচের লাইন: ওবিজেইসিটি ভাল, ইএমবেড পুরানো। আইই এর পারাম ট্যাগগুলির পাশাপাশি, ব্রাউজার যদি ওবিজেইসিটি'র উল্লিখিত প্লাগইন সমর্থন না করে তবে ওবিজেইসিটি ট্যাগগুলির মধ্যে যে কোনও বিষয়বস্তু রেন্ডার হয়ে যাবে এবং দৃশ্যত, সামগ্রীটি রেন্ডার হয়ে যায় বা না হয় তা বিবেচনা না করেই http অনুরোধ করা হয়ে থাকে gets উল্লেখ
কাজের কোড: https://www.w3schools.com/code/tryit.asp?filename=G7L8BK6XC0A6
<!DOCTYPE html>
<html>
<body>
<object width="400px" height="400px" data="https://s3.amazonaws.com/dq-blog-files/pandas-cheat-sheet.pdf"></object>
</body>
</html>তুমি ব্যবহার করতে পার
<iframe src="your_pdf_file_path" height="100%" width="100%" scrolling="auto"></iframe>অথবা, আপনি যদি এটি তৈরি করতে চান তবে পুরো পৃষ্ঠাটি হাতে নিতে হবে:
<a href="your_pdf_file_path>Link</a>