修改PDF以在ionic cordova中使用javascript添加按钮

Question

我有一个杂志查看应用程序，用于观看杂志

杂志是现有网址的数组，每个网址构成杂志的一页所以如果一本杂志有十页，我将有十个不同的 pdf。

我想下载第一个（使用 Cordova 文件传输 http://ngcordova.com/docs/plugins/fileTransfer/）并稍后查看（使用 cordova fileOpener）

我的问题是如何允许用户从 pdf 应用程序转到下一页（因为它将打开一个单独的 pdf，它不会显示其他不相关的页面）。

我想在 pdf 上添加按钮，但我不知道如何使用 js 解决它

Answer 1

对于我们公司的应用，我们使用 angular-pdf-viewer

它非常简单易用，它可以让您轻松添加按钮并将它们连接到指令功能。如果需要，它甚至可以显示页码和旋转页面。

在你的index.html文件中包含js后注入模块

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

然后将该指令放到您的页面上。您还可以为杂志阵列设置两种方式的数据绑定。

<pdf-viewer
    delegate-handle="my-pdf-container"
    url="pdfUrl"
    scale="1"
    show-toolbar="true"
    headers="{ 'x-you-know-whats-awesome': 'EVERYTHING' }"></pdf-viewer>

这是您可以使用的方法列表（您也可以通过使用不同的句柄来拥有多个 pdf 查看器

pdfDelegate.$getByHandle('my-pdf-container').zoomIn();
•prev
•next
•zoomIn(amount) default amount = 0.2
•zoomOut(amount) default amount = 0.2
•zoomTo(amount)
•rotate (clockwise by 90 degrees)
•getPageCount
•getCurrentPage
•goToPage(pageNumber)
•load

要更改加载的 pdf，您可以使用两种方式的数据绑定更改 pdfUrl，也可以使用 pdf 委托句柄：

pdfDelegate
    .$getByHandle('my-pdf-container')
    .load('url-of-the-new-file.pdf');

编辑：抱歉，我给了你许多 pdf 模块中的一个，这实际上是我们使用的一个，如果你需要不同的查看器（不止一个），另一个可能更好，这是我们使用的：https://github.com/sayanee/angularjs-pdf

这是页面上的 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>

然后我们有一个 viewer.html 模板

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

这是他们演示中的控制器代码：

   angular.module('testApp', ['pdf']).controller('AppCtrl', [
    '$scope',
    'pdfDelegate',
    function ($scope, pdfDelegate, $log) {
        $scope.relativity = 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/149125/relativity.pdf';
        $scope.material = 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/149125/material-design-2.pdf';
        $scope.pdfUrl = $scope.material;
    }
]);

修改PDF以在ionic cordova中使用javascript添加按钮

Modify PDF to add buttons using javascript in ionic cordova

javascript

cordova

ionic-framework

jspdf