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
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
Related
I want to embed an Emscripten graphical application to a Vue SPA. The output of Emscripten is a .js and a .wasm file. I cannot get rid of the javascript file and write my own because it contains the proxy for the glfw API which I'm using for input handling.
I can load the javascript (with WASM) successfully with the following code:
This code injects a new <script> tag to the DOM and loads the javascript file.
injectScript(source) {
let script = document.createElement('script');
script.type = 'text/javascript';
script.src = source;
document.head.appendChild(script);
document.head.removeChild(script);
}
// During mount
injectScript("xy.js")
I have a similar method that creates the global Module object for Emscripten using the DOM:
// template
<canvas id="canvas">
// During mount
injectCode(`
var canvas = document.getElementById('canvas');
var Module = {
canvas: canvas,
};
`);
This method works when I open the page for the first time. Since we are talking about a single page application the javascript context is kept and the same code fails to create the wasm context for the second time when I reopen the page.
I'm also interested in completely different solutions but I would like to keep glfw for input handling in the graphics code.
According to the Emscripten documentation the Module object supposed to have a destroy() method. I would try to call It when the Vue component unmounted but mine doesn't have It.
Tried to null the Module object during unmount and It didn't work.
I am trying to serve a static HTML file using the res.sendFile() method from my express.js server that is hosted on AWS Lambda using the Serverless framework. Assuming that I am trying to serve an HTML file from the directory src/views/users/index.html.
In deployment, this is the file path that I have tried to serve my HTML file from /var/task/src/views/users/vindex.html, but I keep getting the error Error: ENOENT: no such file or directory, stat '/var/task/src/views/users/index.html' when viewing the AWS Cloudwatch log.
app.use(express.static(__dirname));
path.resolve(__dirname, "./src/views/users/index.html");
This is the results I get when I run tree src locally:
Have anyone experienced this issue before, and have solved it? Thank you so much!
Well, after many grueling hours and trying many solutions, I have found a workaround to render the html content without actually needing to render a .html file.
I ended up making a helper method that returns a string of the html content and send the html content string using the res.send() method instead.
html helper function
export const htmlHelper = () => {
return `<html content goes here>`;
}
route method
app.get('/html', (_, res) => {
const htmlString = htmlHelper();
return res.send(htmlString);
})
I'm currently using the google-maps-api-loader so I can render a google map in vue.js and place markers on it. The data are all retrieved from a json file and I had no problem with the markers but now I have to connect them using an encoded path from the json file. I have some sample pure javascript that decodes the route and I'm trying to do the same in Vue.js but it seems the geometry thing isn't working. What can i do?
I
path: google.maps.geometry.encoding.decodePath(route)
First, you have to enable geometry on
Vue.use(VueGoogleMaps, { load: { key: 'xxxxxxxx', libraries: 'places,geometry', , installComponents: true});
Then on your target file,
initial a google:gmapApi on computed,
Finally, the path should be like this
:path="google && new google.maps.geometry.encoding.decodePath(routes)"
I am using the Vuetify Cloudinary Upload component to upload pictures to my Vue application. I then want to run the TensorFlow.js library on them to classify objects. Unfortunately, I get this error:
DOMException: Failed to execute 'texImage2D' on
'WebGL2RenderingContext': The image element contains cross-origin
data, and may not be loaded.
Here is my relevant code:
import * as cocoSSD from '#tensorflow-models/coco-ssd';
let images = document.getElementsByTagName("img");
let imagePromises = [];
for (let image of images)
{
image.setAttribute('crossOrigin', 'anonymous');
imagePromises.push(this.model.detect(image)
.then(classified => this.objects.push(classified))
.catch(e => {console.log(e)})
)}
await Promise.all(imagePromises);
The image has to be served by a server which enables cross origin. Using the image directly from the file system will always throw the cors error issue.
Then the crossOrigin attribute of the image has to be set either directly on the html
<img src="url" crossorigin="anonymous">
or in the js script
image.setAttribute('crossOrigin', 'anonymous');
// or
image.crossOrigin = "anonymous";
I want to use the new Expo Print functionality with a local HTML document:
import { Print } from 'expo';
const printDocument = require('../../../assets/printouts/document.html');
console.log(printDocument);
Print.printAsync({ html: printDocument });
When I run this with Expo, I get an error and I can see that printDocument is equal to an integer, not a string corresponding to the HTML document I’m trying to import.
On the other hand, if I try just this in React, where I use Webpack with the html-loader plugin:
const printDocument = require('../../../assets/printouts/document.html');
console.log(printDocument);
Then printDocument IS a string corresponding to the HTML document as expected.
So my conclusion is I need to configure Expo in some way to import HTML documents into Javascript strings the way html-loader does with Webpack. Any ideas how? Thanks.