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

我解决了！更改对话框的类别：

yup.ref("ort")

这是我的CSS：

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

Answer 2

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

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

根据Documentation

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

Answer 4

您只需要向模式component添加全屏标志即可实现全屏。

像下面一样

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

如果不想使用fullScreen，只需删除该fullScreen标志，而无需在此处使用CSS。

全屏打印MaterialUI对话框

4 个答案: