Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/cipchk/ngx-filesaver
Simple file save with FileSaver.js
https://github.com/cipchk/ngx-filesaver
angular angular-component file-saver filesaver
Last synced: 9 days ago
JSON representation
Simple file save with FileSaver.js
- Host: GitHub
- URL: https://github.com/cipchk/ngx-filesaver
- Owner: cipchk
- License: mit
- Created: 2017-04-09T06:10:11.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2024-09-24T01:54:44.000Z (about 2 months ago)
- Last Synced: 2024-10-23T07:36:55.263Z (17 days ago)
- Topics: angular, angular-component, file-saver, filesaver
- Language: TypeScript
- Homepage: https://cipchk.github.io/ngx-filesaver/
- Size: 3.99 MB
- Stars: 85
- Watchers: 4
- Forks: 18
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- fucking-awesome-angular - ngx-filesaver - Simple file save with <b><code> 21639⭐</code></b> <b><code> 4382🍴</code></b> [FileSaver.js](https://github.com/eligrey/FileSaver.js)). (Table of contents / Third Party Components)
- awesome-angular - ngx-filesaver - Simple file save with [FileSaver.js](https://github.com/eligrey/FileSaver.js). (Table of contents / Third Party Components)
- fucking-awesome-angular - ngx-filesaver - Simple file save with <b><code> 21627⭐</code></b> <b><code> 4380🍴</code></b> [FileSaver.js](https://github.com/eligrey/FileSaver.js)). (Table of contents / Third Party Components)
README
# ngx-filesaver
Simple file save with FileSaver.js
[](https://www.npmjs.com/package/ngx-filesaver)
[](https://github.com/cipchk/ngx-filesaver/actions?query=workflow%3ACi)
[](https://codecov.io/gh/cipchk/ngx-filesaver)
[中文版](README.zh-CN.md)
## Examples
- [demo](https://cipchk.github.io/ngx-filesaver/)
- [Stackblitz](https://stackblitz.com/edit/ngx-filesaver)
## 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
```
Add the `FileSaverModule` module to your project：
```ts
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
```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);
});
}
```
### 2、fileSaver directive
#### Configuration example
```html
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](https://github.com/eligrey/FileSaver.js/#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"
]
...
}
...
},
```