Download local file

Question

Html File

<button mat-button (click) = "FileDownload">Download</button>

Anugular 4 Component Method

FileDownload()
{
  this.filePath = "D:\SamplePDF.pdf";
  document.loation.href = this.filePath;

}

Here, I want to download the local file when button click happens. I am not able to download the file. Please help.

PS: I am not able to access window.open() also as I am using angular 4 application.

@john, I am getting this error in console: Not allowed to load local resource — Billy, Aug 01 '18 at 05:25
Then it's not possible because of the security settings of your browser. See [here](https://stackoverflow.com/questions/39007243/cannot-open-local-file-chrome-not-allowed-to-load-local-resource) — ProgrammingLlama, Aug 01 '18 at 05:26

score 3 · Answer 1 · answered Aug 01 '18 at 07:12

3

Can you try this snippet

function downloadFunc(){
     var anchor=document.createElement('a');
     anchor.setAttribute('href','D:/SamplePDF.pdf');
     anchor.setAttribute('download','');
     document.body.appendChild(anchor);
     anchor.click();
     anchor.parentNode.removeChild(anchor);
  }

answered Aug 01 '18 at 07:12

Patharraj

41
2

1

I have used your code but getting the same error in console: Not allowed to load local resource. – Billy Aug 01 '18 at 08:34
btw I have tried different approach using https://gist.github.com/liabru/11263260 – Billy Aug 01 '18 at 17:54
"Not allowed to load local resource" Local file and Server are different that the time get that issue. Other wise you have try convert local file into blob data and then set anchor element it will might help. – Patharraj Aug 03 '18 at 05:57

score 1 · Answer 2 · answered May 18 '20 at 19:53

1

You can simply do like this.

<a href="your_link" download> file_name </a>

Use a tag instead of button and implement material button style there. And use download attribute to implement the download action.

answered May 18 '20 at 19:53

Derek Wang

10,098
4
18
39

score 0 · Answer 3 · answered Aug 01 '18 at 05:45

0

Could you try something like this:

/**
 * Method is use to download file.
 * @param data - Array Buffer data
 * @param type - type of the document.
 */
downLoadFile(data: any, type: string) {
    var blob = new Blob([data], { type: type.toString() });
    var url = window.URL.createObjectURL(blob);
    window.open(url);
}

answered Aug 01 '18 at 05:45

Akj

7,038
3
28
40

What is Blob? Do we need to install any package? – Billy Aug 01 '18 at 05:52
please refer this --> https://developer.mozilla.org/en-US/docs/Web/API/Blob – Akj Aug 01 '18 at 05:56
Thanks, but how to convert the file to data? – Billy Aug 01 '18 at 06:12
whatever the file/data and type of file u have just pass it to 'downLoadFile(data: any, type: string)'. – Akj Aug 01 '18 at 06:15

score 0 · Answer 4 · answered Mar 08 '19 at 11:33

¿Are you using ngnix or apache? You can force download with ngnix or apache by sending the content as an "attachment" (using "Content-Disposition" header).

This is a sample config to do this with Nginx:

server {
    listen 80;
    server_name my.domain.com;
    location ~ ^.*/(?P<request_basename>[^/]+\.(pdf))$ {
        root /path/to/pdf/
        add_header Content-Disposition 'attachment; filename="$request_basename"';
    }
}

score -3 · Answer 5 · edited Aug 01 '18 at 08:12

-3

try this

javascript:

window.open('file:///c://Documents/folder/file.ext', 'Download');

html:

<a href="file:///C://Documents/folder/file.ext">Download Me</a>

edited Aug 01 '18 at 08:12

Tim Diekmann

7,755
11
41
69

answered Aug 01 '18 at 05:31

Kanna

125
1
1
10

I am not able to access window.open. I am using Angular 4 application. Any Idea? – Billy Aug 01 '18 at 05:33

Download local file

5 Answers5