html - titulo - Cómo mostrar el archivo PDF en la aplicación iónica sin descargar

se ha producido un error al cargar el documento pdf chrome

Question

Cosas que hice:

1. inappbrowser usado
2. documento de google usado
3. webview usado

Así que he intentado todos estos métodos para mostrar el archivo pdf en un dispositivo Android usando iónico. Pero no sirve de nada, puedo ver el botón de descarga en todos estos métodos. ¿Alguien puede decirme cómo puedo mostrar pdf sin opción de descarga para el usuario?

mi código :

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

mi archivo pdf:

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

Mi 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'');



      }

Lo intenté de todas las maneras. Pero no puedo encontrar la solución. Si alguien sabe que será útil. Si algún experto en esto, puedo enviar mi proyecto de demostración como referencia. Gracias por adelantado !

Answer 1

Necesitará usar ng-pdfviewer .

Directiva del visor de PDF AngularJS usando 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>

y en tu código 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;
    };
}]);