放大＆amp;通过使用JavaScript单击Zoom按钮来缩小使用PDF的iframe？

发布于 2025-02-01 04:03:01 字数 2103 浏览 3 评论 0原文

我正在尝试使用两个按钮使用PDF放大和从iframe中放大。问题在于，缩放入口仅适用于PDF周围的区域，并且PDF保持完整。

我没有得到的一件事是：我的页面上有三种缩放。

使用我的按钮缩放/输入，这确实适用于某些内容，因为我可以看到元素使用客户端函数更改宽度。
如果我将鼠标直接放在PDF上，然后将鼠标向上/向下使用，则缩放进出功能非常完美 - 它可以放大/缩小PDF。
浏览器变焦 - 如果我将鼠标留在PDF区域外，它会

在下面的HTML和JS下进行浏览器变焦（110％等。ChromeZoom ...）。没有使用CSS。

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";
    }
  }

下面是GIF，显示了我上面所说的。 GIF解释：

首先使用按钮缩放。
第二次使用鼠标轮将鼠标与我的鼠标放大，在PDF区域上。
使用鼠标轮和我的鼠标在PDF区域外的鼠标轮子进行第三个变焦，该区域可进行浏览器变焦。

我想使用按钮复制第二个缩放 - 放大/输出PDF。

任何帮助都会感谢它！谢谢。

原文

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.