встраивание PDF-файла в html с помощью тега объекта

Я встраиваю pdf-документ в свой html-код. Для этого я написал этот код.

<!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% страницы. если я удалю первую строку i.e 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?

9
embed html pdf

3 ответов

Я бы попробовал с <iframe> элемент.
Если нет, возможно, преобразование его во вспышку, а затем внедрение вспышки.

кроме того, попробовать <!doctype html> и посмотрите, что он делает, это стандартный doctype для HTML5

5

это в основном ответ @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

есть три способа показать PDF в HTML: с помощью embed, object или iframe. К сожалению, использование iframe не позволит Adobe Javascript внутри PDF для публикации сообщений в JS в HTML, потому что hostContainer не определен. Поэтому я вынужден использовать embed или object. К счастью!--4-->thirtydot ' s код стиля также отлично работает для объекта. Вот мой рабочий код...

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