前端页面实现导出功能的前后台配合方式

透明技术人

1.链接下载

数据、文件格式全部在后台封装好,返回给前端一个链接,前端通过点击链接自动下载,两种方式:

(1)window.location.href = ‘url’
(2)<a href='url' download=''></a>

2.解析后台返回的文件流

这种方式就是后台将要导出的文件以文件流的方式返回给前端,前端通过blob去解析,再动态创建a标签。
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.接收数据,纯前端实现

这种方式就是后台只需提供对应的数据即可,前端动态生成表格数据,再格式化。

let excel = '<table>';
// 生成表头
let row = '<tr>' +
'<td>标题1</td>' +
'<td>标题2</td>' +
'<td>标题3</td>' +
'</tr>';
excel += row + '</tr>';
// 循环生成表身
for(let i = 0 ; i < this.excelData.length ; i++ ){
    excel += '<tr>';
for(let item in this.excelData[i]){
//增加\t为了不让表格显示科学计数法或者其他格式
if (!this.excelData[i][item]) {
  this.excelData[i][item] = '';
}
excel +=`<td>${ this.excelData[i][item] + '\t'}</td>`;
}
excel +='</tr>';
}
excel += '</table>';
//下载的表格模板数据
var excelFile = '<html xmlns:o="urn:schemas-microsoft-com:office:office" ' +
 'xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40">';
excelFile += '<meta http-equiv="content-type"   content="application/vnd.ms-excel; charset=UTF-8">';
excelFile += '<meta http-equiv="content-type"   content="application/vnd.ms-excel"';
excelFile += ' charset="UTF-8">';
excelFile += '<head>';
excelFile += '<!--[if gte mso 9]>';
excelFile += '<xml>';
excelFile += '<x:ExcelWorkbook>';
excelFile += '<x:ExcelWorksheets>';
excelFile += '<x:ExcelWorksheet>';
excelFile += '<x:Name>';
excelFile += 'sheet';
excelFile += '</x:Name>';
excelFile += '<x:WorksheetOptions>';
excelFile += '<x:DisplayGridlines/>';
excelFile += '</x:WorksheetOptions>';
excelFile += '</x:ExcelWorksheet>';
excelFile += '</x:ExcelWorksheets>';
excelFile += '</x:ExcelWorkbook>';
excelFile += '</xml>';
excelFile += '<![endif]-->';
excelFile += '</head>';
excelFile += '<body>';
excelFile += excel;
excelFile += '</body>';
excelFile += '</html>';
//下载模板
let uri = 'data:application/vnd.ms-excelcharset=utf-    8,' + encodeURIComponent(excelFile);
let link = document.createElement('a');
link.href = uri;
link.style = 'visibility:hidden';
let myDate = new Date();
let time = myDate.toLocaleDateString().split('/').join('-');
link.download = 'fileName' + time + '.xls';
document.body.appendChild(link);
link.click();

  


阅读 1.6k

web前端技术栈八面玲珑来汇总
超实用web前端项目代码段总结
189 声望
1 粉丝
0 条评论
189 声望
1 粉丝
文章目录
宣传栏