在Ionic中创建和显示pdf [英] Creating and showing pdf in Ionic
问题描述
-
我正在使用 PDFMAKE 创建base64编码的pdf,我试图展示通过将编码的base64提供给iframe src,它与iframe一起使用。它适用于PC,但它不适用于手机(android和ios)。
I am using PDFMAKE to create a base64 encoded pdf and I tried to show it with the Iframe by giving the encoded base64 to iframe src. It works on PC but it didn't work on the mobile ( android and ios ).
- 所以,最后我偶然发现 Angularjs-PDF 来显示pdf。现在,我可以在移动设备上看到pdf。但是,当我尝试为设备提供相应的自定义宽度和高度时。但是当我使用缩放功能时,问题就出现了,页面会变焦但是它会离开屏幕。我甚至无法滑动或滑动以查看屏幕外的内容。
- So, finally I stumbled upon Angularjs-PDF to show the pdf. Now, I am able see the pdf in mobile. But when I try to give custom width and height respective to device it takes. But the problem arises when I use zoom functionality, the page gets zoomed but it goes out of the screen. I can not even slide or swipe to see the content outside of the screen.
我想在客户端制作一个pdf,并在Ionic中使用缩放功能预览用户。
I want to make a pdf on the client side and preview to user with zoom functionality in Ionic.
如果有人得到任何解决方案,请分享,谢谢。
If anybody got any solution for this please share, Thank You.
推荐答案
因此,对于我们公司的应用程序,我们使用angular-pdf Viewer:
So for our company app we used angular-pdf Viewer:
这是pdf查看器模板的模板,放入离子滚动内部可以进行捏缩放,效果很好。
Here is the template for the pdf viewer template, putting inside a ion-scroll allows for pinch zoom and it works great.
<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的页面上:
then on the page that shows the 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查看器,它将显示在页面上。
You feed the template to the pdf viewer and it will show up on the page.
首先使用它包括正确的js文件:
To use it first include the right js files:
<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']);
你可以在这里阅读更多相关信息,但是将它与离子滚动结合使用它就像你认为它应该在原生设备上:
you can read more about it here, but using it in combination with ion-scroll it works just like you think it should on a native device:
https:// github.com/winkerVSbecks/angular-pdf-viewer
这篇关于在Ionic中创建和显示pdf的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!