Creazione e mostrando pdf in ionico

Question

1. Sto usando PDFMAKE per creare un base64 codificato pdf ed ho cercato di mostrare con l'Iframe dando al Base64 codificato iframe src. Funziona su PC ma non ha funzionato sul cellulare (Android e iOS).

   2. Così, finalmente sono incappato su Angularjs-PDF per mostrare il pdf. Ora, sono in grado di vedere il pdf in mobile. Ma quando provo a dare larghezza e altezza personalizzate rispettive al dispositivo che richiede. Ma il problema sorge quando utilizzo la funzionalità di zoom, la pagina si ingrandisce ma esce dallo schermo. Non riesco nemmeno a far scorrere o scorrere per vedere il contenuto al di fuori dello schermo.

Voglio fare un PDF sul lato client e di anteprima per utenti con funzionalità di zoom in ionico.

Se qualcuno ha qualche soluzione per questo per favore condividi, grazie.

Answer 1

Quindi per la nostra azienda app abbiamo usato angolare-PDF Viewer:

Ecco il modello per il modello pdf viewer, mettendo all'interno di uno ione-scroll permette di pinch zoom e funziona benissimo.

<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> 

quindi nella pagina che mostra il 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> 

Le nutri il modello per il visualizzatore di PDF e verrà visualizzato sulla pagina.

Per usarlo prima includere il diritto file js:

<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> 

poi iniettare pdf:

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

si può leggere di più qui, ma il suo utilizzo in combinazione con l'ione-Scroll è funziona proprio come si pensa che dovrebbe su un dispositivo nativo:

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