1.第一种方法是前后端的接口只给了一个API请求:
前端第一个实现是使用a标签,
<a href="/downloadfilerouter"></a>
前端第二个实现是使用一个div标签,使用click事件,创建一个a标签
<div name="downloadfile" οnclick="downloadFileFunction()">DownLoader</div>
function downloadFileFunction() {
let a = document.createElement('a');
a.href = '/downloadfilerouter';
a.click();
}
后端使用nodejs,我在这里把下载的文件固定了,也可以自己传人一个变量进入,在这里需要导入两个模块
var fs = require('fs');
var path = require('path');
router.get('/downloadfilerouter', function (req, res, next) {
var filename = 'desktop.ini';
var filepath = path.join(__dirname, '../uploader/' + filename);
var stats = fs.statSync(filepath);
if (stats.isFile()) {
res.set({
'Content-Type': 'application/octet-stream',
'Content-Disposition': 'attachment; filename=' + filename,
"Content-Length": stats.size
});
fs.createReadStream(filepath).pipe(res);
} else {
res.end(404);
}
});
<a name="download" (click)="downloadfile()"></a>
downloadfile(){
this.filecontent = "this is my file content";
this.url = "localhost:8000/home/home/file.txt";
let a = document.createElement('a');
a.href = "data:text/json;charset=utf-8,"+ this.filecontent;
a.download = "myfilename";
a.click();
}
3.第三种方法和第一种类似,只是创建的是一个iframe,有兴趣可以尝试一下
<a name="download" (click)="downloadfile()"></a>
downloadfile(){
this.url = "localhost:8000/home/home/file.txt";
let elem = document.createElement('iframe');
elem.src = url;
elem.style.display = 'none';
document.body.appendChild(elem);
}
前两种方法详见:https://github.com/webPageDev/Demo