Socket
Socket
Sign inDemoInstall

ngx-filesaver

Package Overview
Dependencies
3
Maintainers
1
Versions
25
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

ngx-filesaver

Simple file save with FileSaver.js


Version published
Maintainers
1
Weekly downloads
39,528
decreased by-10.58%

Weekly downloads

Readme

Source

ngx-filesaver

Simple file save with FileSaver.js

NPM version Ci codecov

中文版

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

ParameterDescriptionTypeDefault
methodRequest method typestringGET
urlRequest URLstring-
fileNameFilename when downloadingstring-
queryAdditional query parameters. Equivalent to params valuestring-
headerHeader configuration. Usually used for especifying access tokensany-
fsOptionsFileSaver.js config, can be set autoBom valueFileSaverOptions-
successDownload success callbackEventEmitter<HttpResponse<Blob>>-
errorDownload error callbackEventEmitter<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:

  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 NameDescription
filesaver__not-supportNot Supported Browsers
filesaver__disabledDuring 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"
     ]
     ...
   }
   ...
},

Keywords

FAQs

Last updated on 09 Nov 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc