私たちは学びます PDF ファイルを HTML ドキュメントに埋め込む方法 例を通じてその実装を理解するとともに。場合によっては、コンテンツをよりインタラクティブにするために、PDF ファイルを HTML ドキュメントまたはコードに挿入することが必要になる場合があります。形式が大きく異なるため、このタスクを実行するのは簡単ではありません。
これを行うには次の方法があります。
目次
方法 1: を使用する オブジェクトタグ
- HTML の object タグは、PDF ファイルを埋め込む最初の方法です。以下の例では、オブジェクトであるWebページ上にPDFファイルが表示されます。
- PDF ファイルを Web ページに埋め込むことに加えて、オブジェクト タグでは、ActiveX、Flash、ビデオ、オーディオ、および Java アプレットを埋め込むことができます。
- インタラクティブなドキュメントは、HTML タグが埋め込まれたオブジェクトに添付できます。
- オブジェクトの高さと幅の属性を使用して、必要に応じて画面上に表示できます。
例1 : この例では、Object タグを使用した HTML への PDF ファイルの埋め込みについて説明します。
HTML HTML 内の PDFtitle> head><style>.pdf { 幅: 100%; アスペクト比: 4 / 3; } .pdf、html、本文 { 高さ: 100%; マージン: 0; パディング: 0; h1, h3 { テキスト整列: 中央; } } h1 { 色: 緑; } スタイル> <body> <h1>techcodeview.comh1><h3>Object Tagh3を使用したPDFファイルの埋め込み><object>オブジェクト>本文>html>>></pre> </code> <p dir='ltr'> <b> <strong>出力：</strong> </b> </p> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /> <img src='//techcodeview.com/img/geeks-premier-league-2022/50/how-embed-pdf-file-using-html.webp' alt=""><h2 id='method-2-using-an-iframe'> <b> <strong>方法 2:</strong> </b> <a href='/html-iframes' rel=''> <b> <strong>iframe</strong> </b> </a> </h2><ul><li value='1'><span>iframe タグの使用は、HTML Web ページに PDF ファイルを埋め込む 2 番目の方法です。 Web 開発では、Web 開発者は iframe タグを使用して、さまざまな形式のファイルを埋め込んだり、Web ページ内に他の Web サイトを埋め込んだりすることもできます。</span></li><li value='2'><span>iframe タグは幅広い互換性があるため、PDF の埋め込みに広く使用されています。</span></li><li value='3'><span>PDF ドキュメントまたは object タグをサポートしていないブラウザでも、このタグを使用して PDF HTML コードを埋め込むことができます。</span></li></ul><p dir='ltr'> <b> <strong>例 2</strong> </b> <span>: この例では、iframe を使用した HTML への PDF ファイルの埋め込みについて説明します。</span></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/constructors-java">Javaのコンストラクター</a>
</blockquote>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <title>HTML 内の PDFtitle> head><style>.pdf { 幅: 100%; アスペクト比: 4 / 3; } .pdf、html、本文 { 高さ: 100%; マージン: 0; パディング: 0; h1、h3 {テキスト整列:中央; } h1 { 色: 緑; } スタイル> <body> <h1>techcodeview.comh1><h3>Iframe Tagh3を使用したPDFファイルの埋め込み> <iframe>iframe> body> html>>></pre> </code> <p dir='ltr'> <b> <strong>出力：</strong> </b> </p> <img src='//techcodeview.com/img/geeks-premier-league-2022/50/how-embed-pdf-file-using-html.webp' alt=""><h2 id='method-3-using-embed-tag'> <b> <strong>方法 3: を使用する</strong> </b> <b> <strong>タグを埋め込む</strong> </b> </h2><ul><li value='1'><span>PDF HTML コードを Web サイトに埋め込む場合、ユーザーのブラウザーが PDF ファイルを処理できない場合、表示が空白になるため、embed タグは以前のタグほど使用されません。</span></li><li value='2'><span>PDF HTML コードを埋め込む方法は、フォールバック コンテンツを提供する必要がない場合に使用されます。</span></li></ul><p dir='ltr'> <b> <strong>例</strong> </b> <span>: この例では、embed タグを使用して PDF ファイルを HTML に埋め込みます。</span></p> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br />HTML<code class='hljs'> <pre class='hljs'> <html> <head> <title>HTML 内の PDFtitle> head><style>.pdf { 幅: 100%; アスペクト比: 4 / 3; } .pdf、html、本文 { 高さ: 100%; マージン: 0; パディング: 0; h1、h3 {テキスト整列:中央; } h1 { 色: 緑; } スタイル> <body> <h1>techcodeview.comh1><h3>embed Tagh3を使用してPDFファイルを埋め込む> <embed>本文> html>>></pre> </code> <p dir='ltr'> <b> <strong>出力：</strong> </b> </p> <img src='//techcodeview.com/img/geeks-premier-league-2022/50/how-embed-pdf-file-using-html.webp' alt=""> <br> <br></article>
</div><!--//content-->
</div><!--//section-inner-->
</section><!--//section-->
</div><!--//primary-->
<div class="secondary col-md-4 col-sm-12 col-xs-12">
<aside class="info aside section">
<div class="section-inner">
<h2 class="">カテゴリ</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/geometry-maq/">ジオメトリ - Maq</a> </li><li> <a href="/python-numpy-program/">Python Numpy プログラム</a> </li><li> <a href="/project/">プロジェクト</a> </li><li> <a href="/computer-gk/">コンピュータ合同会社</a> </li><li> <a href="/pl-sql-tutorial/">Pl/Sql チュートリアル</a> </li><li> <a href="/numpy-tutorial/">Numpy チュートリアル</a> </li><li> <a href="/cpp-multithreading/">Cpp-マルチスレッド</a> </li><li> <a href="/java-interfaces/">Javaインターフェース</a> </li><li> <a href="/python-seaborn/">パイソン・シーボーン</a> </li><li> <a href="/java-throwable-class/">Java のスロー可能クラス</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">C++ Do/while ループ</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> オタク向けのコンピューター サイエンス ポータル。これには、よく書かれ、よく考えられ、よく説明されたコンピューター サイエンスとプログラミングの記事、クイズ、練習/競技プログラミング/企業面接の質問が含まれています。</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/c-do-while-loop"> <i class="fa fa-external-link"></i> 続きを読みます</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">興味深い記事</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/numpy-average-python">Python の numpy.average()</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/ultimate-guide-ap-us-history-exam-131610">AP 米国歴史試験の究極ガイド</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-create-bootable-usb-flash-drive-windows-linux-using-cmd">CMD を使用して Windows/Linux でブート可能な USB フラッシュ ドライブを作成する方法</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/method-overriding-java">Java でのメソッドのオーバーライド</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/palindrome-program-java">Java での回文プログラム</a> </strong> </span>
</li><!--//item-->
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="list music aside section">
<div class="section-inner">
<h2 class="heading">人気の投稿</h2>
<div class="content">
<ul class="list"> <li><a href="/java-break-statement">Java ループから抜け出す</a>
</li><li><a href="/java-string-replaceall">Java文字列置換オール</a>
</li><li><a href="/spring-boot-jpa">春のjpa</a>
</li><li><a href="/c-dereference-pointer">逆参照ポインタ</a>
</li><li><a href="/java-list">Javaでのリスト作成</a>
</li><li><a href="/mylivecricket-alternatives">私のライブクリクレット</a>
</li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
</div><!--//secondary-->
</div><!--//row-->
</div><!--//masonry-->
<footer class="footer">
<div class="container text-center">
<span>
Copyright ©2025 全著作権所有 | <a href="//pt.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">免責事項</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">私たちについて</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">プライバシーポリシー</a> </span>
</div>
</footer>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/js/main.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
</body>
</html>