前端下载和文件下载的几种方式

目前前后端下载方式通常分为两种
第一种:
后端返回文件流，前端自己创建blob对象和A链接下载

第二种:
后端返回可写流，前端直接location.href或者A连接直接下载

第二种无疑对于前端同学更省事，无代码侵入和无感知下载

我今天用node express框架做代码演示、java等其他后端语言大致实现相同
下面将两种下载方式的前后端代码分别展示：

第一种下载方式后端代码：

```javascript
/**
 * 返回前端一个blob可写流，前端需要自己创建a连接下载
 */
 router.post('/downloadFile',  async function (req, res, next) {
    res.setHeader('Content-type', 'application/octet-stream');
    res.setHeader('Content-Disposition', 'attachment;filename=www.pdf');    // 'aaa.txt' can be customized.
    // var fileStream = fs.createReadStream('./www.pdf');
    // fileStream.on('data', function (data) {
    //     res.write(data, 'binary');
    // });
    // fileStream.on('end', function () {
    //     res.end();
    //     console.log('The file has been downloaded successfully!');
    // });
    res.download('./www.pdf');
});

第一种下载方式前端代码：

downloadfromBlob(){
      axios.post('/dev-api/provider-node/ship/downloadFile', {}, {
          responseType: 'blob' 
          /**这里是response的content-type，开始架构师让改res的type，
              我在上面的headers中加了content-type，改的是req的type*/
      }).then((res) => {
              /*此方法为展示图片 start*/
              let imgsrc = window.URL.createObjectURL(res.data)
              /*end*/

              /*此方法为下载文件到本地 start*/
              // let type = 'application/msword'
              // let type = 'application/octet-stream'
              // let type = result.type
              let type = 'application/pdf;chartset=UTF-8'
              // const buf = Buffer.from(result, 'binary')
              let blob = new Blob([res.data], {type: type})
              let fileName = res.headers.filename || '未知文件'
              if (typeof window.navigator.msSaveBlob !== 'undefined') {
                  /*
                  * IE workaround for "HTML7007: One or more blob URLs were revoked by closing
                  * the blob for which they were created. These URLs will no longer resolve as
                  * the data backing the URL has been freed."
                  */
                  window.navigator.msSaveBlob(blob, fileName);
              } else {
                  let URL = window.URL || window.webkitURL
                  let objectUrl = URL.createObjectURL(blob)
                  console.log(objectUrl)
                  if (fileName) {
                      var a = document.createElement('a')
                      // safari doesn't support this yet
                      if (typeof a.download === 'undefined') {
                          window.location = objectUrl
                      } else {
                          a.href = objectUrl
                          a.download = fileName
                          document.body.appendChild(a)
                          a.click()
                          a.remove();
                          console.log(`${fileName} 已下载`);
                      }
                  } else {
                      window.location = objectUrl
                  }
                  /*end*/
              }
      }).catch((err) => {
          console.log(err)
          message.error( '系统错误,请稍后重试');
      });
  },



第二种下载方式后端代码：
```javascript
/**
* 返回前端一个可写流，浏览器访问url自动下载
*/
router.get('/downloadFileFromUrl',  async function (req, res, next) {
  res.setHeader('Content-type', 'application/octet-stream');
  res.setHeader('Content-Disposition', 'attachment;filename=www.pdf');    // 'aaa.txt' can be customized.
  res.setHeader('Transfer-Encoding','chunked');    // 'aaa.txt' can be customized.
  res.setHeader('Connection', 'keep-alive');    // 'aaa.txt' can be customized.
 
  var fileStream = fs.createReadStream('./www.pdf');
  fileStream.on('data', function (data) {
      res.write(data, 'binary');
  });
  fileStream.on('end', function () {
      res.end("success");
      console.log('The file has been downloaded successfully!');
  });

  // res.json({code:200,url:'http://127.0.0.1:8750/www.pdf'})
  // res.download('upload/www.pdf','www.pdf');
});

第二种下载方式前端代码：
前端根据后端返回的url;直接访问后端返回url即可下载，也可使用location.href 获知window.open等方式直接下载
let url = `http://127.0.0.1:8750/ship/downloadFileFromUrl`;
window.location.href = url