Download file
IMPORT MODULE

A file download based on blob.

Examples

Basic

Download a file.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'components-down-file-simple',
  template: `
    <button
      *ngFor="let i of fileTypes"
      nz-button
      down-file
      [http-data]="data"
      http-url="./assets/demo{{ i }}"
      file-name="demo中文"
      class="mr-sm"
    >
      {{ i }}
    </button>
  `,
})
export class ComponentsDownFileSimpleComponent {
  fileTypes = ['.xlsx', '.docx', '.pptx', '.pdf'];

  data = {
    otherdata: 1,
    time: new Date(),
  };
}

API

down-file

PropertyDescriptionTypeDefault
[http-data]Parameter of request{}-
[http-body]Body of request{}-
[http-method]Method of request'POST','GET','HEAD','PUT','PATCH','DELETE''GET'
[http-url]Url of requeststring-
[file-name]Specify a file namestring, (rep: HttpResponse<Blob>) => string-
[pre]Callback of download(ev: MouseEvent) => Promise<boolean>-
(success)Success callbackEventEmitter<HttpResponse>-
(error)Error callbackEventEmitter<any>-

FAQ

File name order

  1. file-name

  2. filename*, filename of content-disposition

  3. filename, x-filename of headers

Supported Browsers

Use new Blob() to verify Browser Compatible, The down-file__not-support style is added to the target element when not compatible.

The default incompatible processing behavior is hidden. You can set the Less variable to @down-file-not-support-behavior: 'disabled' to can't be click.