使用 AngularJS 指定指向 PDF 的链接答案

【问题标题】：Specify link to PDF with AngularJS使用 AngularJS 指定指向 PDF 的链接
【发布时间】：2017-11-15 09:17:41
【问题描述】：

我有以下 html 代码用于在我的 AngularJS 应用程序中显示 PDF 文件：

<div id="pdf">
  <object width="100%" height="500px" type="application/pdf" data="./test.pdf?#zoom=45&scrollbar=0&toolbar=0&navpanes=0" id="pdf_content">                
  </object>
</div>

如何指定一些可能动态变化的链接并从控制器中获取？

【问题讨论】：

标签： javascript html angularjs pdf

【解决方案1】：

事实上，您可能应该为此使用Angular specific syntax，否则如果文件动态更改，您可能会在控制台中收到一些烦人的错误消息。

<object ng-attr-data="{{controller.pdf}}"></object>

【讨论】：

【解决方案2】：

您是否尝试过像这样将链接添加到控制器中的范围？

$scope: {
        pdflink: 'https://link/to/pdf/',
    },

然后像下面这样添加pdf链接：

<div id="pdf">
  <object width="100%" height="500px" type="application/pdf" data="{{data.pdflink}}" id="pdf_content">  
  </object>
</div>

【讨论】：

哦，谢谢，我想我必须对“数据”的值使用特定于角度的语法。它有效！

【解决方案3】：

如果没有您的控制器代码或任何上下文，很难提供详细的答案，但假设您的 pdf 文件名位于控制器属性中，例如：

<div id="pdf" ng-controller="pdfController as pdf">
  <object width="100%" height="500px" type="application/pdf" data="{{pdf.fileName}}?#zoom=45&scrollbar=0&toolbar=0&navpanes=0" id="pdf_content">                
  </object>
</div>

会成功的。

【讨论】：