第一种
第一种是后端提供的接口,是一个正好的地址,所以前端是非常的简单的,只需要window.open 或是window.location.assgin( url);
第二种
后端需要你先传筛选条件过去,然后获取到结果;
axios正常写,但是需要注意 要写头部headers与类型responseType!!
然后将文件二进制的格式 通过createObjectURL转为一个可以访问的地址,再创建一个a标签下载下来即可;
axios.get(url, {
headers: {
'content-type': 'application/json; charset=utf-8',
},
responseType: 'blob', // --设置请求数据格式
}).then((res) => {
const url = window.URL.createObjectURL(new Blob([res.data]));
const link = document.createElement('a');
link.style.display = 'none';
link.href = url;
link.setAttribute('download', `${xxxxx}.xlsx`);
document.body.appendChild(link);
link.click();
第三种
纯前端自己写,没有后端接口的情况。将页面的数据进行导出,生成文件
代码:
我这里的data 假设为
data=[
{id:0, text: 'aaaa'},
{id:1, text: 'bbbb'},
]
new Blob 对象,生成二进制的数据流。type类型可选,要生成word excel 都可以。
function Csvexport(data) {
const filename = 'corder.csv';
let csvData = '';
csvData += `${data.map(item => item.text).join(',')}\n`;
const blobData = new Blob([new Uint8Array([0xEF, 0xBB, 0xBF]), csvData], { type: 'text/csv' });
this.downloadRawFile(blobData, filename);
}
然后和第二种的一样,生成一个链接。
function downloadRawFile(blobData, filename) {
console.log(blobData);
if (blobData != null && navigator.msSaveBlob) {
navigator.msSaveBlob(blobData, filename);
return;
}
const link = document.createElement('a');
link.href = window.URL.createObjectURL(blobData);
link.setAttribute('download', filename);
document.body.appendChild(link);
link.click();
window.URL.revokeObjectURL(link.href);
document.body.removeChild(link);
}
第二种与第三种的区别就是 ,有无后端传给前端数据流。第三种就是自己将json数据转换成二进制形式。