I used ng2 pdf viewer to open pdf
but it doesnt support pinch and zoom
was hoping if there is a solution to this
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)
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:
<link rel="stylesheet" href="assets/css/leaflet.css"></link>
Voila. Pinch zoom and intertia scrollable pdf
you’ll run to CORS problem when using PDFs