Angularjs 在Ionic中创建和显示pdf
我正在使用创建base64编码的pdf,并尝试通过将编码的base64提供给Iframe src来使用Iframe显示它。它可以在PC上运行,但在移动设备(android和ios)上无法运行Angularjs 在Ionic中创建和显示pdf,angularjs,ionic-framework,ionic,pdfjs,Angularjs,Ionic Framework,Ionic,Pdfjs,我正在使用创建base64编码的pdf,并尝试通过将编码的base64提供给Iframe src来使用Iframe显示它。它可以在PC上运行,但在移动设备(android和ios)上无法运行 所以,最后我无意中展示了pdf。现在,我可以在手机上看到pdf。但当我尝试为设备提供各自的自定义宽度和高度时。但是当我使用缩放功能时,问题就出现了,页面被缩放了,但它会离开屏幕。我甚至不能滑动或滑动以查看屏幕外的内容 我想在客户端制作一个pdf,并在Ionic中使用缩放功能预览给用户 如果有人对此有任何解
如果有人对此有任何解决方案,请分享,谢谢。因此,对于我们公司的应用程序,我们使用了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>
您可以在此处了解更多信息,但将其与ion scroll结合使用,它的工作原理与您认为的本机设备上的工作原理一样:
谢谢您的回复。我将测试它并返回给您。如何为该指令提供pdf url。使用pdfDelegate还是只提供url?我们只是提供了一个url,如果您希望在同一页面上有多个pdf,那么pdfDelegate将非常有用,这样您就可以确定您实际使用的是哪一个pdf,而不是因为您没有提到它而链接的winkerVSbecks,您必须在
ion scroll
标记中将属性overflow scroll
设置为false
,否则可能会导致一些问题。
<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>
<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>
var app = angular.module('App', ['pdf']);