css - 全屏打印 MaterialUI 对话框

Question

我是 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？

Answer 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;
    }
}

Answer 2

要打印对话框内的 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;
    }
}

Answer 3

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

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

如文档中所述

Answer 4

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

像下面

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

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