在 ionic 应用程序中显示 pdf答案

【问题标题】：Display pdf inside an ionic app在 ionic 应用程序中显示 pdf
【发布时间】：2017-05-25 23:25:40
【问题描述】：

我正在开发一个带有离子框架的应用程序，我需要显示一个 pdf。

我在网上看了很多，发现这个指令可以使用

https://github.com/winkerVSbecks/angular-pdf-viewer

问题是我在将指令与我的 ionic 应用程序集成时遇到问题。

我已经完成了指示的步骤：

bower 安装 angular-pdf-viewer

包括 lib、AngularJS 和 PDFJS 的路径：（这里我更改了路径）

  <script src="lib/pdfjs-dist/build/pdf.js"></script>
  <script src="lib/angular/angular.js"></script>
  <script src="lib/angular-pdf-viewer/dist/angular-pdf-viewer.min.js"></script>

在您的 Angular 应用程序中包含 lib 作为依赖项：
```
  var app = angular.module('App', ['pdf']);
```

然后我把这个放到模板里

<pdf-viewer    delegate-handle="my-pdf-container"    url="www.publishers.org.uk/_resources/assets/attachment/full/0/2091.pdf" scale="1"    show-toolbar="true"    ></pdf-viewer>

但我得到了这个错误

[$parse:syntax] 语法错误：标记“pdf”是表达式第 64 列的意外标记

我做错了什么？

提前致谢！

【问题讨论】：

标签： angularjs pdf mobile angularjs-directive ionic-framework

【解决方案1】：

我相信 url 值是为了指向您的范围。所以假设你有 $scope.pdf = "the url you want"，你可以在标签中做 url="pdf"。

【讨论】：

这似乎有效！但是现在我的 url 出现 404 错误，但我 100% 确定 url 没问题，因为如果我在浏览器中打开它就可以了。该网址必须是本地网址还是可以是 www.aaaaa.com？
用Remote Debug检查时，真的是404错误吗？这可能是一个 CSP 问题。确认您在远程调试控制台中看到的内容。
它不起作用，因为不知何故这是它正在寻找的路线：“file:///android_asset/www/www.adobe.com/enterprise/accessibility/pdfs/acro6_pg_ue.pdf”。这是否意味着我必须在手机上保存该文件？
HTTP 资源的完整/绝对 URL 应具有“http://”。您拥有的不是 URL：“www.adobe.com/enterprise/accessibility/pdfs/acro6_pg_‌ue.pdf”
是的 - @aync 说的 - 老实说，我认为你只是在节省打字而不是使用无效的 url ;)

【解决方案2】：

试试这个Phonegap插件https://github.com/ti8m/DocumentHandler

下面是我如何将它集成到 ng-click 上。

$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");
    }
}

【讨论】：