Creating and showing pdf in Ionic

NitinD picture NitinD · Sep 7, 2015 · Viewed 10.6k times · Source
  1. I am using PDFMAKE to create a base64 encoded pdf and I tried to show it with the Iframe by giving the encoded base64 to iframe src. It works on PC but it didn't work on the mobile ( android and ios ).

    1. So, finally I stumbled upon Angularjs-PDF to show the pdf. Now, I am able see the pdf in mobile. But when I try to give custom width and height respective to device it takes. But the problem arises when I use zoom functionality, the page gets zoomed but it goes out of the screen. I can not even slide or swipe to see the content outside of the screen.

I want to make a pdf on the client side and preview to user with zoom functionality in Ionic.

If anybody got any solution for this please share, Thank You.

Answer

Jess Patton picture Jess Patton · Sep 8, 2015

So for our company app we used angular-pdf Viewer:

Here is the template for the pdf viewer template, putting inside a ion-scroll allows for pinch zoom and it works great.

<div ng-show="notLoaded" class=" center bar bar-subheader">
    <h1 class="title">Loading PDF...</h1>
</div>
<div class="tabs tabs-icon-left">
    <a class="tab-item" ng-click="goPrevious()">
        <i class="icon ion-arrow-left-c"></i>
        Prev
    </a>
    <a class="tab-item" ng-click="goNext()">
        <i class="icon ion-arrow-right-c"></i>
        Next
    </a>
</div>

<ion-scroll zooming="true" direction="xy" class="has-header">
    <canvas class="padding" id="pdf" class="rotate0"></canvas>
</ion-scroll>

then on the page that shows the pdf:

<ion-view>
    <div class="bar bar-header bar-positive">
        <button ng-click="$ionicGoBack()" class="button button-clear button-light icon-left ion-chevron-left">Go Back</button>
    </div>
    <div class="has-header">
        <ng-pdf template-url="components/pdfviewer/viewer.html" canvasid="pdf" scale="0.675">
        </ng-pdf>
    </div>
</ion-view>

You feed the template to the pdf viewer and it will show up on the page.

To use it first include the right js files:

<script src="bower_components/pdfjs-dist/build/pdf.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-pdf-viewer/dist/angular-pdf-viewer.min.js"></script>

then inject pdf:

var app = angular.module('App', ['pdf']);

you can read more about it here, but using it in combination with ion-scroll it works just like you think it should on a native device:

https://github.com/winkerVSbecks/angular-pdf-viewer