下载文件
IMPORT MODULE

一个基于 blob 的文件下载。

代码演示

基础

下载一个文件。

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

import { DownFileDirective } from '@yelon/abc/down-file';
import { NzButtonModule } from 'ng-zorro-antd/button';

@Component({
  selector: 'components-down-file-simple',
  template: `
    @for (i of fileTypes; track $index) {
      <button nz-button down-file [http-data]="data" http-url="./assets/demo{{ i }}" file-name="demo中文" class="mr-sm">
        {{ i }}
      </button>
    }
  `,
  standalone: true,
  imports: [DownFileDirective, NzButtonModule]
})
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' 表示禁止点击。

Loading...