Tạo và hiển thị pdf trong Ionic

Question

1. Tôi đang sử dụng PDFMAKE để tạo pdf được mã hóa base64 và tôi đã cố hiển thị nó bằng Khung nội tuyến bằng cách cung cấp base64 được mã hóa cho iframe src. Nó hoạt động trên PC nhưng nó không hoạt động trên thiết bị di động (android và ios).

   2. Vì vậy, cuối cùng tôi tình cờ gặp Angularjs-PDF để hiển thị bản pdf. Bây giờ, tôi có thể thấy pdf trong điện thoại di động. Nhưng khi tôi cố gắng cung cấp chiều rộng và chiều cao tùy chỉnh tương ứng với thiết bị cần. Nhưng vấn đề phát sinh khi tôi sử dụng chức năng phóng to, trang được thu phóng nhưng nó sẽ biến mất khỏi màn hình. Tôi thậm chí không thể trượt hoặc vuốt để xem nội dung bên ngoài màn hình.

Tôi muốn thực hiện một pdf về phía khách hàng và xem trước để sử dụng với chức năng zoom trong Ionic.

Nếu có ai có bất kỳ giải pháp nào cho việc này, vui lòng chia sẻ, Cảm ơn bạn.

Answer 1

Vì vậy, đối với ứng dụng công ty chúng tôi, chúng tôi sử dụng góc-pdf Viewer:

Dưới đây là các mẫu cho mẫu xem pdf, đặt bên trong một ion cuộn phép cho nhúm zoom và nó hoạt động tuyệt vời.

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

sau đó trên trang đó cho thấy 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> 

Bạn nuôi mẫu để người xem pdf và nó sẽ hiển thị trên trang.

Để sử dụng đầu tiên nó bao gồm các tập tin js phải:

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

sau đó tiêm pdf:

var app = angular.module('App', ['pdf']); 

bạn có thể đọc thêm về nó ở đây, nhưng sử dụng nó kết hợp với ion di chuyển nó hoạt động giống như bạn cho rằng thiết bị phải có trên thiết bị gốc:

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