Bootstrap

前端实现Excel导出的三种方式

1.点击链接
数据、文件格式全部在后台封装好,返回给前端一个链接,前端通过点击链接自动下载,两种方式:
(1)window.location.href = ‘url’
(2)直接调用后端给的接口

2.解析后台返回的文件流
这种方式就是后台将要导出的文件以文件流的方式返回给前端,前端通过blob去解析,再动态创建a标签。


```javascript
let content = res.data; // 文件流
let blob = new Blob([content]);
let fileName = 'filename.xls';
	if ('download' in document.createElement('a')) {  // 非IE下载
    let link = document.createElement('a');
    link.download = fileName;
    link.style.display = 'none';
    link.href = URL.createObjectURL(blob);
    document.body.appendChild(link);
    link.click();
    URL.revokeObjectURL(link.href) ; // 释放URL 对象
    document.body.removeChild(link);
} else {  // IE10+下载
  navigator.msSaveBlob(blob);
}
3.接收数据方式,纯前端实现
这种方式就是后台只需提供对应的数据即可,前端动态生成表格数据,再格式化。

```javascript
let excel = '';
// 生成表头
let row = '' +
  '' +
  '' +
  '' +
  '';
excel += row + '';
// 循环生成表身
for(let i = 0 ; i < this.excelData.length ; i++ ){
  excel += '';
  for(let item in this.excelData[i]){
    //增加\t为了不让表格显示科学计数法或者其他格式
    if (!this.excelData[i][item]) {
      this.excelData[i][item] = '';
    }
    excel +=``;
  }
  excel +='';
}
excel += '
标题1	标题2	标题3
${ this.excelData[i][item] + '\t'}
';
//下载的表格模板数据
var excelFile = '';
excelFile += '';
excelFile += '
;