Angular2试图显示PDF

我想在我的页面上显示PDF文件。为了做到这一点，我可以使用对象标记像这样，它的工作原理：Angular2试图显示PDF

<div style="width:100%;height:100%;position:relative;background-color:white"> 
    <object data="http://eloquentjavascript.net/Eloquent_JavaScript.pdf" 
    type="application/pdf" width="100%" height="100%"> 
    <param name="view" value="Fit" /> 
    </object> 
</div>

但我需要动态设置对象数据，如下所示：

<div style="width:100%;height:100%;position:relative;background-color:white"> 
    <object data="{{url}}" 
    type="application/pdf" width="100%" height="100%"> 
    <param name="view" value="Fit" /> 
    </object> 
</div>

我定义的URL，但它没有显示PDF文件。我创建了一个我想要做的例子： http://plnkr.co/edit/6xE1Q7YzcD8eB0K4lP8Y

请问我有什么建议吗？

感谢和问候，埃杜

来源

2016-05-01 Eddiedu

似乎在Chrome中很好地工作。

某些浏览器（IE）解析{{url}}" before Angular got a chance to replace the binding by the bound value which results in an error because {{url}}`不是有效的URL。

您可以防止通过使用

<object [data]="url"

或

<object [attr.data]="url"

或

<object attr.data="{{url}}"

来源

2016-05-01 14:13:13

我使用的是Mac铬发展。我试图使用[数据]，但它不起作用。我也尝试过我创建的重新创建的示例，但它也没有工作。任何建议？感谢和问候，教育 – Eddiedu

什么是“不工作”的意思。如上所述，我无法复制。浏览器控制台中是否显示错误消息？我的答案中的所有三个例子都产生了相同的结果吗？ –

嗨，谢谢你的回答。我已经尝试了你在答案中显示的三种方式。当我添加[数据] plunker示例不断加载并且不显示视图。这是我的测试http://plnkr.co/edit/6xE1Q7YzcD8eB0K4lP8Y?p=preview我做错了吗？感谢和问候。 Edu – Eddiedu

Angular2试图显示PDF

回答

相关问题