vue Blob 实现文件下载功能

  $({
        methods: 'get',
        url: `......`,
        responseType: 'blob'
      })        .then(res => {
          let fileName = decodeURI(
            res.headers['content-disposition'].split(`filename*=UTF-8''`)[1] /此处根据实际返回下载文件名称分割
          );
          let blob = new Blob([res.data], {
            type: res.headers['content-type']  //根据返回文件类型
          });
          if (window.navigator.msSaveOrOpenBlob) {
            navigator.msSaveBlob(blob, fileName);
          } else {
            // 非IE下载
            const elink = document.createElement('a');
            elink.style.display = 'none';
            elink.href = URL.createObjectURL(blob);
            elink.download = fileName;
            document.body.appendChild(elink);
            elink.click();
            setTimeout(() => {
              URL.revokeObjectURL(elink.href); // 释放URL 对象
              document.body.removeChild(elink);
            }, 5000);  //解决部分浏览器下载时“无此文件”问题
          }
        })
        .catch(function(error) {
          console.log(error);
        });

你可能感兴趣的:(vue,下载)