Material-UI CSV/PDF 打印导出无法使用“@mui/x-data-grid”模块工作

Question

这可能是一个愚蠢的问题，但我很困惑，除非我错过了一些东西，否则这没有意义。我想使用导出选项将我的数据打印为 PDF，因为根据文档，每个人都可以使用该选项，但是我看不到该选项，我只能看到 CSV 选项？

在他们的示例中，他们可以访问 CSV 和打印 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

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"
    ]
  }
}

Answer 1

解决方案：

您需要更新您的

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 中创建的演示，链接是这里

在撰写本文时，我所知道的唯一可用于实现 CSV/打印导出的工作版本是

"@mui/x-data-grid"

和

"5.0.0-beta.5"

。

如何安装支持 CSV/PDF 导出的正确版本的

---

"5.0.0-beta.4"

？"@mui/x-data-grid"

如果安装所需依赖项后遇到问题，我需要做什么？

yarn add @mui/[email protected] or npm i @mui/[email protected]

作为参考，您也可以浏览此

Github Repo

Answer 2