Zooming on pdf in ionic?


#1

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

was hoping if there is a solution to this


#2

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?


#3

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


#4

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…


#5

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


#6

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.


#7

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…


#8

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


#10

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