5

I am working on an old cordova based app. On my page I have an iframe where I display PDFs (using PDFJS library). User can zoom on the PDF area, either using the zoom buttons on the PDF viewer or pinch zoom. The requirement is when user clicks on a button on the main page (non iframe area) I have to reset the zoom level of the PDF to normal.

enter image description here

I am able to do this if the zoom is done via zoom buttons using below code (PDFJS specific)

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

But if the zoom is done using pinch zoom I am unable to reset (when pinch zoom is done, the complete HTML which is loaded in iframe is getting zoomed, so its a web page zoom). I tried below code, to reset the initial scale but its not working

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

Could anyone suggest a way to do this ?

hashcoder
  • 498
  • 7
  • 19
  • 1
    If you can resize pdf yourself using APIs then [intercept](https://stackoverflow.com/a/66874077/15273968) user zoom\pinch events and zoom pdf yourself. This way you'll have more control. – the Hutt Dec 22 '21 at 13:03
  • 3
    provide [codesandbox pdfjs](https://codesandbox.io/s/pmy914l2kq?file=/index.html) minimal reproducible for better understanding. – the Hutt Dec 22 '21 at 13:15
  • will try this out and update here.. thanks for that solution.. – hashcoder Jan 07 '22 at 08:36

1 Answers1

1

You can try manipulating the .style.zoom property on the desired target element:

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

After you grabbed the desired element, which zoom you want to reset, you can change the .style.zoom property on it:

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

Implementation with two buttons-> Changing the browser zoom level

Dharman
  • 30,962
  • 25
  • 85
  • 135
The Cors Error
  • 23
  • 4