Создание и показ PDF в Ionic

Question

1. Я использую PDFMAKE для создания PDF- файла в кодировке base64, и я попытался показать его с помощью Iframe, передав кодированный base64 для iframe src. Он работает на ПК, но не работает на мобильном телефоне (Android и IOS).

   2. Итак, наконец я наткнулся на Angularjs-PDF, чтобы показать PDF. Теперь я могу увидеть PDF в мобильном телефоне. Но когда я пытаюсь дать пользовательские ширину и высоту, соответствующие устройству, это занимает. Но проблема возникает, когда я использую функцию масштабирования, страница масштабируется, но выходит за пределы экрана. Я не могу даже скользить или проведите пальцем, чтобы увидеть содержимое за пределами экрана.

Я хочу сделать PDF на стороне клиента и просмотреть для пользователя с функцией масштабирования в Ionic.

Если у кого-нибудь есть решение для этого, пожалуйста, поделитесь, спасибо.

Answer 1

Так что для приложения нашей компании мы использовали Angular-PDF Viewer:

Вот шаблон для шаблона просмотра PDF, размещение внутри ионной прокрутки позволяет масштабировать пинч, и это прекрасно работает.

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

затем на странице, которая показывает 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>

Вы передаете шаблон для просмотра PDF, и он будет отображаться на странице.

Чтобы использовать его сначала включите правильные файлы 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>

затем введите pdf:

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

Вы можете прочитать больше об этом здесь, но используя его в сочетании с ion-scroll, он работает так же, как вы думаете, что это должно быть на родном устройстве:

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