Angularjs 无法在nodejs中下载大型文件
我有一个构建csv文件并将其返回给用户的服务。目前正在使用expressjs v4.14、nodejs v8.7.0。我的问题是,当我调用chrome服务创建一个大型csv文件时,由于chrome中的“网络错误”,下载失败。对于较小的文件,该服务工作正常。我还可以浏览到Angularjs 无法在nodejs中下载大型文件,angularjs,node.js,express,Angularjs,Node.js,Express,我有一个构建csv文件并将其返回给用户的服务。目前正在使用expressjs v4.14、nodejs v8.7.0。我的问题是,当我调用chrome服务创建一个大型csv文件时,由于chrome中的“网络错误”,下载失败。对于较小的文件,该服务工作正常。我还可以浏览到/temp/文件夹,并且整个预期文件都存在。在每一个“我尝试过的事情”中,我都能下载较小的文件,但不能下载较大的文件 服务: download.post('/csv', (req, res, next) => {
/temp/
文件夹,并且整个预期文件都存在。在每一个“我尝试过的事情”中,我都能下载较小的文件,但不能下载较大的文件
服务:
download.post('/csv', (req, res, next) => {
res.status(200).header('Content-Type', 'text/csv');
const newUUID = uuid.v1();
let ws: WriteStream = fs.createWriteStream(`${__dirname}/../../temp/${newUUID}.csv`);
ws.on('finish', () => {
res.download(`${__dirname}/../../temp/${newUUID}.csv`);
});
//csv file built here
ws.write('huge stuff easily 50k rows and 10 mb file');
ws.end();
});
Chrome错误:
download.post('/csv', (req, res, next) => {
res.status(200).header('Content-Type', 'text/csv');
const newUUID = uuid.v1();
let ws: WriteStream = fs.createWriteStream(`${__dirname}/../../temp/${newUUID}.csv`);
ws.on('finish', () => {
res.download(`${__dirname}/../../temp/${newUUID}.csv`);
});
//csv file built here
ws.write('huge stuff easily 50k rows and 10 mb file');
ws.end();
});
Chrome的网络标签和开发者控制台并没有告诉我发生了什么。这个下载弹出窗口是我得到的全部。为了以防万一,我清除了cookies/缓存中的所有内容,但这并没有起到任何作用
我尝试过的事情:
download.post('/csv', (req, res, next) => {
res.status(200).header('Content-Type', 'text/csv');
const newUUID = uuid.v1();
let ws: WriteStream = fs.createWriteStream(`${__dirname}/../../temp/${newUUID}.csv`);
ws.on('finish', () => {
res.download(`${__dirname}/../../temp/${newUUID}.csv`);
});
//csv file built here
ws.write('huge stuff easily 50k rows and 10 mb file');
ws.end();
});
- 将块直接写入响应流李>
- 使用可读流,将字符串转换为字节并将其管道化李>
- 在本地创建文件(writestream)并将其流式处理(将流式处理管道读入res)
- writestream创建本地文件结束后的res.download(文件)
download.post('/csv', (req, res, next) => {
res.status(200).header('Content-Type', 'text/csv');
const newUUID = uuid.v1();
let ws: WriteStream = fs.createWriteStream(`${__dirname}/../../temp/${newUUID}.csv`);
ws.on('finish', () => {
res.download(`${__dirname}/../../temp/${newUUID}.csv`);
});
//csv file built here
ws.write('huge stuff easily 50k rows and 10 mb file');
ws.end();
});
最后尝试了邮递员的服务,效果很好,所以我认为这是angularjs的问题
Angularjs
$http({
cache: false,
url: "/download/csv",
headers: {
'accept': 'text/csv'
},
method: 'POST',
data: {
rows: rows,
title: title ? title : ''
}
}).success(function (data, status, headers, config) {
var anchor = angular.element('<a/>');
anchor.attr({
href: 'data:attachment/csv;charset=utf-8,' + encodeURI(data),
target: '_blank',
download: 'csv_info.csv'
})[0].click();
}).error(function (data, status, headers, config) {
});
$http({
cache:false,
url:“/download/csv”,
标题:{
“接受”:“文本/csv”
},
方法:“POST”,
数据:{
行:行,
标题:标题?标题:“”
}
}).success(函数(数据、状态、标题、配置){
var anchor=角度元素(“”);
anchor.attr({
href:'data:attachment/csv;charset=utf-8,'+encodeURI(数据),
目标:“\u blank”,
下载:“csv_info.csv”
})[0]。单击();
}).error(函数(数据、状态、标题、配置){
});
原来是angularjs中创建的锚定标记的href
属性的限制。这是通过以下方法解决的: