Display PDF Content in an Aurelia View

Question

I have some PDF files that I need to display in an Aurelia View. The files are not available by direct link I have an API function that returns a byte array.

In ASP.Net, I have some control over the response object's headers and content type, and can BinaryWrite the contents into the response.

I can't figure out how to do this in Aurelia. Any suggestions?

Edit: I'm attempting to use pdf.js as suggested. Injection in Aurelia fails.

import {inject} from "aurelia-framework";
import {HttpClient} from "aurelia-fetch-client";
import {PDF} from "pdfjs-dist"

@inject(Router, HttpClient, PDF)
export class PDFView {

    constructor(router, http, pdf) {

        this.router = router;
        this.http = http;
        this.pdf = pdf;

    }

The console displays this error:

Inner Error:
Message: key/value cannot be null or undefined. Are you trying to inject/register something that doesn't exist with DI?
Inner Error Stack:
Error: key/value cannot be null or undefined. Are you trying to inject/register something that doesn't exist with DI?
    at Container.get (http://localhost:65397/jspm_packages/npm/aurelia-dependency-injection@1.0.0-beta.1.2.3/aurelia-dependency-injection.js:480:15)
    at Object.invoke (http://localhost:65397/jspm_packages/npm/aurelia-dependency-injection@1.0.0-beta.1.2.3/aurelia-dependency-injection.js:341:81)
    at InvocationHandler.invoke (http://localhost:65397/jspm_packages/npm/aurelia-dependency-injection@1.0.0-beta.1.2.3/aurelia-dependency-injection.js:300:168)
    at Container.invoke (http://localhost:65397/jspm_packages/npm/aurelia-dependency-injection@1.0.0-beta.1.2.3/aurelia-dependency-injection.js:564:25)
    at StrategyResolver.get (http://localhost:65397/jspm_packages/npm/aurelia-dependency-injection@1.0.0-beta.1.2.3/aurelia-dependency-injection.js:127:37)
    at Container.get (http://localhost:65397/jspm_packages/npm/aurelia-dependency-injection@1.0.0-beta.1.2.3/aurelia-dependency-injection.js:501:23)
    at eval (http://localhost:65397/jspm_packages/npm/aurelia-templating@1.0.0-beta.1.2.7/aurelia-templating.js:3925:73)
End Inner Error Stack
------------------------------------------------

The import statement must be failing, yet pdfjs appears to load successfully as I receive status 200 for both pdfjs-dist@1.5.294.js and pdfjs when the page loads.

I can find no samples of Aurelia / pdfjs apps. Repeating: I need to embed the stream as the PDF is not available via HTTP.

I'm not sure where to go from here

I'm also struggling to find any examples. Did you ever manage to find a proper example? — DeVil, Mar 21 '17 at 03:17

score 1 · Answer 1 · edited May 23 '17 at 12:17

As far as I know there is nothing Aurelia-specific about loading pdf files.

You can use pdf.js. It has method getDocument that accepts binary data stored in byte array.

Then you can place a canvas inside your view, load pdf data during view activation and render pages into it using pdf.js after html is attached. For example code check answer by toddmo for this post: Pdf.js and viewer.js. Pass a stream or blob to the viewer

Display PDF Content in an Aurelia View

1 Answers1