{"id":13808573,"url":"https://github.com/cipchk/ngx-filesaver","last_synced_at":"2025-05-16T08:05:54.252Z","repository":{"id":19703048,"uuid":"87687150","full_name":"cipchk/ngx-filesaver","owner":"cipchk","description":"Simple file save with FileSaver.js","archived":false,"fork":false,"pushed_at":"2025-02-20T05:22:52.000Z","size":4783,"stargazers_count":88,"open_issues_count":18,"forks_count":18,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-05-15T00:01:48.149Z","etag":null,"topics":["angular","angular-component","file-saver","filesaver"],"latest_commit_sha":null,"homepage":"https://cipchk.github.io/ngx-filesaver/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cipchk.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-04-09T06:10:11.000Z","updated_at":"2025-05-13T18:16:42.000Z","dependencies_parsed_at":"2023-01-11T21:22:35.833Z","dependency_job_id":"6f1b97e8-94d8-47a5-af7e-4a8e57cb6cd5","html_url":"https://github.com/cipchk/ngx-filesaver","commit_stats":{"total_commits":39,"total_committers":7,"mean_commits":5.571428571428571,"dds":0.3846153846153846,"last_synced_commit":"28f9eb83887903b66034ccc925a7da9798961b69"},"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cipchk%2Fngx-filesaver","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cipchk%2Fngx-filesaver/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cipchk%2Fngx-filesaver/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cipchk%2Fngx-filesaver/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cipchk","download_url":"https://codeload.github.com/cipchk/ngx-filesaver/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254493378,"owners_count":22080126,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular-component","file-saver","filesaver"],"created_at":"2024-08-04T01:01:46.460Z","updated_at":"2025-05-16T08:05:49.244Z","avatar_url":"https://github.com/cipchk.png","language":"TypeScript","funding_links":[],"categories":["Third Party Components"],"sub_categories":["Form Controls"],"readme":"# ngx-filesaver\n\nSimple file save with FileSaver.js\n\n[![NPM version](https://img.shields.io/npm/v/ngx-filesaver.svg)](https://www.npmjs.com/package/ngx-filesaver)\n[![Ci](https://github.com/cipchk/ngx-filesaver/workflows/Ci/badge.svg)](https://github.com/cipchk/ngx-filesaver/actions?query=workflow%3ACi)\n[![codecov](https://codecov.io/gh/cipchk/ngx-filesaver/graph/badge.svg?token=vnk2alNB8D)](https://codecov.io/gh/cipchk/ngx-filesaver)\n\n[中文版](README.zh-CN.md)\n\n## Examples\n\n- [demo](https://cipchk.github.io/ngx-filesaver/)\n- [Stackblitz](https://stackblitz.com/edit/ngx-filesaver)\n\n## Installation\n\n```sh\n$ npm install file-saver ngx-filesaver\n# Or when using yarn\n$ yarn add file-saver ngx-filesaver\n# Or when using pnpm\n$ pnpm install file-saver ngx-filesaver\n```\n\nAdd the `FileSaverModule` module to your project：\n\n```ts\nimport { FileSaverModule } from 'ngx-filesaver';\n\n@NgModule({\n  imports: [FileSaverModule],\n})\nexport class AppModule {}\n```\n\n## Instructions\n\nThere are two ways to save a file: using `FileSaverService.save()` or using the `fileSaver` directive.\n\n### 1、FileSaverService\n\n```typescript\nconstructor(private _http: Http, private _FileSaverService: FileSaverService) {\n}\n\nonSave() {\n  this._http.get('demo.pdf', {\n    responseType: ResponseContentType.Blob // This must be a Blob type\n  }).subscribe(res =\u003e {\n    this._FileSaverService.save((\u003cany\u003eres)._body, fileName);\n  });\n}\n```\n\n### 2、fileSaver directive\n\n#### Configuration example\n\n```html\n\u003cbutton\n  type=\"button\"\n  fileSaver\n  [method]=\"'GET'\"\n  [fileName]=\"'中文pdf.pdf'\"\n  [url]=\"'assets/files/demo.pdf'\"\n  [header]=\"{ token: 'demo' }\"\n  [query]=\"{ pi: 1, name: 'demo' }\"\n  (success)=\"onSuc($event)\"\n  (error)=\"onErr($event)\"\n\u003e\n  Download PDF\n\u003c/button\u003e\n```\n\n**fileSaver**： the directive name\n**Parameters**\n\n| Parameter   | Description                                                      | Type                               | Default |\n| ----------- | ---------------------------------------------------------------- | ---------------------------------- | ------- |\n| `method`    | Request method type                                              | `string`                           | `GET`   |\n| `url`       | Request URL                                                      | `string`                           | -       |\n| `fileName`  | Filename when downloading                                        | `string`                           | -       |\n| `query`     | Additional query parameters. Equivalent to `params` value        | `string`                           | -       |\n| `header`    | Header configuration. Usually used for especifying access tokens | `any`                              | -       |\n| `fsOptions` | FileSaver.js config, can be set `autoBom` value                  | `FileSaverOptions`                 | -       |\n| `success`   | Download success callback                                        | `EventEmitter\u003cHttpResponse\u003cBlob\u003e\u003e` | -       |\n| `error`     | Download error callback                                          | `EventEmitter\u003cany\u003e`                | -       |\n\n#### Custom HTTP type\n\n```html\n\u003cbutton type=\"button\" fileSaver [http]=\"onRemote('pdf', true)\"\u003eDownload PDF\u003c/button\u003e\n```\n\n```ts\nonRemote(type: string, fromRemote: boolean): Observable\u003cResponse\u003e {\n  return this._http.get(`assets/files/demo.${type}`, {\n    responseType: ResponseContentType.Blob\n  }).map(response =\u003e {\n    response.headers.set('filename', `demo.${type}`)\n    return response;\n  });\n}\n```\n\n#### About filenames\n\nThe name for the downloaded file is obtained with the following priority:\n\n1. fileName\n2. response.headers.get('filename')\n3. response.headers.get('x-filename')。\n\nIf you are requesting a CORS address, you need to pay attention to the request headers. Setting `Access-Control-Allow-Headers: filename` should be sufficient\n\n#### Class Name\n\n| Class Name               | Description                                                                           |\n| ------------------------ | ------------------------------------------------------------------------------------- |\n| `filesaver__not-support` | Not [Supported Browsers](https://github.com/eligrey/FileSaver.js/#supported-browsers) |\n| `filesaver__disabled`    | During http request                                                                   |\n\n#### Configuring CommonJS dependencies\n\n\u003e WARNING in node_modules/ngx-filesaver/ivy_ngcc/fesm2015/ngx-filesaver.js depends on file-saver. CommonJS or AMD dependencies can cause optimization bailouts.\n\nWe cannot change this, the only way is to ignore it:\n\n```json\n\"build\": {\n  \"builder\": \"@angular-devkit/build-angular:browser\",\n  \"options\": {\n     \"allowedCommonJsDependencies\": [\n        \"file-saver\"\n     ]\n     ...\n   }\n   ...\n},\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcipchk%2Fngx-filesaver","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcipchk%2Fngx-filesaver","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcipchk%2Fngx-filesaver/lists"}