Zoom para ajustar: PDF incrustado en HTML

4 minutos de lectura

Zoom para ajustar: PDF incrustado en HTML
usuario3024833

Estoy incrustando un archivo pdf local en una página web simple y estoy buscando configurar el zoom inicial para que se ajuste al tamaño del objeto. Esto es lo que probé pero no está afectando el zoom.

 <embed src="https://stackoverflow.com/questions/20562543/filename.pdf?zoom=50" width="575" height="500">

¿Alguien sabe cómo modificar el código para que su zoom inicial se ajuste al tamaño del objeto?

  • ¿Qué pasa con esto?

    – Puntero Irgendw

    13 dic. 13 en 09:06

  • el modificador que tengo en el código en este momento no está afectando el zoom del archivo pdf, necesito descubrir cómo hacer que el zoom se ajuste al objeto inicialmente

    – usuario3024833

    13 dic. 13 a las 09:48

Zoom para ajustar: PDF incrustado en HTML
Rico

Una respuesta un poco tardía, pero noté que esta información puede ser difícil de encontrar y no he encontrado la respuesta en SO, así que aquí está.

Pruebe con un parámetro diferente #view=FitH para obligarlo a encajar en el espacio horizontal y también necesita comenzar la cadena de consulta con un # en lugar de un & haciéndolo:

filename.pdf#view=FitH

Lo que noté es que esto funcionará si Adobe Reader está incrustado en el navegador, pero Chrome usará su propia versión del lector y no responderá de la misma manera. En mi propio caso, el navegador Chrome hizo zoom para ajustarse al ancho de forma predeterminada, así que no hay problema, pero Internet Explorer necesitaba los parámetros anteriores para garantizar que el enlace siempre abriera la página pdf con la configuración de vista correcta.

Para obtener una lista completa de los parámetros disponibles, consulte este Doc

EDITAR: (modo perezoso activado)

ingrese la descripción de la imagen aquí
ingrese la descripción de la imagen aquí
ingrese la descripción de la imagen aquí
ingrese la descripción de la imagen aquí
ingrese la descripción de la imagen aquí

  • Esto fue genial. ¿Cómo lo obligo a volver a ajustar la página para FitH cuando cambio el tamaño de la ventana del navegador?

    – Vishal

    20 ago. 16 a las 20:15


  • La documentación de los parámetros en la URL, mencionada anteriormente, se ha movido a este enlace adobe.com/content/dam/Adobe/en/devnet/acrobat/pdfs/…

    – Romin Noodle Samurai

    08 feb.


  • ¿Por qué no eres la respuesta votada? 🙂 ¡Muchas gracias!

    – Martín Eckleben

    12 mayo 2017 en 14:28

  • ¿Hay alguna forma de cambiar el color del contenedor de fondo del elemento ? Veo gris fuera del documento pero dentro del elemento. Preferiría que fuera transparente o heredado del elemento.

    – Vishal

    02 oct.

  • No pude hacerlo funcionar en Edge. El navegador ignoró los parámetros. Chrome admite al menos algunos de ellos (por ejemplo, vista, zoom, página).

    – Josef Blaha

    25 sep.

Para mí esto funcionó (quería hacer zoom porque el contenedor de mi pdf era pequeño):

    <embed src="filename.pdf#page=1&zoom=300" width="575" height="500">

  • #zoom=50 o #page=2&zoom=300 funcionan perfectamente tanto en Chrome como en IE. IE solo parece estar respondiendo a #view=Fit. Más parámetros de IE aquí: partners.adobe.com/public/developer/es/acrobat/…

    – Sergio Z

    30 jun.

  • Tenía un PDF de varias páginas y #zoom=100 funcionó para mí.

    – adrianp

    02 nov.

Zoom para ajustar: PDF incrustado en HTML
sr harvey

Este método usa “objeto”, también tiene “incrustar”. Cualquier método funciona:

<div id="pdf">
    <object id="pdf_content" width="100%" height="1500px" type="application/pdf" trusted="yes" application="yes" title="Assembly" data="Assembly.pdf?#zoom=100&scrollbar=1&toolbar=1&navpanes=1">
    <!-- <embed src="https://stackoverflow.com/questions/20562543/Assembly.pdf" width="100%" height="100%" type="application/x-pdf" trusted="yes" application="yes" title="Assembly">
    </embed> -->
    <p>System Error - This PDF cannot be displayed, please contact IT.</p>
    </object>
</div>

Zoom para ajustar: PDF incrustado en HTML
kuz1toro

en caso de que alguien lo necesite, en firefox para mí funciona así

<iframe src="filename.pdf#zoom=FitH" style="position:absolute;right:0; top:0; bottom:0; width:100%;"></iframe>

Respuesta un poco tardía a esta pregunta, sin embargo, tengo algo que agregar que podría ser útil para otros.

Si utiliza un iFrame y establece la ruta del archivo pdf en src, se cargará al 100%, lo que equivale a FitH

Zoom para ajustar: PDF incrustado en HTML
hien nguyen

Seguido @Rico respuesta, usé ver=AjustarH en mi código para ver el contenido de PDF base64 en Angular como se muestra a continuación.

Compartí para quién la preocupación por ver archivo PDF de contenido base64 con etiqueta de objeto usando Angular marco de referencia.

La opción para ver PDF

this.pdfContent =
      URL.createObjectURL(this.b64toBlob(content, 'application/pdf')) +
      '#toolbar=0&navpanes=0&scrollbar=0&view=FitH';

Leer contenido PDF de API como

let content = DataHelper.getDataFromAPI();

Cuando haga clic en mostrar el uso del botón de contenido

showData() {
    let content = DataHelper.getDataFromAPI();

    this.pdfContent =
      URL.createObjectURL(this.b64toBlob(content, 'application/pdf')) +
      '#toolbar=0&navpanes=0&scrollbar=0&view=FitH';

    this.pdfview.nativeElement.setAttribute('data', this.pdfContent);
  }

En el archivo HTML, use la etiqueta del objeto como

<object #pdfview
[data]=''
type="application/pdf"
width="100%"
height="800px"
>
</object>

Enlace de demostración de Angular https://stackblitz.com/edit/angular-ivy-tdmieb

Zoom para ajustar: PDF incrustado en HTML
anilglpl

Use la etiqueta iframe para mostrar el archivo pdf con ajuste de zoom

<iframe src="https://stackoverflow.com/questions/20562543/filename.pdf" width="" height="" border="0"></iframe>

.

¿Ha sido útil esta solución?