Angular插件：PDF在线浏览

使用情况：

本来设计的时候，是想要要用户自己下载PDF在本地查看的，实际使用的时候，IOS用户在下载查看这方面会遇到无法下载的问题。所以把下载查看改为在线浏览。

优点：PDF的库文件只有在使用这个directive的时候才会请求文件。

插件的原文地址：https://github.com/sayanee/angularjs-pdf

插件文件下载地址：angular-pdf-ios.rar

使用方法：

1. ./index.html
   引用库文件，其中pdf.worker.js虽然没有引用，但是pdf.js使用的时候会自动调用pdf.worker.js
   后续补充，IOS9以上的系统上述的方法还是无法加载PDF，需要加上一个兼容适应的JS之后才能使用

   <script src="lib/compatibility.js"></script>
   <script src="lib/pdf.js"></script>
   <script src="lib/angular-pdf.min.js"></script>

2. ./js/app.js
   在app.js中加入pdf模块

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

3. ./js/controller.js
   在控制器中加入pdf加载时候的提示

   angular.module('app.controllers', []).controller('PDFCtrl', function($scope, $stateParams) {
     $scope.pdfName = 'Relativity: The Special and General Theory by Albert Einstein';
     $scope.pdfUrl = $stateParams.url;
     $scope.scroll = 0;
     $scope.dataHasLoad = '0%';
     $scope.dataTotal = 0;
     $scope.loading = '加載中。。。';
     $scope.getNavStyle = function(scroll) {
     if (scroll > 100) return 'pdf-controls fixed';
       else return 'pdf-controls';
     }
     $scope.onError = function(error) {
       console.log(error);
     }
     $scope.onLoad = function() {
       $scope.loading = '';
     }
     //加载的时候，会根据加载进度，显示响应的百分比
     $scope.onProgress = function(progressData) {
       $scope.dataHasLoad = Math.ceil((parseInt(progressData.loaded))/(parseInt(progressData.total))) + '%';
     };
   });

4. ./templates/pdf.html

   <ion-view view-title="PDF Viewer">
     <ion-content scroll="true" overflow-scroll="true">
       <ng-pdf template-url="pdf-viewer.html" canvasid="pdf-canvas" scale="page-fit" page=1></ng-pdf>
     </ion-content>
   </ion-view>
   <!-- PDF模板文件 -->
   <script type="text/ng-template" id="pdf-viewer.html">
     <nav ng-class="getNavStyle(scroll)" class="margin-before-block">
       <button class="maga-download" ng-click="goPrevious()"><span>上頁</span></button>
       <button class="maga-download" ng-click="goNext()"><span>下頁</span></button>
       <button class="maga-download" ng-click="zoomIn()"><span>放大</span></button>
       <button class="maga-download" ng-click="fit()"><span>100%</span></button>
       <button class="maga-download" ng-click="zoomOut()"><span>縮小</span></button>
     </nav>
     <hr>
     <span ng-show="loading != '' ">{ {loading}} { {dataHasLoad}}</span>
     <div class="pdf-panel">
       <canvas id="pdf-canvas" class="rotate0"></canvas>
     </div>
   </script>

后续补充，IOS9以上的系统上述的方法还是无法加载PDF，需要加上一个兼容适应的JS之后才能使用，文件都打包在同个文件夹了。