Ember视图显示PDF

Question

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

我的想法是:

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

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

Answer 1

显示PDF与ember并不真正相关,因为要查看PDF,您需要在浏览器中安装PDF插件(默认情况下,默认情况下根据浏览器安装).

也就是说,我可以想象的一个可能的解决方案是使用tagName创建一个自定义的ember视图,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只是为了方便,所以你可以控制一些的iframe的从灰烬中容易属性.这是一个工作演示.

您还可以使用更详细的内容并使用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和height

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

希望能帮助到你.