web-dev-qa-db-ja.com

埋め込みPDFオブジェクトタグを使用してHTMLにファイル

私のhtmlコードにpdfドキュメントを埋め込みます。このために私はこのコードを書きました。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org

/TR/html4/loose.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title></title>
</head>
<body>
<object height="100%" width="100%" type="application/pdf" data="yii.pdf#toolbar=1&amp;navpanes=0&amp;scrollbar=1&amp;page=1&amp;view=FitH">

<p>It appears you don't have a PDF plugin for this browser. No biggie... you can <a href="/pdf/sample.pdf">click here to download the PDF file.</a></p>

</object>

</body>
</html>

しかし、結果はFF4の空のページであり、IE9はPDFファイルを埋め込みますが、そのコンテナーはページのほぼ30％と非常に小さいです。最初の行、つまりDOCTYPEを削除すると、両方のブラウザでpdfファイルが正しくレンダリングされます。次のコードは正常に動作します。

<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title></title>
</head>
<body>
<object height="100%" width="100%" type="application/pdf" data="yii.pdf#toolbar=1&amp;navpanes=0&amp;scrollbar=1&amp;page=1&amp;view=FitH">

<p>It appears you don't have a PDF plugin for this browser. No biggie... you can <a href="/pdf/sample.pdf">click here to download the PDF file.</a></p>

</object>

</body>
</html>

他のページが正常に機能するように、私のページでdoctypeを使用したいと考えています。 doctypeを含む最初のコードを修正する方法はありますか？

htmlpdfembed
9
mysterious

<iframe>要素。
そうでない場合は、フラッシュに変換してからフラッシュを埋め込む可能性があります。

また、<!doctype html>そしてそれが何をするかを見てください、それはHTML5の標準のdoctypeです

5
tXK

これは基本的に@tXKの答え（+1）ですが、機能する（戦闘テスト済み）コードを使用します。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Preview</title>
<style type="text/css">
html, body {
    margin: 0;
    padding: 0;
    border: 0;

    height: 100%;
    overflow: hidden;
}
iframe {
    width: 100%;
    height: 100%;
    border: 0
}
</style>
</head>

<body>

<iframe src=""></iframe>

</body>
</html>
9
thirtydot

PDFを表示するには3つの方法があります：埋め込み、オブジェクト、またはiframeを使用します。残念ながらiframeを使用すると、PDF内にAdobe Javascriptを使用できませんhostContainerが定義されていないため、メッセージをHTMLでJSに投稿します。そのため、埋め込みまたはオブジェクトを使用する必要があります。幸い、thirtydotのスタイルコードはオブジェクトにも最適です。これが私の作業コードです...

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Preview</title>
<style type="text/css">
html, body {
    margin: 0;
    padding: 0;
    border: 0;
    height: 100%;
    overflow: hidden;
}
object {
    width: 100%;
    height: 100%;
    border: 0
}
</style>
<script language="javascript">
    function handleMessage(msg) {
      alert('got message '+msg);
    }
    function setupHandler() {
      document.getElementById("myPdf").messageHandler = { onMessage: handleMessage };
    }
</script>
</head>
<body onLoad="setupHandler();">
<object id="myPdf" type="application/pdf" data="file_with_actions.pdf">
Unable to open the PDF file.
</object>
</body>
</html>

あなたはJavascriptのものについてもっと読むことができます ここ 。

6
John Henckel