vue版 文件下载

标签的download： 是HTML5标准新增的属性，作用是指示浏览器下载URL而不是导航到URL，因此将提示用户将其保存为本地文件。

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

downloadFile(content, filename) {
    filename = filename || 'license';
    const blob = new Blob([content]);
    if (window.navigator.msSaveOrOpenBlob) { // 兼容IE10
        navigator.msSaveBlob(blob, filename);
    } else {                                 // 非IE
        let aTag = document.createElement('a');
        aTag.download = filename;
        aTag.href = URL.createObjectURL(blob);
        aTag.click();
        URL.revokeObjectURL(aTag.href);
    }
}

axios处理：我们发送请求的时候一定要写上responseType，{responseType:'arraybuffer'} 否则下载下来的文件打不开

axios.post('/fileSys/download', {
     fileId: 'xxx'
  },{
     responseType:'arraybuffer'
  }).then({
     downloadFile(res.data.file, res.data.fileName);
  }).catch(function (error) {
     console.log(error)
  })

文件上传：利用ES6的fromData来实现

function uploadFile (file) {
    let formdata = new FormData()
    formdata.append('file', file)
    formdata.append('submit', false)
    let config = {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }
    axios.post('/sysFile/upload', formdata, config).then(this.sendFileSucc)
}

 附：正常文件流下载（借助 xmlHttpRequest2）

/**
* @url {String}: 下载请求路径
* @filename {String}: 文件名
**/
function downByUrl(url,filename) {
     filename = filename || 'omc.lic';
     var req = new XMLHttpRequest();
     req.open("GET", url, true);
     //监听进度事件
     req.addEventListener("progress", function (evt) {
          if (evt.lengthComputable) {
              var percentComplete = evt.loaded / evt.total;
              console.log(percentComplete);
          }
      }, false);

      req.responseType = "blob";
      req.onreadystatechange = function () {
          if (req.readyState === 4 && req.status === 200) {
              if (typeof window.chrome !== 'undefined') {
                  // Chrome version
                  var link = document.createElement('a');
                  link.href = window.URL.createObjectURL(req.response);
                  link.download = filename;
                  link.click();
              } else if (typeof window.navigator.msSaveBlob !== 'undefined') {
                  // IE version
                  var blob = new Blob([req.response], { type: 'application/force-download' });
                  window.navigator.msSaveBlob(blob, filename);
              } else {
                  // Firefox version
                  var file = new File([req.response], filename, { type: 'application/force-download' });
                  window.open(URL.createObjectURL(file));
              }
          }
     };
     req.send();
}