html - como - Mostrar Adobe PDF dentro de un div

preview pdf html

Question

Tengo un archivo pdf que el usuario tiene que ver y hacer clic en el botón "Acepto". ¿Cómo mostrar un pdf dentro de un div?

Answer 1

Aquí hay otra forma de mostrar PDF dentro de Div usando Iframe como abajo.

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

Answer 2

Creo que no funciona, porque la propiedad z-index no se aplica en pdf (ningún objeto externo). Entonces, cuando agrega cualquier control en el límite de la vista PDF, aparece detrás de la vista pdf.

Answer 3

No creo que puedas. Es posible que necesite usar un iframe en su lugar.

Answer 4

No puedes, y aquí está la respuesta simple.

Cada activo de medios vertido en el navegador se identifica con un nombre de tipo mime. Un navegador luego hace determinaciones de procesamiento sobre ese nombre de tipo mime. Si es imagen / gif o imagen / jpeg, el navegador procesa el activo como una imagen. Si es texto / css o texto / javascript, se procesa como un activo de código a menos que el activo se dirija de forma independiente de HTML. PDF se identifica como aplicación / pdf. Cuando los navegadores ven application / pdf, cambian inmediatamente el procesamiento a un software de complemento capaz de procesar ese tipo de medio. Si intenta insertar medios de tipo application / pdf en un div, el navegador probablemente arrojará un error al usuario. Normalmente, los archivos de tipo application / pdf se vinculan directamente para que el software de procesamiento pueda interceptar la solicitud y procesar los medios independientemente del navegador.

Answer 5

Puede crear una miniatura de la imagen y vincularla al pdf real como una ventana emergente en línea usando algo como http://orangoo.com/labs/GreyBox/

Answer 6

Puede ser que puedes hacer usando AJAX o jQuery ...
simplemente envíe la url del archivo en una página y luego abra como el archivo pdf normalmente abierto en esa página y use ajax.

1) tan pronto como el usuario haga clic en el botón. entonces u llama a esa función en la que u por encima de gusto. Así, de esta manera, solo habrá una página y, de esta forma, podrá mostrar tantos pdf sin actualizar la página.

2) Si no tiene muchos pdf y si no lo sabe, simplemente cargue ese archivo en Google Docs y luego coloque el archivo de enlace compartido ... y luego use Ajax o JQuery.

Prefiero jquery si no tienes uso AJAX.

Answer 7

Puede usar la biblioteca de Javascript PDF.JS para visualizar un PDF dentro de un div. El tamaño del PDF se puede ajustar de acuerdo con el tamaño de la div. También puede configurar controladores de eventos para pasar a las páginas siguientes / anteriores del PDF.

Puede consultar el tutorial PDF.JS: cómo visualizar un PDF con Javascript para ver cómo se puede integrar PDF.JS en su código HTML.

Answer 8

Sí tu puedes.

Vea el código del siguiente hilo de 2007: PDF dentro de un DIV

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

Utiliza <object> , que puede ser estilizado con CSS, por lo que puede hacerlos flotar, darles bordes, etc.

(Al final, edité mis archivos pdf para eliminar bordes grandes y los convertí a imágenes jpg).

Answer 9

Usamos esto en nuestro sitio web.

http://issuu.com/smartlook

Es muy personalizable para mostrar archivos PDF directamente en su navegador. Básicamente, aloja el PDF en un objeto flash si no se opone a ese tipo de cosas.

Aquí hay una sample de nuestro sitio web corporativo.