ngx-filesaver

Simple file save with FileSaver.js


中文版

Examples

- demo
- Stackblitz

Installation

``sh
$ npm install file-saver ngx-filesaver


Or when using yarn

$ yarn add file-saver ngx-filesaver

Or when using pnpm

$ pnpm install file-saver ngx-filesaver
`

Instructions

There are two ways to save a file: using FileSaverService.save() or using the fileSaver directive.

$3

`typescript
constructor(private _http: Http, private _FileSaverService: FileSaverService) {
}

onSave() {
this._http.get('demo.pdf', {
responseType: ResponseContentType.Blob // This must be a Blob type
}).subscribe(res => {
this._FileSaverService.save((res)._body, fileName);
});
}
`

$3

#### Configuration example

`html
type="button"
fileSaver
[method]="'GET'"
[fileName]="'中文pdf.pdf'"
[url]="'assets/files/demo.pdf'"
[header]="{ token: 'demo' }"
[query]="{ pi: 1, name: 'demo' }"
(success)="onSuc($event)"
(error)="onErr($event)"
>
Download PDF

`

fileSaver： the directive name
Parameters

| Parameter | Description | Type | Default |
| ----------- | ---------------------------------------------------------------- | ---------------------------------- | ------- |
| method | Request method type | string | GET |
| url | Request URL | string | - |
| fileName | Filename when downloading | string | - |
| query | Additional query parameters. Equivalent to params value | string | - |
| header | Header configuration. Usually used for especifying access tokens | any | - |
| fsOptions | FileSaver.js config, can be set autoBom value | FileSaverOptions | - |
| success | Download success callback | EventEmitter> | - |
| error | Download error callback | EventEmitter | - |

#### Custom HTTP type

`html
Download PDF
`

`ts
onRemote(type: string, fromRemote: boolean): Observable {
return this._http.get(assets/files/demo.${type}, {
responseType: ResponseContentType.Blob
}).map(response => {
response.headers.set('filename', demo.${type})
return response;
});
}
`

#### About filenames

The name for the downloaded file is obtained with the following priority:

1. fileName
2. response.headers.get('filename')
3. response.headers.get('x-filename')。

If you are requesting a CORS address, you need to pay attention to the request headers. Setting Access-Control-Allow-Headers: filename should be sufficient

#### Class Name

| Class Name | Description |
| ------------------------ | ------------------------------------------------------------------------------------- |
| filesaver__not-support | Not Supported Browsers |
| filesaver__disabled | During http request |

#### Configuring CommonJS dependencies

> WARNING in node_modules/ngx-filesaver/ivy_ngcc/fesm2015/ngx-filesaver.js depends on file-saver. CommonJS or AMD dependencies can cause optimization bailouts.

We cannot change this, the only way is to ignore it:

`json
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"allowedCommonJsDependencies": [
"file-saver"
]
...
}
...
},
``