reactjs - Material-UI CSV/PDF 打印导出无法使用“@mui/x-data-grid”模块
问题描述
这可能是一个愚蠢的问题,但我很困惑,除非我遗漏了什么,否则这没有任何意义。我想使用导出选项将我的数据打印为 PDF,因为根据文档,每个人都可以使用,但是我看不到该选项,我只能看到 CSV 选项?
而在他们的示例中,他们可以访问 CSV 和 Print MUI - 导出
我还检查了他们的代码,看看他们是否“添加”了一些额外的东西,但似乎完全正常,他们甚至使用的是普通的而不是 pro
即使他们使用的是专业版,也可以选择专业版和免费版。
我错过了什么,它不再可用了吗?这就是我所拥有的,我没有错过任何东西......
更新我刚刚删除了我没有使用的所有内容,但仍然无法正常工作
import React, {useState} from 'react'
import {DataGrid, GridToolbar} from '@mui/x-data-grid';
function VerPedidos() {
const data = JSON.parse(window.localStorage.getItem("verpedidos"))
let librosData = data[0].data
const [pageSize, setPageSize] = useState(10);
const [selectionModel, setSelectionModel] = useState([]);
const columns = [
{ field: 'descripcion', headerName: 'Descripción', width: 450 },
{field: 'tipo', headerName: 'Tipo', width: 150},
{field: 'editorial', headerName: 'Editorial', width: 100},
{field: 'precio', headerName: 'Precio', width: 100, align: 'right', sortable: false,
valueFormatter: (params) => {
return `$${params.value}`;
}}
]
return (
<DataGrid
rows={librosData}
columns={columns}
autoHeight
pageSize={pageSize}
onPageSizeChange={(newPageSize) => setPageSize(newPageSize)}
rowsPerPageOptions={[5, 10, 20]}
components={{
Toolbar: GridToolbar,
}}
/>
)
}
export default VerPedidos
包.json
"name": "venta_de_libros",
"version": "0.1.0",
"private": true,
"dependencies": {
"@emotion/react": "^11.4.1",
"@emotion/styled": "^11.3.0",
"@material-ui/core": "^4.12.3",
"@material-ui/data-grid": "^4.0.0-alpha.37",
"@material-ui/icons": "^4.11.2",
"@mui/icons-material": "^5.0.1",
"@mui/material": "^5.0.4",
"@mui/styled-engine-sc": "^5.0.0",
"@mui/styles": "^5.0.1",
"@mui/x-data-grid": "^5.0.0-beta.5",
"@mui/x-data-grid-generator": "^5.0.0-beta.4",
"@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^11.2.7",
"@testing-library/user-event": "^12.8.3",
"devextreme": "21.1.5",
"devextreme-react": "21.1.5",
"firebase": "^8.10.0",
"material-table": "^1.69.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^5.2.1",
"react-scripts": "4.0.3",
"react-select": "^4.3.1",
"styled-components": "^5.3.1",
"web-vitals": "^1.1.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
解决方案
解决方案:
您需要更新package.json
依赖项。你需要在你的包中有这个依赖项
{
// Other package.json code ...
"dependencies": {
"@emotion/react": "11.5.0",
"@emotion/styled": "11.3.0",
"@mui/icons-material": "5.0.4",
"@mui/material": "5.0.4",
"@mui/styles": "5.0.1",
"@mui/x-data-grid": "5.0.0-beta.5",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-scripts": "4.0.0"
},
// Other package.json code ...
}
请特别注意依赖项的版本,@mui/x-data-grid
它应该是 version "5.0.0-beta.5
。
我还建议从您package.json
的 '
"@material-ui/core": "^4.12.3",
"@material-ui/data-grid": "^4.0.0-alpha.37",
"@material-ui/icons": "^4.11.2",
即使没有上述依赖项,您的打印导出仍然可以工作。我还看到您正在使用“@mui/material”,所以我认为您不需要这些依赖项。
您也可以播放我在 CodeSandbox 中创建的演示,链接在这里
在撰写本文时,我所知道的唯一"@mui/x-data-grid"
可用于实现 CSV/打印导出的工作版本是 version"5.0.0-beta.5"
和"5.0.0-beta.4"
.
如何安装"@mui/x-data-grid"
支持 CSV/PDF 导出的正确版本?
yarn add @mui/x-data-grid@5.0.0-beta.5 or npm i @mui/x-data-grid@5.0.0-beta.5
如果在安装这些所需的依赖项后出现问题,我需要做什么?
Most package or dependencies related Issues if it's not due to network can be resolve by deleting node_modules folder and lock files (package-lock.json or yarn.lock) and installing all dependencies again by running npm install or yarn
作为参考,你也可以浏览这个Github Repo
推荐阅读
- laravel - laravel API 资源。删除请求会话已过期。仅获取方法工作
- python - 我可以直接在列表或矩阵上应用 exp 函数吗?
- javascript - XMLHttpRequest 在 WordPress 中不起作用
- sql - SQL SERVER 按月分组日期时间戳
- arguments - 将参数传递给 Colab .ipynb 脚本
- django - 如何在 Django Admin 中显示数据
- kubernetes - 如何在 kubernetes 仪表板中将基本身份验证模式设置为基于令牌?
- html - 如何在标准 html 中显示文本
- c - 信号处理程序不处理信号
- android - 如何在自定义视图 Android 中实现沿 3 个轴的引导运动(用于各种切换)?