Ember view to display a PDF file

Question

In one of my views, I would like to display a PDF file available at the URL. This must be done without opening an additional tab in the browser and without downloading the PDF (to view it outside the browser). It must be visible embedded in the Ember app.

What I mean:

• Use the URL to get the PDF file and make it available to the ember application.
• To display PDF, use the special "PDF view".

Is it possible? What options should I display embedded PDF in an Ember app?

Answer 1

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

However, a possible solution I could imagine could be to create a custom ember view with a tagName iframe on which you set the src attribute for the link that links 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 also used the width , height and frameborder only as a convenience, so you can easily manage some attributes iframe inside ember. Here's a working demo .

You can also go with something more developed and use js lib, like http://pdfobject.com/ , which is then initialized in your didInsertElement hook 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')); } }); 

(did not check the last, but you got the point)

And then use this App.PDFView as a regular ember view in your templates.

 {{view App.PDFView}} 

Or you can set src , width and height directly from your template, e.g.

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

Hope this helps.

Answer 2

You can use Ember PDFJS Addon by following these steps:

ember install ember-pdfjs

README on GitHub describes installations and use cases.

In short, the addon provides your Ember project with the pdf-document component, which you can use in your HTMLBars template as follows:

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

... there are other permutations of what src might be (including the file path, the URI, or the Uint8Array buffer).

If you do not see the desired function, suggest Issues .