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

标签 html angularjs pdf ionic-framework hybrid-mobile-app

我做过的事情:

  1. 在应用浏览器中使用
  2. 使用谷歌文档
  3. 使用过 WebView

所以我已经尝试了所有这些方法来使用 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');



      }

我尝试了所有方法。但找不到解决方案。如果有人知道它会有用。如果有这方面的专家,我可以发送我的演示项目以供引用。 提前致谢!

最佳答案

您将需要使用 ng-pdfviewer .

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

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

关于html - 如何在没有下载的情况下在 ionic 应用程序中显示 pdf 文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43496455/

相关文章:

html - 侧边栏被页脚截断

jquery - CSS 缩放以适合高度和宽度(拉伸(stretch))

java - 使用 iText 将 TXT 文件转换为 PDF(保留格式)

javascript - $location.path 获取之前的路径

angularjs - 递归 AngularJS 过滤器

pdf - 如何在 PDF 表单上保存填写的字段?

php - 无法在 Laravel 中生成收银员 PDF

html - css 媒体横向和纵向

html - 在显示表格布局中更改 Bootstrap 字形中断对齐中的字体大小

javascript - 在 select 元素内嵌套 ng-repeats 和 ng-ifs