英文:
Unable to download excel file from dropdown menu using material-ui and reactjs
问题
我试图从公共文件夹 (public/data/User.xlsx) 下载文件，但我无法下载文件。我在此实现中使用了 material-ui 和 react.js。
component.js
import * as React from 'react';
import { Button, Menu, MenuItem } from '@mui/material';
import isEmpty from 'lodash/fp/isEmpty';
import { styled, alpha } from '@mui/material/styles';
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
export default function CustomizedMenus(props) {
const [anchorEl, setAnchorEl] = React.useState(null);
const open = Boolean(anchorEl);
const handleClick = React.useCallback(event => {
setAnchorEl(event.currentTarget);
}, []);
const handleClose = React.useCallback((hRef, fileName) => {
if (!isEmpty(hRef) && !isEmpty(fileName) && fileName !== 'backdropClick') {
const link = document.createElement('a');
link.download = fileName;
link.href = hRef;
link.click();
}
setAnchorEl(null);
}, []);
return (
<div>
<Button
id='customized-button'
aria-controls={open ? 'customized-menu' : undefined}
aria-haspopup='true'
aria-expanded={open ? 'true' : undefined}
variant='contained'
disableElevation
onClick={handleClick}
endIcon={<KeyboardArrowDownIcon />}
>
下载模板文件头
</Button>
<Menu
id='customized-menu'
MenuListProps={{
'aria-labelledby': 'customized-button',
}}
anchorEl={anchorEl}
open={open}
onClose={handleClose}
>
<MenuItem onClick={React.useCallback(() => handleClose('/data/User.xlsx', 'User'))} disableRipple>用户</MenuItem>
<MenuItem onClick={React.useCallback(() => handleClose('/data/Employee.xlsx', '员工'))} disableRipple>员工</MenuItem>
</Menu>
</div>
);
}
这是你提供的代码的中文翻译部分。
英文:
I'm trying to download file from public folder (public/data/User.xlsx) but I'm not able to download file. I'm using material-ui and react.js for this implementation
component.js
import * as React from 'react'
import { Button, Menu, MenuItem } from '@mui/material'
import isEmpty from 'lodash/fp/isEmpty'
import { styled, alpha } from '@mui/material/styles'
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'
export default function CustomizedMenus(props) {
const [ anchorEl, setAnchorEl ] = React.useState(null)
const open = Boolean(anchorEl)
const handleClick = React.useCallback(event => {
setAnchorEl(event.currentTarget)
}, [])
const handleClose = React.useCallback((hRef, fileName) => {
if (!isEmpty(hRef) && !isEmpty(fileName) && fileName !== 'backdropClick') {
const link = document.createElement('a')
link.download = fileName
link.href = hRef
link.click()
}
setAnchorEl(null)
}, [])
return (
<div>
<Button
id='customized-button'
aria-controls={open ? 'customized-menu' : undefined}
aria-haspopup='true'
aria-expanded={open ? 'true' : undefined}
variant='contained'
disableElevation
onClick={handleClick}
endIcon={<KeyboardArrowDownIcon />}
>
Download Template Header
</Button>
<Menu
id='customized-menu'
MenuListProps={{
'aria-labelledby': 'customized-button',
}}
anchorEl={anchorEl}
open={open}
onClose={handleClose}
>
<MenuItem onClick={React.useCallback(() => handleClose('/data/User.xlsx', 'User'))} disableRipple>User</MenuItem>
<MenuItem onClick={React.useCallback(() => handleClose('/data/Employee.xlsx', 'Employee'))} disableRipple>Employee</MenuItem>
</Menu>
</div>
)
}
答案1
得分: 0
I have added file extension to the file name it working as I expected way
错误:
<MenuItem onClick={React.useCallback(() => handleClose('/data/User.xlsx', 'User'))} disableRipple>User</MenuItem>
<MenuItem onClick={React.useCallback(() => handleClose('/data/Employee.xlsx', 'Employee'))} disableRipple>Employee</MenuItem>
解决方案:
<MenuItem onClick={React.useCallback(() => handleClose('/data/User.xlsx', 'User.xlsx'))} disableRipple>User</MenuItem>
<MenuItem onClick={React.useCallback(() => handleClose('/data/Employee.xlsx', 'Employee.xlsx'))} disableRipple>Employee</MenuItem>
英文:
I have added file extension to the file name it working as I expected way
Error:
<MenuItem onClick={React.useCallback(() => handleClose('/data/User.xlsx', 'User'))} disableRipple>User</MenuItem>
<MenuItem onClick={React.useCallback(() => handleClose('/data/Employee.xlsx', 'Employee'))} disableRipple>Employee</MenuItem>
Solution:
<MenuItem onClick={React.useCallback(() => handleClose('/data/User.xlsx', 'User.xlsx'))} disableRipple>User</MenuItem>
<MenuItem onClick={React.useCallback(() => handleClose('/data/Employee.xlsx', 'Employee.xlsx'))} disableRipple>Employee</MenuItem>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论