Ember视图显示PDF

Question

在我的一个视图中，我想显示一个可以通过URL访问的PDF。这应该在不打开浏览器中的额外选项卡，也不下载PDF（在浏览器外查看）的情况下完成。它应该是可见的嵌入Ember应用程序中。

我想的是：

1. 使用URL获取PDF并使其可供成员应用程序访问
2. 使用特殊的"PDF视图"来显示PDF

这可能吗？我有什么选项可以在Ember应用程序中显示嵌入的PDF？

Answer 1

显示PDF实际上与ember无关，因为要查看PDF，您需要在浏览器中安装PDF插件（默认情况下，根据浏览器的不同安装该插件）。

也就是说，我可以想象的一个可能的解决方案是创建一个具有tagName iframe的自定义成员视图，在该视图上，您可以将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的一些属性。这是一个工作演示。

您还可以使用更详细的东西，并使用js-libhttp://pdfobject.com/然后在视图的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&height直接从您的模板中，如

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

希望能有所帮助。

Answer 2

您当然可以通过以下操作来利用Ember PDFJS插件：

ember install ember-pdfjs

GitHub上的自述文件描述了安装和使用案例。

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

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

src可以是什么还有其他排列（包括字符串文件路径、资源URI或Uint8Array缓冲区）。

如果您没有看到您需要的功能，请在问题中提出建议。