文件下载的三种方式，前端和后端实现

使用文件的下载功能，在这里分享一下：

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);
    }
});

2.第二种是定义的接口不是下载文件的路径，而是通过API可以获得文件的内容，由前端把内容写入到文件中，这种方法是通过获取文件信息，在网页上利用click事件，创建一个文件，然后将文件信息写入到文件中，然后保存
<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