user6320490
user6320490

Reputation:

Display PDF Content in an Aurelia View

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/[email protected]/aurelia-dependency-injection.js:480:15)
    at Object.invoke (http://localhost:65397/jspm_packages/npm/[email protected]/aurelia-dependency-injection.js:341:81)
    at InvocationHandler.invoke (http://localhost:65397/jspm_packages/npm/[email protected]/aurelia-dependency-injection.js:300:168)
    at Container.invoke (http://localhost:65397/jspm_packages/npm/[email protected]/aurelia-dependency-injection.js:564:25)
    at StrategyResolver.get (http://localhost:65397/jspm_packages/npm/[email protected]/aurelia-dependency-injection.js:127:37)
    at Container.get (http://localhost:65397/jspm_packages/npm/[email protected]/aurelia-dependency-injection.js:501:23)
    at eval (http://localhost:65397/jspm_packages/npm/[email protected]/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 [email protected] 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

Upvotes: 2

Views: 1430

Answers (1)

xmichaelx
xmichaelx

Reputation: 629

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

Upvotes: 1

Related Questions