angularjs – 在Ionic中创建和显示pdf

发布时间：2020-12-17 06:51:07 所属栏目：安全来源：网络整理

导读：我使用 PDFMAKE创建base64编码的pdf,我试图通过将编码的base64提供给iframe src来显示它.它适用于PC,但它不适用于移动设备(android和ios). 所以,最后我偶然发现了Angularjs-PDF以显示pdf.现在,我可以在移动设备上看到pdf.但是,当我尝试为设备提供相应的自定

>我使用 PDFMAKE创建base64编码的pdf,我试图通过将编码的base64提供给iframe src来显示它.它适用于PC,但它不适用于移动设备(android和ios).

>所以,最后我偶然发现了Angularjs-PDF以显示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>

然后在显示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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!