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

}

巴特西

vue版文件下载

最新文章

热门文章

巴特西

vue版 文件下载

最新文章

热门文章

vue版文件下载