AJAX (Asynchronous JavaScript and XML) 是一种在不重新加载整个页面的情况下与服务器交换数据并更新部分网页的技术。虽然名称中包含XML,但现代AJAX请求通常使用JSON格式。
function downloadCSVviaAJAX(url) {
const xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'blob';
xhr.onload = function(e) {
if (this.status === 200) {
const blob = new Blob([this.response], {type: 'text/csv'});
const downloadUrl = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = downloadUrl;
a.download = 'data.csv'; // 设置下载文件名
document.body.appendChild(a);
a.click();
setTimeout(() => {
document.body.removeChild(a);
URL.revokeObjectURL(downloadUrl);
}, 100);
}
};
xhr.send();
}
async function downloadCSVviaFetch(url) {
try {
const response = await fetch(url);
if (!response.ok) throw new Error('Network response was not ok');
const blob = await response.blob();
const downloadUrl = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = downloadUrl;
a.download = 'data.csv';
document.body.appendChild(a);
a.click();
setTimeout(() => {
document.body.removeChild(a);
URL.revokeObjectURL(downloadUrl);
}, 100);
} catch (error) {
console.error('Download failed:', error);
}
}
原因:浏览器同源策略限制 解决方案:
Access-Control-Allow-Origin: *
原因:大文件直接加载到内存可能耗尽资源 解决方案:
原因:服务器未设置Content-Disposition头部 解决方案:
Content-Disposition: attachment; filename="data.csv"
text/csv