Question

在我的一个观点中，我想显示一个可通过URL访问的PDF。这应该在不打开浏览器中的额外选项卡的情况下完成，而无需下载PDF（在浏览器外部查看）。它应该可见于Ember应用程序中。

我的想法是：

使用URL获取PDF并使其可供ember应用程序访问。
使用特殊的“PDF视图”显示PDF。

这可能吗？在Ember应用程序中显示嵌入式PDF有哪些选项？

Answer 1

显示PDF与ember并不真正相关，因为要查看PDF，您需要在浏览器中安装PDF插件（默认情况下，默认情况下会根据浏览器安装）。

也就是说，我可以想象的一个可能的解决方案是使用tagName iframe创建一个自定义的ember视图，在该视图上将src属性设置为引用PDF的链接。

实施例

App.PDFView = Ember.View.extend({
  tagName: 'iframe',
  attributeBindings: ['src', 'width', 'height', 'frameborder'],
  src: 'pdffile.pdf',
  width: 800,
  height: 600,
  frameborder: 0
});

我还使用width，height和frameborder只是为了方便，因此您可以轻松地从ember中控制一些iframe的属性。这是一个有效的demo。

您还可以使用更详细的内容并使用像http://pdfobject.com/这样的js lib，然后在视图的didInsertElement钩子中初始化：

App.PDFView = Ember.View.extend({
  src: 'pdffile.pdf',
  width: 800,
  height: 600,
  didInsertElement: function() {
    new PDFObject({ 
      url: this.get('src'),
      width: this.get('width'),
      height: this.get('height')}
    ).embed(this.get('elementId'));
  }
});

（尚未测试后者，但你明白了）

然后在模板中使用此App.PDFView，就像普通的余烬视图一样。

{{view App.PDFView}}

或者您可以设置src，width＆amp;直接来自您的模板中的height，例如

{{view App.PDFView src="pdffile.pdf" width="600" height="800"}}

希望它有所帮助。

Answer 2

您当然可以通过以下方式利用Ember PDFJS Addon：

ember install ember-pdfjs

GitHub上的README描述了安装和使用案例。

简而言之，插件为您的Ember项目提供了一个组件pdf-document，您可以在HTMLBars模板中使用它，如下所示：

{{pdf-document src=[model.src]}}

...还有src可以包含的其他排列（包括字符串文件路径，资源URI或Uint8Array缓冲区）。

如果您没有看到所需功能，请在Issues。

中进行推荐

Ember视图显示PDF

2 个答案:

实施例