Ember view to display a PDF

Question

In one of my views I would like to display a PDF, which is accesible via URL. This should be done without opening an extra tab in the browser, and without downloading the PDF (to view it outside the browser). It should be visible embedded within the Ember application.

What I have in mind is:

1. Use the URL to get the PDF and make it accessible to the ember application.
2. Use a special "PDF view" to display the PDF.

Is this possible? What options do I have to display an embedded PDF in an Ember application?

Answer 1

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.