二進制文件流上傳和下載 、 react一個style使用多個className名、根據日期得出得周幾

100 阅读1分钟

因爲上傳時間確實有些慢,所以改用二進制流的方式。

上傳:form-data

1.請求添加請求頭**Content-Type: multipart/form-data**
2.將數據格式轉爲from-data
const formDatas = new FormData()
Object.keys(TestData).forEach((key) => { //遍历每个参数 进行添加
if (TestData[key]) {
  formDatas.append(key, TestData[key])
  }
});  

下載: 主要是解析文件流要在請求中添加{ responseType: 'blob' } 此时后台返回的数据会被强制转为blob类型,在Web领域,Blob被定义为包含只读数据的类文件对象。

 var blob = new Blob('\ufeff' + [result.data], { type: 'application/vnd.ms-excel' });
 var url = window.URL.createObjectURL(blob);
 const link = document.createElement('a');
 console.log(blob,url,link);
 link.style.display = 'none';
 link.download =  options.data.fileName+".xls";
 link.href = url;
 link.click()
 document.body.removeChild(link)

其中'\ufeff'是在csv中解決亂碼 , { type: 'application/vnd.ms-excel' }是表示xlsx文件,還需要接其他文件類型的話,就搜索其他文件類型的寫法('\ufeff'是解決csv文件的加在這裏只是爲了方便理解)

在react中使用style多個class名

html中 直接調用class

image.png react jsx中 調用多個用數組

image.png

根據日期得出得周幾:

    let week = [ "Sunday","Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];  
    let getData = new Date(Date.parse(2022-10-25));  
    console.log(week[getData.getDay()]);//得出的就是對應的周幾了