how to implement window.open kind of functionality in Angular 4

Question

How do you implement window.open() kind of functionality in Angular 4?

function open(){
    var URL = "file:///C:\data2.pdf";

    window.open(URL, null);
}

I am getting the below error message:

Cannot open local file - Chrome: Not allowed to load local resource.

Let me know if there is any alternative of window.open() in Angular 4.

Solution 1

You must introduce the file in the assets of the Angular project. To access to the file you introduce 'assets/file2.pdf'.

window.open('assets/file2.pdf');

Don't use an absolute path, because if you deploy in a subdirectory doesn't work.

Solution 2

You should use Router.navigate Angular method:

import { Router } from '@angular/router';
    
constructor(
   private router: Router
) {}
    
open(){
   var URL = "file:///C:\data2.pdf";
   this.router.navigate(URL);
}

Comments

[Daniel W Strimpel]

The issue isn't with window.open(...) it is with the URL you are trying to open. It is a security issue to open local files using file:// in Chrome.

[HDJEMAI]

angular-2-redirect-to-an-external-url-and-open-in-a-new-tab

[david d]

I want to open this file in new popup window.

[david d]

want to open in new popup window , this will open in new tab window.location.href="google.com"; it will not work for me

[david d]

same issues not able to open the file. Not allowed to load local resource: file:///C:/docstore/doc7.1.pdf

[Abylay]

You can manually open a file in the browser as much as you like, but you can not go through the browser JavaScript, because it's not safe. You have to use HTTP instead of FILE. Read please about the web, how the web server works and how requests are processed.