Open & Download PDF Files with Ionic [v3]

Working with PDFs or other files can sometimes be a bit tricky, especially when the WKWebView on iOS handles stuff differently or you only get some binary data from an API. There are a many things that can go wrong, but let’s take a look at an easy way to open and display PDFs with Ionic.

In this Quick Win we will handle both cases: Open a PDF that exists in the assets folder of our app and also downloading and displaying data from anywhere on the web as a file to our device.

ionic-pdf-files
This is how the final result of our opened PDF will later look like on a device!

The full quick win with snippets is only available to Ionic Academy members.
Join now for

  • Unlimited access to all quick wins
  • Library of 40+ step-by-step video courses
  • Support for Ionic questions via Slack & private community

Join now & Unlock


Comments on Open & Download PDF Files with Ionic [v3]

  1. Daniel Opiyo says:

    Good one

  2. mohamed elsayad says:

    not work with me it’s navigate me to (playstore) to download (cleverdox viewer)

    1. vr_hello says:

      I got this request too. It’s a little strange. I’m pretty sure it downloaded the PDF, but, I noticed it actually does a search for this app specifically, as per the logs.
      I/chromium: [INFO:CONSOLE(424)] “App de.sitewaerts.cleverdox.viewer successfully installed”, source: file:///android_asset/www/plugins/cordova-plugin-document-viewer/www/sitewaertsdocumentviewer.js (424)

    2. vr_hello says:

      Further to my last, the plugin is designed to pull that app. It’s listed in the documentation here:
      https://github.com/sitewaerts/cordova-plugin-document-viewer

  3. Chandrabhan Maurya says:

    not work with me it’s navigate me to (playstore) to download (cleverdox viewer)

    1. LyonOconner says:

      x2

      1. sidali says:

        me too, is there any solution for this

  4. MOhamed Kamal says:

    i don’t know why Is not working for me

  5. Rohith varala says:

    Hi am getting below errors,

    ERROR Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[HomePage -> DocumentViewer]:
    StaticInjectorError(Platform: core)[HomePage -> DocumentViewer]:
    NullInjectorError: No provider for DocumentViewer!
    Error: StaticInjectorError(AppModule)[HomePage -> DocumentViewer]:
    StaticInjectorError(Platform: core)[HomePage -> DocumentViewer]:
    NullInjectorError: No provider for DocumentViewer!
    at _NullInjector.prototype.get (http://localhost:8100/build/vendor.js:1377:13)
    at resolveToken (http://localhost:8100/build/vendor.js:1675:9)
    at tryResolveToken (http://localhost:8100/build/vendor.js:1617:9)
    at StaticInjector.prototype.get (http://localhost:8100/build/vendor.js:1485:13)
    at resolveToken (http://localhost:8100/build/vendor.js:1675:9)
    at tryResolveToken (http://localhost:8100/build/vendor.js:1617:9)
    at StaticInjector.prototype.get (http://localhost:8100/build/vendor.js:1485:13)
    at resolveNgModuleDep (http://localhost:8100/build/vendor.js:11270:5)
    at NgModuleR

  6. solulab inc says:

    its working but need cleverdox viewer download from playstore can we open the pdf without cleverbox viewer ?

  7. Kishan says:

    can i get annotations on the opened PDF?

  8. Sampath Kumar says:

    https://uploads.disquscdn.com/images/ca6f0c588261113cc27010798842585983ee29b743cebbda1cef922416db1025.png

    Throwing error i followed exactly as you did.
    May i know to resolve this error.

    Error: exec proxy not found for :: SitewaertsDocumentViewer :: canViewDocument
    sitewaertsdocumentviewer.js:208 Error in SitewaertsDocumentViewer.canViewDocument(): Missing Command Error
    sitewaertsdocumentviewer.js:343 Error in SitewaertsDocumentViewer.viewDocument(): Missing Command Error

    1. Anty Naty says:

      same here!! did you solved it?

  9. Phan Sơn says:

    It’s working with me. But i have a question, when my android device doesn’t support open pdf format, plugin will suggest cleverdox Viewer is application, which open pdf file downloaded to local.
    Thanks you so much !!

  10. pascal DANHO says:

    Hello I use ionic 3.20.1. I use the same code but anything on my phone

Leave a Reply

Your email address will not be published. Required fields are marked *