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 ).
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.
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
Related
i have a view in templates as
<ion-header-bar class="bar-assertive" title="Home"></ion-header-bar>
<ion-view view-title="Home">
<ion-content class="grey-bg">
<div class="list card">
<a ng-click="click();"> <div class="" > <i class="ion-ios-camera cicon"></i> </div></a>
....</ion-content></ion-view>
and inside the controller i have a function
$scope.click = function(){
$state.go('app.click',{},{reload:true});}
the page navigate properly but the trouble is that when i test it in my browser the contents in the header disappear when i try the back button and it reappears when i refresh that page. Can anyone point out what i am missing here.
Thanks in advance.
I'm trying to zoom my pdf opened with this plugin:
https://github.com/sayanee/angularjs-pdf
how can i active the zoom?
<script id="pdf-viewer.html" type="text/ng-template">
<ion-modal-view>
<ion-header-bar>
<h1 class="title">Report</h1>
<button ng-click="vm.modal.hide()" class="button button-icon icon ion-android-close comp"></button>
</ion-header-bar>
<ion-content>
<ng-pdf ng-if="pdfUrl" template-url="partials/viewer.html" canvasid="pdf" scale="page-fit"></ng-pdf>
</ion-content>
</ion-modal-view>
</script>
viewer:
{{loading}}
<canvas id="pdf" class="rotate0"></canvas>
You can use the ion-scroll component. This enables ionic scrolling and zooming. However, it just draws the content once, so when you zoom everything gets blurry. I fixed this by drawing the content with 200% the size of what it was supposed to be, and then set the default zoom to 0.5. I've provided some example code below:
<ion-scroll max-zoom="5" overflow-scroll="false" zooming="true" direction="xy" style="width: 100%; height:100%;" scrollbar-x=false; scrollbar-y = false;>
<img src="img/floorplan.jpg" width="200%">
</ion-scroll>
Note that you have to set overflow-scroll to false, because else it would use the default ionic scrolling and zooming, which causes the zooming not to work!
Hello I am trying to Customize Ionic Header. Code is shown below:
<ion-header-bar>
<div class="buttons">
</div>
<h1 class="title">{{title}}</h1>
<div class="buttons">
<span class="icons_all store">
<img src="img/assets/location.png">
</span>
</div>
</ion-header-bar>
Problem is when i try to redirect page to new page . Back button for above header which is also called on other pages , doesn't show .
Any help ?
You need to add
<ion-nav-back-button>
</ion-nav-back-button>
As per the document http://ionicframework.com/docs/api/directive/ionNavBackButton/
Since I'm a little weak with Javascript and still learning Angular.
I'm having trouble trying to combine a couple of UI's, not all at once of course.
Let me explain what I'm trying to do.
I have a sidemenu and I want to add a swipe card page when I tap on the swipe page in my menu. See my image below.
Having problem wrapping my head around how Angular does things, so any pointers & tips would be appreciative.
Is this what you are looking for?
http://codepen.io/andrewmcgivery/pen/bqEeI
Basically, to mix the two together, the ion-pane that contains the page of the swipe cards has to be in an ion-view.
<ion-view title="Welcome">
<ion-pane ng-controller="CardsCtrl">
<swipe-cards on-card-swipe="onSwipe($event)">
<swipe-cards>
<swipe-card on-card-swipe="cardSwiped()" id="start-card">
Swipe down for a new card
</swipe-card>
<swipe-card ng-repeat="card in cards" on-destroy="cardDestroyed($index)" on-card-swipe="cardSwiped($index)">
<div ng-controller="CardCtrl">
<div class="title">
{{card.title}}
</div>
<div class="image">
<img ng-src="{{card.image}}">
</div>
<div class="button-bar">
<button class="button button-clear button-positive" ng-click="goAway()">Answer</button>
<button class="button button-clear button-positive" ng-click="goAway()">Decline</button>
</div>
</div>
</swipe-card>
</swipe-cards>
</ion-pane>
I use ionic pet template.
I have a question about pet-detail page, if I would like to have a dynamic title on header, it will not show anything until I reload the page (using web browser), but I think it doesn't make sense since I would like to make an app.
Does I miss anything? what can I do?
here is my code as below:
<ion-nav-bar class="bar-positive">
<div class="buttons" ng-controller="BackCtrl">
<a class="button button-icon icon ion-chevron-left" ng-click="$back()"></a>
</div>
<h1 class="title"> {{ current_pet.name }} </h1>
..
If you happen to be using ion-view, use this:
<ion-nav-title>
{{ PageTitle }}
</ion-nav-title>
And put it outside your ion-content.
In my app I've used this:
<ion-view title="{{Properties.Title}}">
Where Properties is a object on my scope(I have sort of a master controller) where I "override" on each "inner controller".
If you are using and you want to show a button in the header bar only when an input/textarea is filled (not empty), then you can do the following.
<ion-header-bar class="bar-light">
<h1 class="title">{{$root.Title}}</h1>
<div class="buttons">
<button class="button button-clear icon ion-checkmark-round" ng-click="" ng-if="$root.Title"></button>
</div>
</ion-header-bar>
and inside "ion-content" -
<div class="row>
<textarea placeholder="" rows="3" maxlength="100" ng-model="$root.Title" ng-trim="false"></textarea>
</div>
Otherwise just using ng-if="Title" in the header bar will not work.