0
265
ViewsZoom in & zoom out an iframe with PDF by clicking zoom buttons with JavaScript?
I'm trying to zoom in and out of an iFrame with a PDF using two buttons. The problem is that the zoom in/out applies only to the area around the PDF, and the PDF remains intact.
The one thing i am not getting is: There is three types of zoom on my page.
- The zoom in/out using my buttons, that does apply to something because i can see the element changing width with clientWidth function.
- If i leave my mouse right at the PDF and use my mouse wheel UP/DOWN, the zoom in/out works PERFECTLY - It does zoom in/out the PDF.
- The browser zoom - If i leave my mouse outside the PDF region, it does the browser zoom (110%, etc. Chrome zoom...)
Below is my HTML and my JS. No CSS used for this.
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";
}
}
Below is a GIF showing exactly what i said above. Gif explained:
- First zoom using buttons.
- Second zoom using mouse wheel with my mouse on the PDF region.
- Third zoom using mouse wheel with my mouse outside PDF region, which does the browser zoom.
I want to replicate the second zoom - Zoom in/out of the PDF using the buttons.
Any help is appreciate it! Thank you.
·
Juan Pablo Isaza
Answer question