node 项目
// 依赖string-to-file-stream 包,字符串生成文件流
const string2fileStream = require('string-to-file-stream');
/**
* Post 请求 下载图标
*
* */
@Post('/api/downloadSvg')
async downloadSvg(req, res) {
const id = req.body.id;
try {
// 数据库中读取图标
const searchResult = await SvgFileProcess.find({_id: ObjectID(id)})
if (searchResult.length > 0) {
// 设置请求返回头
res.set({
'Content-Type': 'application/octet-stream',
'Content-Disposition': 'attachment; filename=' + searchResult[0]['file_name'],
})
// 返回文件流
string2fileStream(searchResult[0]['show_svg']).pipe(res)
}
} catch(err) {
console.log('获取当前用户上传图标错误', err)
res.send({
code: -1,
data: [],
msg: '获取当前用户上传图标错误'
})
}
}
前端项目
// 采用axios发送请求
axios.post('/api/downloadSvg', {id}, {
responseType: 'blob'
}).then((res) => {
console.log('res', res);
const blob = res.data;
const reader = new FileReader();
reader.readAsDataURL(blob);
reader.onload = (e) => {
const a = document.createElement('a');
a.download = fileName;
// 后端设置的文件名称在res.headers的 "content-disposition": "form-data; name=\"attachment\"; filename=\"20181211191944.zip\"",
a.href = e.target.result;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
};
}).catch((err) => {
console.log(err.message);
});
// 采用fetch 发送请求
fetch(`/api/downloadSvg`, {
method: 'POST',
body: JSON.stringify({
id
}),
headers: {
'content-type': 'application/json;charset=UTF-8',
}
}).then(res => res.blob().then(blob => {
console.log(res)
var a = document.createElement('a');
var url = window.URL.createObjectURL(blob);
a.href = url;
a.download = fileName;
a.click();
window.URL.revokeObjectURL(url);
}))
参考:https://www.jianshu.com/p/cbd0d1129b89