下载文件
IMPORT MODULE

一个基于 blob 的文件下载。

代码演示

基础

下载一个文件。

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

成员说明类型默认值
[http-data]URL请求参数{}-
[http-body]POST请求响应体{}-
[http-method]请求类型'POST','GET','HEAD','PUT','PATCH','DELETE''GET'
[http-url]下载地址string-
[file-name]指定文件名,若为空从服务端返回的 header 中获取 filenamex-filenamestring, (rep: HttpResponse<Blob>) => string-
[pre]下载前回调(ev: MouseEvent) => Promise<boolean>-
(success)成功回调EventEmitter<HttpResponse>-
(error)错误回调EventEmitter<any>-

常见问题

文件名获取顺序

  1. file-name

  2. content-dispositionfilename*filename

  3. header 参数 filenamex-filename

兼容性

使用 new Blob() 来校验浏览器兼容,若不兼容会在目标元素上增加 down-file__not-support 样式。

默认不兼容处理行为为隐藏,可以设置 Less 变量为 @down-file-not-support-behavior: 'disabled' 表示禁止点击。