Ember view to display a PDF

Displaying a PDF is not really related to ember, because to view a PDF you need a PDF plugin installed in your browser (which is mostly installed by default depending by the browser).

That said, a possible solution I could imagine could be to create a custom ember view with the tagName iframe on which you set the src attribute to the link referring to the PDF.

Example:

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

I've also used width, height and frameborder only for convenience so you can control some of the iframe's attributes easily from within ember. Here a working demo.

You can also go with something more elaborated and use a js lib like http://pdfobject.com/ which you then initialize in your view's didInsertElement hook:

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'));
  }
});

(haven't tested the latter, but you get the point)

And then use this App.PDFView like a normal ember view in your templates.

{{view App.PDFView}}

Or your can set the src, width & height directly from within your template like

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

Hope it helps.