Показать 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

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

http://issuu.com/smartlook

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

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

Answer 4

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

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

Answer 5

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

Answer 6

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

Answer 7

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

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

Answer 8

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

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

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

Я предпочитаю JQuery, если вы не используете AJAX.

Answer 9

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