Awesome
ngx-filesaver
Simple file save with FileSaver.js
Examples
Installation
$ 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
Add the FileSaverModule
module to your project:
import { FileSaverModule } from 'ngx-filesaver';
@NgModule({
imports: [FileSaverModule],
})
export class AppModule {}
Instructions
There are two ways to save a file: using FileSaverService.save()
or using the fileSaver
directive.
1、FileSaverService
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((<any>res)._body, fileName);
});
}
2、fileSaver directive
Configuration example
<button
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
</button>
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<HttpResponse<Blob>> | - |
error | Download error callback | EventEmitter<any> | - |
Custom HTTP type
<button type="button" fileSaver [http]="onRemote('pdf', true)">Download PDF</button>
onRemote(type: string, fromRemote: boolean): Observable<Response> {
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:
- fileName
- response.headers.get('filename')
- 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:
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"allowedCommonJsDependencies": [
"file-saver"
]
...
}
...
},