前端下载文件get/post

1.get请求

思路:直接a标签跳转,地址栏传参即可,让后端在接口就整好文件,跳转下载

<a
   key="list-loadmore-edit"
   href={'url'}
>
  <Button>下载</Button>
</a>

2.post请求

思路:利用js创建a标签,并设置样式隐藏与下载属性后直接利用js触发a标签,触发完毕后移除a标签

根据后端如果返回的是二进制流文件,那么responseType必须为blob

// 应用下载
export async function downLoadAppPack(params) {
  return request('/SaasBuilderService/pack/app/download', {
    method: 'POST',
    body: params,
    responseType: 'blob'	//确保返回值类型处理成blob对象
  });
}

downLoadAppPack(params).then(res=>{

    const link = doucment.createElement('a')	//创建a标签
    link.style.display = 'none'	//隐藏
    link.href = URL.createObjectURL(res)	//设置a标签href
    link.setAttribute('download',`定义包名.rpk`)	//设置a标签下载属性
    doucment.body.appendChild(link)		//添加a标签
    link.click()	//触发a标签
    doucment.body.removeChild(link)		//移除a标签
    
})

完整写法

通过借助new FileReader创建出来的文件实例中的方法,将 Blob 或者 File 对象转根据特殊的编码格式转化为内容(字符串形式)

readAsText()这个方法是异步的，也就是说，只有当执行完成后才能够查看到结果，如果直接查看是无结果的，并返回undefined

也就是说必须要挂载 实例下的 onload 或 onloadend 的方法处理转化后的结果

onClick={() => {
    let { packageNo, platform, quickAppName } = text
    let parmas = { packageNo, platform, quickAppName }	//获取外部参数,可以忽视
    
    downLoadAppPack(parmas).then(res => {
  		let BLOB = new Blob([res]);
        var reader = new FileReader();
        reader.onload = function (event) {
        	let reg = /"subCode":(.*?),"data"/igs   //正则提取subCode 有返回数组,无返回null
            // 检查是否含有subCode,判断该次请求是否正常
            if (reg.exec(event.target.result)) {
                let obj = JSON.parse(event.target.result)
                if (obj.subCode == '500') {
                    message.error(obj.message)
                }
            } else {
                let url = window.URL.createObjectURL(BLOB);
                let link = document.createElement('a');
                link.style.display = 'none';
                link.href = url;
                link.setAttribute('download', `${fileName}.rpk`);
                document.body.appendChild(link);
                link.click();
            }
        };
        reader.readAsText(BLOB)
    })

3.原生xhr获取响应头里的字段

 	req.open('POST', '/SaasBuilderService/pack/app/download', true);
    req.setRequestHeader("Content-type", "application/json; charset=utf-8");
    req.responseType = 'blob'
    req.onload = function () {
        if (this.status === 200) {
            let res = this.response;  // this.response也就是请求的返回就是Blob对象
            / 获取filename
            let filename = req.getResponseHeader('content-disposition').split(";")[1].split("fileName=")[1];
            let iconv = require('iconv-lite');	//用于转译乱码fileName
            iconv.skipDecodeWarning = true;//忽略警告
            let fileName = iconv.decode(filename, 'utf-8');
            // 二进制流转blob
            let blob = new Blob([res], { type: "application/octet-stream" });
            const link = document.createElement('a')
            link.style.display = 'none'
            link.href = URL.createObjectURL(blob)
            link.setAttribute('download', `${fileName}`)
            document.body.appendChild(link)
            link.click()
            document.body.removeChild(link)
   		}
   }
   req.send(JSON.stringify(parmas));