如何使用Javascript在网页上重置缩放（收缩缩放）？

Question

我正在处理一个基于旧版cordova的应用程序。我的页面上有一个iframe，我在其中显示PDF文件（使用PDFJS库）。用户可以通过PDF查看器上的缩放按钮或捏合缩放来对PDF区域进行缩放。要求是当用户点击主页面上的按钮（非iframe区域）时，必须将PDF的缩放级别重置为正常。

如果缩放是使用缩放按钮完成的，我可以使用以下代码（PDFJS特定）执行此操作：

document.getElementById("myPdf").contentWindow.PDFViewerApplication.pdfViewer.currentScaleValue = 'auto';

但是，如果是使用捏合缩放完成的缩放，则无法重置缩放级别（当使用捏合缩放时，加载在iframe中的整个HTML都会被缩放，因此这是一个网页缩放）。我尝试了下面的代码来重置初始缩放比例，但它无效。

document.querySelector("meta[name=viewport]").setAttribute(
          'content', 
          'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0');

有没有人能提出一种方法来做这件事？

- hashcoder

---

如果您可以使用API自行调整PDF大小，那么可以拦截用户缩放/捏合事件并自己缩放PDF以获得更多控制。 - the Hutt

请提供 codesandbox pdfjs 的最小可复现示例，以便更好地理解。 - the Hutt

会尝试此解决方案并在此更新.. 感谢提供的帮助.. - hashcoder

Answer 1

您可以尝试操作所需目标元素上的 .style.zoom 属性：

const zoomingTarget = document.querySelector('.zooming-target')

在您获取所需元素（要重置的缩放级别）之后，可以更改其.style.zoom属性：

zoomingTarget.style.zoom = "calc(100% + " + zoomIndex*10 + "%)";

使用两个按钮实现->更改浏览器缩放级别

- The Cors Error

---

会尝试这个解决方案并在此更新..感谢您的解决方案。 - hashcoder