全屏打印 MaterialUI 对话框答案

【问题标题】：Print MaterialUI Dialog fullscreen全屏打印 MaterialUI 对话框
【发布时间】：2020-05-13 09:26:18
【问题描述】：

我是 React 和 Material-UI 的新手，我想打印我当前的对话框。

问题是我无法找到一种方法来最大化我的对话框以进行打印（设置为全屏），而无需在浏览器中执行它。所以我基本上希望在我的浏览器中有一个更小的对话框，并且对话框的最大尺寸。

这是我在 TSX 中的基本代码：

import React, { Component} from 'react';
import { Button, Dialog } from '@material/core';

export default class MUITester extends Component {

 render(){
   return (
      <Dialog fullScreen={false}>
        <div>
          <Button onClick={() => window.print()}>
            PRINT            
          </Button>
         </div>
       </Dialog> 
     );
   }

以及对应的css文件：

@media print {
   .print {
       fullScreen=true;
       color: blue;
    }  
}

我可以使用 css 解决它吗？还是我必须使用 React/Material-UI？

【问题讨论】：

所以你不想使用Dialog组件的fullScreen prop？或者你想达到什么目的？
我试图将fullScreen 属性设置为真，只有当我像@media print { .print { fullScreen : true; color: blue; } } 一样打印并且在浏览器中它应该为假时。

标签： css reactjs material-ui react-tsx

【解决方案1】：

我解决了！更改Dialog的类：

<Dialog classes={{paperFullScreen: "prePrint printDialog"}} fullScreen>

这是我的css：

.prePrint {
    height: auto !important;
    max-width: 600px !important;
}

/*Print Dialog*/
@media print {

    .printDialog {
        max-width: 100% !important;
    }
}

【讨论】：

【解决方案2】：

您可以像这样设置对话框的宽度：

<Dialog  fullWidth={true} maxWidth='md'>
    <div>
      <Button onClick={() => window.print()}>
        PRINT            
      </Button>
     </div>
    </Dialog>

如Documentation中所述

【讨论】：

【解决方案3】：

要打印对话框中的div，请使用下面的代码，并添加css

import React, { Component} from 'react';
import { Button, Dialog } from '@material/core';

export default class MUITester extends Component {

 render(){
   return (
      <Dialog classes={{paperFullScreen: "prePrint"}} fullScreen>
        <div id="DialogPrint">
           some text some text , some paragraph and so on 
         </div>
         
          <div >
              <Button onClick={() => window.print()}>
                PRINT            
              </Button>
         </div>
         
       </Dialog> 
     );
   }
}

在css中添加以下代码

.prePrint {
    height: auto !important;
    max-width: 600px !important;
}

/*Print Dialog*/
@media print {
    body * {
        visibility: hidden;
    }
    #DialogPrint,
    #DialogPrint * {
        visibility: visible;
    }
    #DialogPrint {
        position: absolute;
        left: 0;
        top: 0;
    }
}

【讨论】：

【解决方案4】：

您只需在模态component 中添加fullScreen 标志即可实现全屏。

如下图

<Dialog fullScreen open={open} onClose={handleClose} TransitionComponent={Transition}>

如果您不想使用 fullScreen，只需删除该 fullScreen 标志并且不需要在此处使用 CSS。

【讨论】：