Navigate to a blob link

Help Requests
1

Hi, I am trying to replicate this (http://41j.com/blog/2015/01/creating-svg-javascript-using-fabricjs-downloading-locally/) with aurelia, basically is exporting svg file generated localy… almost have all working only have problem with the router, my code is

  let locFile = new Blob([fileData], {type: "image/svg+xml;charset-utf-8"});
  let urlSrc = URL.createObjectURL(locFile);
  this.router.navigate(urlSrc);

the url generated is “blob:http :// localhost:3001/a2b50924-c232-d14e-b300-d3ff5038b1e6”, already tested the url in another tab and get the file, but in aurelia get an error, “Error: Route not found: /blob:http :// localhost:3001/a2b50924-c232-d14e-b300-d3ff5038b1e6”

any help would be appreciated

2

Not sure whether this helps but routes generally refer to position of view models in the aurelia project structure so you would need to use a route name that can be used as a directory/file name ruling out a url as route name. An image would, for example, be displayed using a view model comprising HTML and TS file. Note in Net Core that image files must be stored in the wwwroot folder as root with say an images subfolder and use HTML tag as follows: image

Routes generally correspond to relative paths to view models (eg home) that appear in the project directory and can be explicitly created using code such as PLATFORM.moduleName(‘test’). The following TypeScript code can be used to create a route.

                        this.router.addRoute({
                            route: 'test',
                            name: 'test',
                            settings: { icon: 'th'},
                            moduleId: PLATFORM.moduleName('test'),
                            nav: true,
                            title: 'test'
                        });
3

Hi, well the problem is that the svg(this particular case) file is generated locally in a canvas editor (fabric js framework) so no server storage is involved… on the other hand the “URL.createObjectURL(locFile)” function generate a local route, which is accessible to the browser and is where I get the error when try to navigate to this route, also no view models associated here since this is worked in the browser, hope this clarify a little more the problem

4

Just as a matter of interest does it work if you include a PLATFORM.moduleName(‘/blob:http :// localhost:3001/a2b50924-c232-d14e-b300-d3ff5038b1e6’); statement somewhere in the code. This should generate a reference to the route that needs to be present

5

i wil test, but the url is generate on the fly and requested automatically after generated not to be accessed by the user, also after added i have to remove the route because if the user make another change and generate a new url i will be creating garbage routes, that is why is treating the url as external with the call “this.router.navigate(urlSrc);”

6

So you want to trigger a download of the generated file?

Try
location.href = urlSrc;
instead of involving the aurelia router.

I’m not sure it will work, but using the aurelia router seems the wrong way to go…

If the above doesn’t work you could probably add (a hidden) <a download> element to the page with href set to urlSrc and then trigger a click on that element. See https://stackoverflow.com/questions/1066452/easiest-way-to-open-a-download-window-without-navigating-away-from-the-page