Material-UI CSV/PDF 使用“@mui/x-data-grid”模块打印导出不起作用
Material-UI CSV/PDF Print Export does not work using "@mui/x-data-grid" module
这可能是一个愚蠢的问题，但我很困惑，除非我遗漏了什么，否则这没有意义。我想使用导出选项将我的数据打印为 PDF，因为根据文档，每个人都可以使用，但是我看不到该选项，我只能看到 CSV 选项？
在他们的示例中，他们可以访问 CSV 和 Print
MUI - Export
我还检查了他们的代码，看看他们是否“添加”了一些额外的东西，但这似乎是完全正常的，他们甚至使用的是普通代码，而不是专业版
即使他们使用的是 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
package.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 应该是 "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中创建的演示link是here
在撰写本文时，我所知道的关于 "@mui/x-data-grid" 的唯一可用版本是 "5.0.0-beta.5" 和 "5.0.0-beta.4" 版本，您可以使用它来实现 CSV/Print 导出。
如何安装支持 CSV/PDF 导出的 "@mui/x-data-grid" 正确版本？
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
这可能是一个愚蠢的问题，但我很困惑，除非我遗漏了什么，否则这没有意义。我想使用导出选项将我的数据打印为 PDF，因为根据文档，每个人都可以使用，但是我看不到该选项，我只能看到 CSV 选项？
在他们的示例中，他们可以访问 CSV 和 Print MUI - Export
我还检查了他们的代码，看看他们是否“添加”了一些额外的东西，但这似乎是完全正常的，他们甚至使用的是普通代码，而不是专业版
即使他们使用的是 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
package.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 应该是 "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中创建的演示link是here
在撰写本文时，我所知道的关于 "@mui/x-data-grid" 的唯一可用版本是 "5.0.0-beta.5" 和 "5.0.0-beta.4" 版本，您可以使用它来实现 CSV/Print 导出。
如何安装支持 CSV/PDF 导出的 "@mui/x-data-grid" 正确版本？
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