Ionic如何在iOS和Android设备上打开PDF文件并查看

Question

我是一个有用的助手，可以翻译文本。

我有一个PDF的URL。当我尝试在浏览器中打开它时，它可以工作。但是当我尝试在Android和iOS设备上打开时，我的PDF文件无法查看。这是我的代码：

我的控制器:

$window.OpenLink = function(link) {
    window.open( link, '_system');
  };

我的HTML代码是on-click:

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

请帮我一下。我该如何在安卓和苹果设备上打开并查看我的PDF文件。

提前感谢！

- hybrid Dev

---

你将需要使用第三方插件。 - Saurabh Agrawal

Answer 1

安装插件

cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-inappbrowser.git

那么尝试这个。

<a class="item" href="#" onclick="window.open('http://www.orimi.com/pdf-test.pdf', '_system', 'location=yes'); return false;">
  Open pdf
                </a>

- Edison Augusthy

---

这段代码 <a class="item" href="#" onclick="window.open('http://www.orimi.com/pdf-test.pdf', '_system', 'location=yes'); return false;"> Open pdf </a> 我需要完整地使用，否则我可以像这样做 <div class="col col-50 clsGrid "href="#" onclick="window.open('http://www.orimi.com/pdf-test.pdf', '_system', 'location=yes'); return false;"> <div class="clsGridOverlay"><span class="clsGridTitle">PDF</span></div> </div>。 - hybrid Dev

你能帮我回答这个问题吗？https://dev59.com/IKHia4cB1Zd3GeqPNAhJ - hybrid Dev

@V.Pivet 用本地路径替换文件根目录 - Edison Augusthy

适用于Ionic 4的绝佳选择。 - Riyad Khalifeh

我发现这种方法非常有用的一点是，虽然像FileOpener这样的插件默认使用设备的本地阅读器，但这些阅读器也启用了共享选项。而InAppBrowser允许我禁用它们。 - JurgenBlitz

Answer 2

这里有一个类似的问题Ionic框架PdfViewer

尝试使用这个Phonegap插件https://github.com/ti8m/DocumentHandler 它对我来说完美地工作了。

以下是我如何集成它的方法。

$scope.HandleDocumentPlugin = function () {
    if (DocumentViewer != null) {
        DocumentViewer.previewFileFromUrlOrPath(
            function () {
                console.log('success');
            }, function (error) {
                if (error == 53) {
                    console.log('No app that handles this file type.');
                    var alert = $ionicPopup.alert({
                        title: 'Alert!',
                        template: "There is no app installed that handles this file type."
                    });
                    alert.then(function (res) {

                    });
                }
            }, $scope.PDF_URL);
    }
    else if (DocumentHandler != null) {
        DocumentHandler.previewFileFromUrlOrPath(
           function () {
               console.log('success');
           }, function (error) {
               if (error == 53) {
                   console.log('No app that handles this file type.');
                   var alert = $ionicPopup.alert({
                       title: 'Alert!',
                       template: "There is no app installed that handles this file type."
                   });
                   alert.then(function (res) {

                   });
               }
           }, $scope.PDF_URL);
    }
    else {
        console.log("error");
    }
}

- DevSab

---

好的，上面的解决方案对我来说不太清楚...因为我有一个网格视图，一旦我按下该网格视图，我需要向用户显示PDF而无需下载...所以应该是一个on-click函数，对吧？但是上面的解决方案我不知道如何在on-click函数内部实现......如果您有任何源代码...那对我来说会更有帮助...因为对于这个问题-我在公司遇到了更多的问题...没有人帮助我...如果您发送给我一些您使用的代码...它将有助于挽救我的工作... - hybrid Dev

你是使用Ionic框架还是简单的jQuery JavaScript？ - DevSab

@DevSab..但我需要的是...PDF文件不应该被用户下载，也不应该保存在手机存储中...所以这个插件可以实现这个功能吗？ - hybrid Dev

我正在使用 Ionic 1。 - hybrid Dev

尝试阅读这个讨论 https://forum.ionicframework.com/t/how-to-open-external-pdf-url-in-app/14143/4 - DevSab