前端下载excel文件 三种方式：
1、后端处理好直接返回前端一个链接 前端点链接下载
window.location.href='url'
<a href='url' download=''></a>
2、后端直接将文件流传给前端 前端拿到文件流通过blob处理
html:
<button id="btn">下载excel文档</button>
js:
<script>
var btn = document.getElementById('btn');
btn.onclick = function() {
const xhr = new XMLHttpRequest();
xhr.open('get', 'http://192.168.1.102:3333/');
xhr.send();
xhr.responseType = 'blob'; //设置请求回来的数据为blob方式
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
// 数据在 this.response 保存
// excel 的 MIME 格式为 application/vnd.ms-excel
var blob = new Blob([this.response], {
type: "application/vnd.ms-excel"
});
// 创建a链接 href链接地址 download为下载下来后文件的名称
var aa = document.createElement('a');
aa.href = URL.createObjectURL(blob);
aa.innerHTML = 'a链接';
aa.download = 'aa.xls';
aa.style.display = 'none'; //隐藏a标签 直接调用a标签的点击事件
document.body.appendChild(aa);
aa.click();
}
}
};
</script>
3、后端只需将数据给前端 前端自己生成表格 再使用文件模板形成文件
html:
<button id="btn">下载excel</button>
js:
<script>
//模拟的后端数据：
var data = [{
name: '张三',
sex: '男',
age: 20,
address: '浙江嘉兴',
caddress: '河南开封'
}, {
name: '王五',
sex: '男',
age: 10,
address: '江苏南京',
caddress: '河南洛阳'
}, {
name: '张小黑',
sex: '男',
age: 30,
address: '浙江杭州',
caddress: '山东禹城'
}];
// 从点击按钮开始
var btn = document.getElementById('btn');
btn.onclick = function() {
//动态生成表格
var excel = '<table>';
var tr = `<tr>
<td>name</td>
<td>sex</td>
<td>age</td>
<td>address</td>
<td>caddress</td>
</tr>`;
excel += tr;
for (var i = 0; i < data.length; i++) {
var trr = `<tr>
<td>${data[i].name}</td>
<td>${data[i].sex}</td>
<td>${data[i].age}</td>
<td>${data[i].address}</td>
<td>${data[i].caddress}</td>
</tr>`;
excel += trr;
}
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>';
// 拼接成url格式 作为a链接的href
var url = 'data:application/vnd.ms-excelcharset=utf-8,' + encodeURIComponent(excelFile);
var aa = document.createElement('a');
document.body.appendChild(aa);
aa.href = url;
aa.style.display = 'none';
aa.innerHTML = '链接'
aa.download = '链接.xls';
aa.click();
}
</script>
