在 Ionic 中创建和显示 pdf [英] Creating and showing pdf in Ionic

问题描述

1. 我正在使用 PDFMAKE 创建一个 base64 编码的 pdf，我试图通过给将 base64 编码为 iframe src.它适用于 PC，但不适用于移动设备(android 和 ios).

   2. 所以，最后我偶然发现了 Angularjs-PDF 来显示 pdf.现在，我可以在手机上看到 pdf 了.但是当我尝试为设备提供自定义宽度和高度时，它需要.但是当我使用缩放功能时出现了问题，页面被缩放但它走出了屏幕.我什至无法滑动或滑动来查看屏幕外的内容.

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

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

解决方案

所以对于我们公司的应用程序，我们使用了 angular-pdf Viewer:

这是pdf查看器模板的模板，放入离子滚动允许捏缩放，效果很好.

<h1 class="title">正在加载 PDF...</h1>
<div class="tabs tabs-icon-left"><a class="tab-item" ng-click="goPrevious()"><i class="icon ion-arrow-left-c"></i>上一页</a><a class="tab-item" ng-click="goNext()"><i class="icon ion-arrow-right-c"></i>下一个</a>

<ion-scroll zooming="true" direction="xy" class="has-header"><canvas class="padding" id="pdf" class="rotate0"></canvas></ion-scroll>

然后在显示 pdf 的页面上:

<div class="bar bar-header bar-positive"><button ng-click="$ionicGoBack()" class="button button-clear button-light icon-left ion-chevron-left">返回</button>

<div class="has-header"><ng-pdf template-url="components/pdfviewer/viewer.html" canvasid="pdf" scale="0.675"></ng-pdf>

</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

1. 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 ).

   2. 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.

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.

解决方案

So for our company app we used angular-pdf Viewer:

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>

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>

You feed the template to the pdf viewer and it will show up on the page.

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>

then inject 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屋！