Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

ngx-filesaver

Package Overview
Dependencies
Maintainers
1
Versions
27
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

ngx-filesaver

Simple file save with FileSaver.js

  • 18.0.0
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
43K
decreased by-12.11%
Maintainers
1
Weekly downloads
 
Created
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

Package last updated on 15 Jun 2024

Did you know?

Socket

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
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc