post方法下载文件

下载文件,一般后台返回的是文件流。前台如果用的fetch的话,respose里面是空的,什么也看不到。用的axios的话,是一堆字符串形式的东西。

封装请求方法的时候,用 response.headers.get('Content-Type').includes('application/json') 来判断返回结果是不是文件流, 为true的话就不是文件流.

文件的名称要从header里面去取(跨域的时候是取不到的,需要挂nginx)

// 这个是封装请求时获取文件名称的方法

.then((respose) => {

  let filename = '';
         const disposition = response.headers.get('Content-Disposition');
          if (disposition && disposition.indexOf('attachment') !== -1) {
            const filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
            const matches = filenameRegex.exec(disposition);
            if (matches != null && matches[1]) filename = decodeURIComponent(matches[1].replace(/['"]/g, ''));
          }
        const res = {
          data: response.blob(),
          filename,
        };
        return res;

})

// 这个是接口成功之后的操作,需要注意的是,如果接口失败,返回的一定是json字符串,这里要做判断

callback: ((res) => { 

  Promise.resolve(res.data)
          .then((blob) => {
             this.postDownload(blob, res.filename);
          });

})

 

postDownload = (blob, filename) => {
      if (typeof window.navigator.msSaveBlob !== 'undefined') {
        // IE
        window.navigator.msSaveBlob(blob, filename);
      } else {
        const URL = window.URL || window.webkitURL;
        const downloadUrl = URL.createObjectURL(blob);
        if (filename) {
          // use HTML5 a[download] attribute to specify filename
          const a = document.createElement('a');
          // safari doesn't support this yet
          if (typeof a.download === 'undefined') {
            window.location = downloadUrl;
          } else {
            a.href = downloadUrl;
            a.target = '_blank';
            a.download = filename;
            document.body.appendChild(a);
            a.click();
          }
        } else {
          window.location = downloadUrl;
        }
        setTimeout(() => { URL.revokeObjectURL(downloadUrl); }, 100); // cleanup
      }
    },
posted @ 2019-12-26 14:57  浪浪浪浪浪浪浪浪  阅读(6891)  评论(0编辑  收藏  举报