如何在离线应用程序中显示PDF文件，无需下载 [英] how to show pdf file in ionic app with out download

问题描述

我做过的事情：

1. 用于inappbrowser


2. 使用google doc


3. 使用webview

所以我尝试了所有这些方法来显示Android设备中使用离子的PDF文件。但没有用，我可以在所有这些方法中看到下载按钮。任何人都可以告诉我如何在没有用户下载选项的情况下显示pdf。

我的代码：

 < div class =col col-50 clsGridng-click =showFile（'http://www.orimi.com/pdf-test.pdf'）> 
< / div> 
  

我的pdf档案：

http://www.orimi.com/pdf-test.pdf strong>

我的JS：

  $ scope.showModal = function（templateUrl）{
 $ ionicModal.fromTemplateUrl（templateUrl，{
 scope：$ scope，
 animation：'slide-in-up'
} ）.then（function（modal）{
 $ ionicLoading.show（{
 duration：1000 
}）; 
 $ scope.modal = modal; 
 $ scope .modal.show（）; 
}）; 
} 
 
 //关闭模式
 $ scope.closeModal = function（）{
 $ scope.modal.hide（）; 
 $ scope.modal.remove（）
}; 
 
 $ scope.showFile = function（FileUrl）{
 var file = FileUrl; 
 console.log（file）; 
 // var openurl = cordova.InAppBrowser.open（file，'_blank'）; 
 // var openurl = cordova.InAppBrowser.open（file，'_ blank'，'location = yes'）; 
 
 // var openurl = cordova.InAppBrowser.open（https://docs.google.com/viewer?url=+ file，'_blank'）; 
 
 // var openurl = cordova.InAppBrowser.open（'https://docs.google.com/viewer?url=http://www.orimi.com/pdf-test.pdf& embedded = true'，'_blank'）; 
 
 //window.open((\"https://docs.google.com/viewer?url=http://www.orimi.com/pdf-test.pdf&embedded=true， '_空白'）; 
 
 
 var openurl = cordova.InAppBrowser.open（'https://docs.google.com/viewer?url=http://www.orimi.com/pdf-test。 pdf& embedded = true& toolbar = 0& navpanes = 0& scrollbar = 0'，'_blank'）; 
 
 
 
} 
  

我尝试了所有方法。但无法找到解决方案。如果任何人知道这将是有用的。如果任何专家在这，我可以发送我的演示项目作为参考。
在此先感谢！

解决方案

您需要使用 ng-pdfviewer 。

使用pdf.js的AngularJS PDF查看器指令。

 <按钮NG-点击= prevPage（） >&安培; LT;< /按钮> 
< button ng-click =nextPage（）>& gt;< / button> 
< br> 
< span> {{currentPage}} / {{totalPages}}< / span> 
< br> 
< pdfviewer src =test.pdfon-page-load ='pageLoaded（page，total）'id =viewer>< / pdfviewer> 
  

以及您的AngularJS代码：

  var app = angular.module（'testApp'，['ngPDFViewer']）; 
 $ b app.controller（'TestCtrl'，['$ scope'，'PDFViewerService'，function（$ scope，pdf）{
 $ scope.viewer = pdf.Instance（viewer ）; 
 
 $ scope.nextPage = function（）{
 $ scope.viewer.nextPage（）; 
}; 
 
 $ scope.prevPage = function（）{
 $ scope.viewer.prevPage（）; 
}; 
 
 $ scope.pageLoaded = function（curPage，totalPages）{
 $ scope .currentPage = curPage; 
 $ scope.totalPages = totalPages; 
}; 
}]）; 
  

Things i did :

1. used inappbrowser
2. used google doc
3. used webview

so i have tried all these methods to show the pdf file in android device using ionic. But no use, i can see the download button in all these methods. Can any one tell me how can i display pdf without download option for user.

my code :

 <div  class="col col-50 clsGrid" ng-click="showFile('http://www.orimi.com/pdf-test.pdf')">
</div>

my pdf file :

http://www.orimi.com/pdf-test.pdf

My JS :

$scope.showModal = function(templateUrl) {
        $ionicModal.fromTemplateUrl(templateUrl, {
            scope: $scope,
            animation: 'slide-in-up'
        }).then(function(modal) {
            $ionicLoading.show({
            duration: 1000
});
            $scope.modal = modal;
            $scope.modal.show();
        });
    }

    // Close the modal
    $scope.closeModal = function() {
        $scope.modal.hide();
        $scope.modal.remove()
    };

    $scope.showFile = function(FileUrl) {
        var file = FileUrl;
        console.log(file);
        //var openurl = cordova.InAppBrowser.open(file, '_blank');
      //  var openurl = cordova.InAppBrowser.open(file,'_blank', 'location=yes');

          // var openurl = cordova.InAppBrowser.open("https://docs.google.com/viewer?url=" + file, '_blank');

    // var openurl = cordova.InAppBrowser.open('https://docs.google.com/viewer?url=http://www.orimi.com/pdf-test.pdf&embedded=true', '_blank');

          //window.open("https://docs.google.com/viewer?url=http://www.orimi.com/pdf-test.pdf&embedded=true",'_blank');


    var openurl = cordova.InAppBrowser.open('https://docs.google.com/viewer?url=http://www.orimi.com/pdf-test.pdf&embedded=true&toolbar=0&navpanes=0&scrollbar=0', '_blank');



      }

I tried all ways. But not able to find the solution.If any one know it will be usefull.If any expert in this, i can send my demo project for reference . Thanks in advance !

解决方案

You will need to use ng-pdfviewer.

AngularJS PDF viewer directive using pdf.js.

<button ng-click="prevPage()">&lt;</button>
<button ng-click="nextPage()">&gt;</button>
<br>
<span>{{currentPage}}/{{totalPages}}</span>
<br>
<pdfviewer src="test.pdf" on-page-load='pageLoaded(page,total)' id="viewer"></pdfviewer>

and in your AngularJS code:

var app = angular.module('testApp', [ 'ngPDFViewer' ]);

app.controller('TestCtrl', [ '$scope', 'PDFViewerService', function($scope, pdf) {
    $scope.viewer = pdf.Instance("viewer");

    $scope.nextPage = function() {
        $scope.viewer.nextPage();
    };

    $scope.prevPage = function() {
        $scope.viewer.prevPage();
    };

    $scope.pageLoaded = function(curPage, totalPages) {
        $scope.currentPage = curPage;
        $scope.totalPages = totalPages;
    };
}]);

这篇关于如何在离线应用程序中显示PDF文件，无需下载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！