在Ionic中创建和显示pdf

问题描述：

我正在使用PDFMAKE创建base64编码的pdf，我试图通过给iframe src编码base64来显示iframe。它可以在个人电脑上运行，但它在手机（android和ios）上无法使用。在Ionic中创建和显示pdf
1. 所以，最后我偶然发现了Angularjs-PDF来显示pdf。现在，我可以在手机上看到pdf。但是，当我尝试给自定义的宽度和高度相应的设备，它需要。但是，当我使用缩放功能时，问题就出现了，页面变得放大，但它不在屏幕上。我甚至无法滑动或滑动以查看屏幕外的内容。

我想要在客户端和预览用户与离子缩放功能的PDF文件。

如果有人有任何解决方案，请分享，谢谢。

答

所以对于我们公司的应用程序，我们使用的角度，PDF浏览器：

下面是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']);

你可以阅读更多关于它在这里，但使用它结合离子滚动它就像您认为它应该在本地设备上一样：

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

T hanks的答复。我会测试它并回复你。 – NitinD

如何为此指令提供pdf网址。与pdfDelegate或只提供网址？ – NitinD

我们只是提供了一个url，如果您想在同一页面上使用多个pdf，那么pdfDelegate会很有用，因此您可以确定哪一个是 –

在Ionic中创建和显示pdf

相关推荐