Показать Adobe PDF внутри div

Question

У меня есть PDF-файл, который пользователь должен просмотреть, и нажмите кнопку «Я согласен». Как вы отображаете PDF внутри div?

Answer 1

Да, вы можете.

См. Код из следующей ветки от 2007 года: PDF в DIV

<div>
    <object data="test.pdf" type="application/pdf" width="300" height="200">
        alt : <a href="test.pdf">test.pdf</a>
    </object>
</div>

Он использует <object>, который можно стилизовать с помощью CSS, и поэтому вы можете плавать их, давать им границы и т. Д.

(В конце я отредактировал свои pdf-файлы, чтобы удалить большие границы, и преобразовал их в изображения jpg.)

Answer 2

Вот еще один способ отображения PDF внутри Div с помощью Iframe, как показано ниже.

<div>
  <iframe src="/pdf/test.pdf" style="width:100%;height:700px;"></iframe>
</div>
<div>
  <!-- I agree button -->
</div>

Answer 3

Вы можете использовать библиотеку Javascript PDF.JS для отображения PDF внутри div. Размер PDF можно настроить в соответствии с размером div. Вы также можете настроить обработчики событий для перехода к следующим / предыдущим страницам PDF.

Вы можете оформить заказ PDF.JS Tutorial - Как отобразить PDF с Javascript , чтобы увидеть, как PDF.JS может быть интегрирован в ваш HTML-код.

Answer 4

Мы используем это на нашем сайте

http://issuu.com/smartlook

Это очень настраиваемый для отображения PDF прямо в вашем браузере. Он в основном размещает PDF во флэш-объекте, если вы не против такого рода вещей.

Вот образец с нашего корпоративного сайта.

Answer 5

Я думаю, что это не работает, потому что вы не применили свойство z-index к pdf (любой внешний объект). Поэтому, когда вы добавляете какой-либо элемент управления в границу представления PDF, он появляется позади представления PDF.

Answer 6

может быть, вы можете сделать, используя AJAX или jquery ...
просто отправьте этот URL-адрес файла на одну страницу, а затем откройте, как обычно открытый файл PDF на этой странице, и используйте ajax.

1) так, как только пользователь нажмет на кнопку. тогда вы вызываете ту функцию, в которой вы выше. Таким образом, таким образом будет только одна страница, и тем самым вы сможете показать столько же PDF, не обновляя страницу.

2) если у вас мало pdf и если вы не знаете, просто загрузите этот файл на google docs а затем просто поместите файл ссылки на общий ресурс .... и затем просто используйте ajax или jquery.

Я предпочитаю jquery, если у вас нет AJAX.

Answer 7

Вы не можете, и вот простой ответ.

Каждый медиаресурс, залитый в браузер, идентифицируется именем mime-типа. Затем браузер выполняет обработку определений для этого имени MIME-типа. Если это image / gif или image / jpeg, браузер обрабатывает ресурс как изображение. Если это text / css или text / javascript, он обрабатывается как актив кода, если только ресурс не адресован независимо от HTML. PDF идентифицируется как приложение / pdf. Когда браузеры видят application / pdf, они немедленно переключают обработку на программное обеспечение плагина, способное обрабатывать этот тип мультимедиа. Если вы попытаетесь вставить носитель типа application / pdf в div, браузер, скорее всего, выдаст ошибку пользователю. Обычно файлы типа application / pdf связаны напрямую, так что программное обеспечение для обработки перехватывает запрос и обрабатывает носитель независимо от браузера.

Answer 8

Вы можете создать миниатюру изображения и связать его с настоящим pdf в виде встроенного всплывающего окна, используя что-то вроде http://orangoo.com/labs/GreyBox/

Answer 9

Не думаю, что ты можешь. Возможно, вам придется использовать Ифраме вместо этого.