Zooming on pdf in ionic?

I used ng2 pdf viewer to open pdf
but it doesnt support pinch and zoom

was hoping if there is a solution to this

There were multiple discussions on this here in the forum in the last few days.
Did you search in the forum itself and via Google?

yes did searched about it
the most i could find was https://www.npmjs.com/package/ng2-pdf-viewer
but it doesnt support zoom on pinching in and out

I need to find a solution to this also. I would have thought there would be lots of plugins out there but there isn’t. I need it to support local files too…

Hey, I need the exact same thing. Have you found a solution yet? I would really appreciate your help… Thanks

I ended up using a inappBrowser plugin with google pdf viewer https://drive.google.com/viewerng/viewer?url=

I have another button which uses the FileOpener plugin as an alternative which works for offline files.

A post was split to a new topic: I have base 64 String that I need to convert and show it as pdf/ image or doc/excel etc… depending on the content type of the base 64 String…

For pinch zoom and panning of PDFs, check out leaftlet.js and the blog post below (no affiliation w/blogger)

Pan Zoom Image with Leaflet

Works with pdfs too. Pinch zoom and pan don’t seem to be as smooth as with a jpg or png, but it works

Install leaflet via npm,


npm install --save leaflet

then include in your component:


import L from "leaflet";

Initialize your map/pdf in ionViewDidLoad()


  ionViewDidLoad() {
      this.initMap();
  }

  initMap(){

    this.map = L.map('image-map', {
        ....
    }
 
    // etc...

  }


You can pretty much follow the code in the blog verbatim. Of course you’ll likely need to change the dimensions and the path to pdf


let w = 2566;
let h = 1324,
let url = 'assets/pdf/my.pdf;

Sometimes a larger jpg or png doesn’t fully render so you may have to add the following after you’ve created the ‘map’


this.map.invalidateSize();

You’ll need this or you’ll get an ‘map already initialized’ error if you return to the view. (for some reason this.map.remove() does not seem to work


// <div id="image-map" #mapContainer></div> 

ionViewCanLeave(){
    this.mapContainer.nativeElement.outerHTML = '';
}

Other things:

  • copy node_modules/leaflet/dist/leaflet.css to src/assets/css/leaflet.css
  • the load the css in your index.html

<link rel="stylesheet" href="assets/css/leaflet.css"></link>

Voila. Pinch zoom and intertia scrollable pdf

1 Like

Its kinda late but i figure it out ,check my repo here

you’ll run to CORS problem when using PDFs