react ant design pro 调用接口 怎么有个灰色遮罩层
时间: 2023-05-23 20:01:53 浏览: 133
您可以尝试在Ant Design Pro的页面中查找是否有一个叫做loading或者spin的组件,看是否被调用到。如果是的话,您可能需要在请求接口数据前开启loading或者spin,请求成功后关闭loading或者spin。如果这些组件并没有被调用,您可以在接口请求成功后将灰色遮罩层的display属性设置为none。
相关问题
ant design pro + react 导出Excel表格
在 ant design pro + react 中导出 Excel 表格,可以使用 `xlsx` 和 `file-saver` 库。
首先需要安装这两个库:
```
npm install xlsx file-saver --save
```
然后在需要导出 Excel 表格的组件中引入这两个库:
```javascript
import XLSX from 'xlsx';
import { saveAs } from 'file-saver';
```
接下来,需要编写一个函数来将数据转换为 Excel 表格:
```javascript
function exportToExcel(data, fileName) {
const sheetName = 'Sheet1';
const workbook = XLSX.utils.book_new();
const worksheet = XLSX.utils.json_to_sheet(data);
XLSX.utils.book_append_sheet(workbook, worksheet, sheetName);
const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
saveAs(
new Blob([excelBuffer], { type: 'application/octet-stream' }),
`${fileName}.xlsx`,
);
}
```
最后,在需要导出 Excel 表格的事件中调用这个函数即可:
```javascript
handleExportExcel = () => {
const data = [
{ name: 'John Doe', age: 35 },
{ name: 'Jane Doe', age: 30 },
];
exportToExcel(data, 'users');
};
```
这个例子中,我们将一个包含两个用户信息的数组作为数据传入,将文件名设置为 `users`,点击按钮后就会弹出下载 Excel 文件的窗口。
ant design pro + react 导出Excel表格包含图片
要导出Excel表格包含图片,可以使用以下步骤:
1. 安装 `xlsx` 和 `file-saver` 模块。
```
npm install xlsx file-saver --save
```
2. 编写导出Excel表格的函数。
```javascript
import XLSX from 'xlsx';
import FileSaver from 'file-saver';
const exportExcel = (data) => {
const wb = XLSX.utils.book_new();
const ws = XLSX.utils.json_to_sheet(data);
wb.Sheets['Sheet1'] = ws;
// 添加图片
const imgData = 'base64图片数据'; // 替换为实际的图片数据
const img = new Image();
img.src = imgData;
const ctx = document.createElement('canvas').getContext('2d');
ctx.drawImage(img, 0, 0);
const imageData = ctx.canvas.toDataURL('image/jpeg');
const imageBlob = dataURItoBlob(imageData);
const imageFile = new File([imageBlob], 'image.jpg', { type: 'image/jpeg' });
const imageId = XLSX.utils.generate_sheet_image_id();
wb.SheetNames.push('Images');
wb.Sheets['Images'] = {};
wb.Sheets['Images'][imageId] = {
'!type': 'jpeg',
'!data': imageFile,
};
ws['!images'] = [{ id: imageId, start: { row: 0, column: 0 }, end: { row: 0, column: 0 } }];
const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'binary' });
FileSaver.saveAs(new Blob([s2ab(wbout)], { type: 'application/octet-stream' }), 'data.xlsx');
};
// 将Base64图片数据转换为Blob对象
const dataURItoBlob = (dataURI) => {
const byteString = atob(dataURI.split(',')[1]);
const mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
const ab = new ArrayBuffer(byteString.length);
const ia = new Uint8Array(ab);
for (let i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
return new Blob([ab], { type: mimeString });
};
// 将字符串转换为ArrayBuffer
const s2ab = (s) => {
const buf = new ArrayBuffer(s.length);
const view = new Uint8Array(buf);
for (let i = 0; i < s.length; i++) {
view[i] = s.charCodeAt(i) & 0xff;
}
return buf;
};
```
上述代码中,`data` 是要导出的数据数组,`imgData` 是要导出的图片数据,可以替换为实际的图片数据。`exportExcel` 函数将数据和图片添加到Excel工作簿中,并将工作簿下载到本地。
3. 调用导出Excel表格的函数。
```javascript
const data = [
{ name: '张三', age: 18 },
{ name: '李四', age: 20 },
];
exportExcel(data);
```
上述代码中,`data` 是要导出的数据数组,调用 `exportExcel` 函数将数据和图片添加到Excel工作簿中,并将工作簿下载到本地。
以上就是Ant Design Pro + React导出Excel表格包含图片的实现方法。