0
263
Vistas¿Acercar y alejar un iframe con PDF haciendo clic en los botones de zoom con JavaScript?
Estoy tratando de acercar y alejar un iFrame con un PDF usando dos botones. El problema es que el acercamiento/alejamiento se aplica solo al área alrededor del PDF y el PDF permanece intacto.
Lo único que no entiendo es: hay tres tipos de zoom en mi página.
- El acercar/alejar usando mis botones, eso se aplica a algo porque puedo ver que el elemento cambia de ancho con la función clientWidth.
- Si dejo el mouse justo en el PDF y uso la rueda del mouse hacia ARRIBA/ABAJO, el acercamiento/alejamiento funciona PERFECTAMENTE; sí acerca/aleja el PDF.
- El zoom del navegador: si dejo el mouse fuera de la región de PDF, hace el zoom del navegador (110%, etc. Zoom de Chrome...)
A continuación se muestra mi HTML y mi JS. No se utiliza CSS para esto.
HTML:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>O que é HTML?</title> <script type="text/javascript" src="./O que é HTML.js"></script> </head> <body> <div id="titulo"> <h1>PDF sem opção de download - HTML</h1> </div> <div id="pdfViewer"> <iframe src="./pdfs/Apostila HTML.pdf#toolbar=0&navpanes=0&statusbar=0&messages=0" width="100%" height="500px" > </iframe> </div> <div id="zoom"> <button type="button" onclick="maisZoom()">Aumentar zoom</button> <button type="button" onclick="menosZoom()">Diminuir zoom</button> </div> </body> </html>JavaScript:
function maisZoom() { var myPDF = document.getElementById("pdfViewer"); var zoomAtual = myPDF.clientWidth; if (zoomAtual == 2500) return false; else { myPDF.style.width = (zoomAtual + 100) + "px"; } } function menosZoom() { var myPDF = document.getElementById("pdfViewer"); var zoomAtual = myPDF.clientWidth; if (zoomAtual == 100) return false; else { myPDF.style.width = (zoomAtual - 100) + "px"; } }A continuación se muestra un GIF que muestra exactamente lo que dije anteriormente. GIF explicado:
- Primero hacer zoom usando los botones.
- Segundo zoom usando la rueda del mouse con mi mouse en la región PDF.
- Tercer zoom usando la rueda del mouse con mi mouse fuera de la región PDF, lo que hace que el navegador se acerque.
Quiero replicar el segundo zoom: acercar/alejar el PDF con los botones.
¡Cualquier ayuda es apreciada! Gracias.
·
Juan Pablo Isaza
Responde la pregunta