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

Posted 2023-03-05

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

【英文标题】：how to show pdf file in ionic app with out download

【发布时间】：2017-09-15 17:25:28

【问题描述】：

我做过的事情：

在应用浏览器中使用 使用谷歌文档 使用的网页视图

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

我的代码：

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

我的 pdf 文件：

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

我的 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');



      

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

【问题讨论】：

应用浏览器问题发生了什么

@KumarRakesh 我的 pdf 未在 webview 中显示。但如果我在浏览器、chrome 中打开，默认 pdf 查看它的打开方式。但我不想要下载按钮。表示我的 pdf 是供用户查看的，不是供用户下载的

好的...您应该在 GOOGLE DOCS 视图中打开此文件。用户可以在哪里下载。

是的，我也试过了。但也在谷歌文档中。下载选项可用。

我试过这个代码// var openurl = cordova.InAppBrowser.open('https://docs.google.com/viewer?url=http://www.orimi.com/pdf-test.pdf&embedded=true', '_blank');，但在右上角我可以看到pop out按钮下载pdf

【参考方案1】：

您需要使用ng-pdfviewer。

AngularJS PDF 查看器指令使用 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>

在你的 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;
    ;
]);