前端導(dǎo)出部分:
帶參數(shù)的話可以把參數(shù)寫在url里:const baseURL=`/api/export.json?id=${id}`
fetch(`${baseURL}/`, { // downloadFiles 接口請(qǐng)求地址
? ? ? method: 'post',
? ? ? credentials: 'include',
? ? ? headers: new Headers({
? ? ? ? 'Content-Type': 'application/json',//application/octet-stream 接收二進(jìn)制類型 不限制文件格式
? ? ? ? // 'X-Auth-Token': User.getToken(),//設(shè)置header 獲取token
? ? ? }),
? ? }).then((response) => {
? ? ? console.info(response);
? ? ? response.blob().then((blob) => {
? ? ? ? const blobUrl = window.URL.createObjectURL(blob);
? ? ? ? const aElement = document.createElement('a'); // 獲取a標(biāo)簽元素
? ? ? ? aElement.style = {
? ? ? ? ? display: 'none',
? ? ? ? };
? ? ? ? const filename = 'deviceTemplet.xlsx';// 設(shè)置文件名稱
? ? ? ? aElement.href = blobUrl;// 設(shè)置a標(biāo)簽路徑
? ? ? ? aElement.download = filename;
? ? ? ? aElement.click();
? ? ? ? window.URL.revokeObjectURL(blobUrl);
? ? ? ? aElement.remove();
? ? ? });
后端返回的是Excel文件
前端遇到的問題:報(bào)錯(cuò):文件格式和擴(kuò)展名不匹配,文件可能已損壞
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?會(huì)提示丟失umi.css(但是前端和后端均沒有這個(gè)文件)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?解決的過程中懷疑過Content-Type 但是無論后端怎么設(shè)置 前端在控制臺(tái)這個(gè)接口的response里看到的都是Content-Type:text/html
解決:本地代理出現(xiàn)了問題 少了/api應(yīng)該加上? 平常項(xiàng)目里面用的dva bigfish里面配置了代理/api被取代掉? 所以要在平常的接口前面加上/api 也就是要檢查實(shí)際的接口url是否正確