在 Ionic 中创建和显示 pdf

Question

我正在使用 PDFMAKE 创建一个 base64 编码的 pdf，我试图通过将编码的 base64 提供给 iframe src 来用 Iframe 显示它。它适用于 PC，但不适用于移动设备（android 和 ios）。
1. 所以，最后我偶然发现 Angularjs-PDF 来显示 pdf。现在，我可以在手机上看到 pdf。但是当我尝试为它需要的设备提供自定义宽度和高度时。但是当我使用缩放功能时，问题就出现了，页面被缩放但它超出了屏幕。我什至无法滑动或滑动来查看屏幕外的内容。

我想在客户端制作一个 pdf 并在 Ionic 中使用缩放功能向用户预览。

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

Answer 1

所以对于我们公司的应用程序，我们使用了 angular-pdf 查看器：

这是 pdf 查看器模板的模板，将 ion-scroll 放入其中可以进行缩放，效果很好。

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

您可以在此处阅读更多相关信息，但将它与 ion-scroll 结合使用，就像您认为在本机设备上一样：

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

在 Ionic 中创建和显示 pdf

Creating and showing pdf in Ionic

angularjs

pdf.js

ionic-framework

ionic