如何在 ionic 应用程序中显示 pdf 文件而无需下载

2024-05-07

我所做的事情:

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

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



      }

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


您将需要使用ng-pdfviewer https://github.com/akrennmair/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;
    };
}]);
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在 ionic 应用程序中显示 pdf 文件而无需下载 的相关文章

随机推荐

  • 如何计算分数?

    这个问题比任何编程语言都更与逻辑相关 如果问题不适合论坛 请告诉我 我将删除它 我必须编写一个逻辑来计算博客奖网站的博客分数 一个博客可能会获得多个奖项类别的提名 并由评审团以 1 到 5 的等级进行同行评审或评级 1 表示他们完全不喜欢博
  • 在 Oracle BI Publisher 中将数字转换为单词

    我有一个要求 我需要将发票总金额显示为 rtf 中的文字 我尝试过 but it doesn t show any thing Is there any RTF Tag to do such a requirement on layout
  • rspec 不适用于设计用户身份验证

    我正在尝试使用 RSpec 来测试我的 Rails 应用程序 该应用程序使用设计用户身份验证 gem 以下是已捆绑的相关 gem 的列表 devise 3 4 1 rails 4 1 7 4 1 6 rspec 3 1 0 rspec co
  • 使用 Spring Security 滑动过期

    我正在使用 Spring Security 我注意到 当用户登录时 身份验证 cookie 的有效期约为一天 它似乎并没有 刷新 这个过期日期 cookie 在一天后过期 即使在当天结束前 5 分钟我已经通过安全 URL 向服务器发出了请求
  • 使用 textbox_keypress 过滤绑定源或绑定列表

    我使用 winforms 和 c 如何过滤绑定源或绑定列表 带有文本框文本 我的意思是 当我在文本框中输入时 我的网格正在使用 Like 方法而不是 equal 方法进行过滤 thanks 我使用委托来解决这个问题 一些代码如下所示 Lis
  • 在单独的线程上显示 WPF-“NotifyIcon”

    我目前正在开发一个 Office 加载项 我需要显示一个显示进度的通知对话框 我正在使用Philipp Sumi 的 wpf notifyicon http www codeproject com Articles 36468 WPF No
  • 给出 HTML 和 Xpath 时突出显示

    给定 HTML 作为字符串 Xpath 和偏移量 我需要强调这个词 在下面的例子中我需要强调Child 1 HTML 文本 h2 Children h2 Joe has three kids br ul li a href Child 1
  • 如何判断一个具有很多属性的对象(自身)是否发生了改变?

    问题的简短版本 我有一个带有大量声明属性的类 我想跟踪它是否有任何更改 以便当我调用save方法 当不需要时它不会写入数据库 我如何更新isDirty财产无需为所有声明的属性编写自定义设置器 问题的较长版本 假设我有一堂这样的课 inter
  • 在 MATLAB 中用两个值替换向量值

    我必须创建一个以向量作为输入的函数v和三个标量a b and c 该函数替换了的每个元素v等于a有一个二元素数组 b c 例如 给定v 1 2 3 4 and a 2 b 5 c 5 输出将是 out 1 5 5 3 4 我的第一次尝试是尝
  • 将实体添加到核心数据

    我们有一个使用核心数据的应用程序 在下一个版本中 我想向现有实体添加一个新实体 只需添加新的然后从软件中填充它就可以了吗 还是有什么我必须考虑的事情 迁移有几种类型 最简单的是使用推断映射模型的轻量级迁移 这意味着您只需告诉它进行迁移 软件
  • Linq 中不区分大小写的“包含”

    我有一个 mvc 项目 我在其中使用 linq 在我的数据库中有一些记录 例如 Someth ing SOmeTH ing someTh ing SOMETH ING someTH ING 我想做这个 SELECT FROM dbo doc
  • 需要中继器帮助

    这是我的复读机
  • org.apache.http.entity.FileEntity 在 Android 6 (Marshmallow) 中已弃用

    我正在将应用程序升级到 API 23 其中org apache http已弃用 我当前 已弃用 的代码如下所示 HttpClient httpClient new DefaultHttpClient File file new File a
  • 在批处理模式下运行 R - 打印到屏幕?

    跑步时 R CMD BATCH options filename r 我想控制输出的打印位置 我可以使用以下命令抑制 Rout 文件的创建 R CMD BATCH options filename r dev null 但是否可以将输出直接
  • 回形针回调还是简单的处理器?

    我想运行回调after post process但它似乎无法在使用 Paperclip 2 3 8 的 Rails 3 0 1 中工作 它给出了一个错误 undefined method post process callbacks for
  • 如何解决 Xcode 布局问题?

    我正在为 iPhone 设计布局 因此我为其选择了 wCompact 和 hAny 尺寸类别 我修复了约束 并且在运行时没有问题 但每次我关闭 Xcode 重新打开项目时 都会出现多个约束问题 如图所示 我解决了根据约束更新框架的问题 选择
  • 宏和后置增量

    这是一些更奇怪的宏观行为 我希望有人能够阐明 define MAX a b a gt b a b void main void int a 3 b 4 printf d d d n a b MAX a b 输出为 4 6 5 b 的值增加两
  • 为什么 jQuery 在其构造函数实现中要这样做?

    如果我们查看最新的 jQuery 源代码http code jquery com jquery latest js http code jquery com jquery latest js我们看到以下内容 var jQuery funct
  • RXJS Observable - 如何从 Observable 的构造函数外部调用 next

    我正在构建一个公开 Observable 的服务 在此服务中 我接收外部函数调用 这些函数调用应该触发 Observable 上的下一个调用 以便各个消费者获得订阅事件 在观察者构造函数期间 我可以调用 next 并且一切正常 但是如何在构
  • 如何在 ionic 应用程序中显示 pdf 文件而无需下载

    我所做的事情 在应用程序浏览器中使用 使用谷歌文档 使用的网页视图 所以我尝试了所有这些方法来使用 ionic 在 Android 设备中显示 pdf 文件 但没有用 我可以在所有这些方法中看到下载按钮 谁能告诉我如何在没有用户下载选项的情