Question

我已经做了一个应用程序，它将使用应用程序内浏览器显示pdf文件，该浏览器在android和ios中都运行良好。但我的客户需要不应为用户下载pdf文件。那么有没有其他方法可以单独显示pdf文件。

我听说过iframe但却无法获得有关它如何工作的任何示例代码。请帮助我。

<form class="list cls0Padding" >
        <div class="item item-body cls0Padding cls0Border">
            <div class="row cls0Padding">
                <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>
                <div  class="col col-50 clsGrid" href="#" ng-click="playVideo()">
                    <div class="clsGridOverlay"><span class="clsGridTitle"> VIDEOS</span></div>
                </div>
            </div>
        </div>
    </form>

我的控制器：

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

提前致谢！

Answer 1

安装cordova plugin add org.apache.cordova.inappbrowser 在android的情况下，我们使用GoogleDocs打开pdf文件，因为默认情况下android浏览器不支持pdf查看。 iOS非常聪明，可以像往常一样轻松处理pdf。

示例：

$scope.view_link = function (url, link_type) {
            if (ionic.Platform.isAndroid()) {
                if (link_type !== undefined && link_type !== null) {
                    if (link_type.toLowerCase() !== 'html') {
                        url = 'https://docs.google.com/viewer?url=' + encodeURIComponent(url);
                    }
                }
            }
            var ref = window.open(url, '_blank', 'location=no');
        }

了解更多https://github.com/apache/cordova-plugin-inappbrowser/blob/8ce6b497fa803936784629187e9c66ebaddfbe1b/doc/index.md

如果您正在寻找iframe尝试类似这样的内容

<iframe ng-src="{{pdfurl}}" style="width:100%; height: 100%;"></iframe>

控制器中的

..

$scope.pdfurl =$sce.trustAsResourceUrl('https://docs.google.com/viewer?url=' + encodeURIComponent($scope.pdf));

Answer 2

我怀疑要查看需要下载的实际PDF。显示PDF的其他方法是在服务器上光栅化PDF（将每个页面转换为图像）并创建查看器以查看图像。

如何在没有下载选项的情况下在离子应用程序中打开pdf或使用inappbrowser而不允许用户下载

2 个答案: