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

Modify PDF to add buttons using javascript in ionic cordova

本文关键字：PDF 修改 添加 按钮 javascript ionic cordova      更新时间：2023-09-26

我有一个杂志视图应用程序，旨在观看杂志

a magazine是一个现有url的数组，每个url构成杂志的一个页面因此，如果一本杂志有十页，我将有十个不同的pdf。

我想下载第一个(使用Cordova文件传输http://ngcordova.com/docs/plugins/fileTransfer/)，稍后查看它(使用Cordova fileOpener)

我的问题是如何允许用户从pdf应用程序内传递到下一页(因为它将打开单个pdf，它将不显示其他不相关的页面)。

我正在考虑在PDF上添加按钮，但我不知道如何使用js

来解决它

对于我们公司的应用程序，我们使用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;
    }
]);
相关文章：