down-file 下载文件

down-file 下载文件

一个基于 blob 的文件下载。

依赖

yarn add file-saver

import { DownFileModule } from '@delon/abc/down-file';

代码演示

基础

下载一个文件。

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

API

down-file

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

常见问题

文件名获取顺序

file-name
content-disposition 的 filename*、filename
header 参数 filename、x-filename

兼容性

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

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