如何在没有下载的情况下在离子应用程序中显示pdf文件

问题描述

我做过的事情:

1. 在应用浏览器中使用
2. 使用过谷歌文档
3. 使用过的网页视图

所以我尝试了所有这些方法来使用ionic在android设备中显示pdf文件.但是没有用，我可以在所有这些方法中看到下载按钮.谁能告诉我如何在没有用户下载选项的情况下显示pdf.

我的代码:

我的pdf文件:

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

我的JS:

$scope.showModal = function(templateUrl) {$ionicModal.fromTemplateUrl(templateUrl, {范围:$范围，动画:向上滑动"}).then(函数(模态){$ionicLoading.show({持续时间:1000});$scope.modal = 模态；$scope.modal.show();});}//关闭模态$scope.closeModal = function() {$scope.modal.hide();$scope.modal.remove()};$scope.showFile = function(FileUrl) {var 文件 = FileUrl;控制台日志(文件)；//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');}

我尝试了所有方法.但是找不到解决方案.如果有人知道它会很有用.如果有这方面的专家，我可以发送我的演示项目以供参考.提前致谢！

解决方案

您将需要使用 ng-pdfviewer.

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

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

在你的 AngularJS 代码中:

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

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文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！