前端处理下载

一，后端文件流的形式（优点：简单）
url=拼接的url（接口url+param参数）
1，window.open(url)
缺陷：有被拦截的可能

2.利用a标签download属性实现下载，href为url

3.利用from实现下载（推荐使用）
直接贴代码

download(url){
            let from=document.createElement('from');
            let iframe=document.createElement('iframe');
            from.style.display=none;
            iframe.style.display=none;
            iframe.name='hide_iframe'
            from.action=url;
            from.method = 'post';
            form.target = 'hide_iframe';
            document.body.appendChild(iframe);
            document.body.appendChild(form).submit();
            document.body.removeChild(form);
}

iframe是处理下载失败的情况

二，后端返回二进制流（优点：方便拿到msg后台的下载成功或失败的提示信息）
1，直接调接口获取content （不需要再封装xhr）
注意 可能存在兼容问题，推荐一个博客地址（有兼容IE10+下载）

  //res 是后台返回的结果
	const content = res.data;
    const blob = new Blob([content]);
    const fileName = "下载文件名"; //下载的文件名称
    const blobUrl = window.URL.createObjectURL(blob);
    download(blobUrl) ;

function download(blobUrl) {
  const a = document.createElement('a');
  document.body.appendChild(a);
  a.style.display = 'none';
  a.download = '<文件名>';
  a.href = blobUrl;
  a.click();
  document.body.removeChild(a);
}

2，或者利用原生的XMLHttpRequest方法实现

//接口地址  url
//请求参数：json字符串   param
function request (url) {
    const req = new XMLHttpRequest();
    req.open('POST', url, true);
    req.responseType = 'blob';
    req.setRequestHeader('Content-Type', 'application/json');
    req.onload = function() {
      const data = req.response;
      const blob = new Blob([data]);
      const blobUrl = window.URL.createObjectURL(blob);
      download(blobUrl) ;
    };
    req.send(param);
  };
function download(blobUrl) {
  const a = document.createElement('a');
   document.body.appendChild(a);
  a.style.display = 'none';
  a.download = '<文件名>';
  a.href = blobUrl;
  a.click();
  document.body.removeChild(a);
}

三.后端返回byte字节
在请求接口时，请求头要加上responseType: ‘blob’

this.$axios.post('/api/xxx', params, {
  responseType: 'blob'
}).then((res) => {
//这里获取到文件字节
	const content = res.data;
    const blob = new Blob([content]);
    const fileName = "下载文件名"; //下载的文件名称
    const blobUrl = window.URL.createObjectURL(blob);
    download(blobUrl) ;
}).catch((err) => {
 
});
function download(blobUrl) {
  const a = document.createElement('a');
  document.body.appendChild(a);
  a.style.display = 'none';
  a.download = '<文件名>';
  a.href = blobUrl;
  a.click();
  document.body.removeChild(a);
}

注意：a.download = ‘<文件名>’; 需要加上后缀，否则可能会造成文件格式问题