javascript - React - 打印按钮不适用于所有计算机

Question

在我的 React 项目中，我创建了一个包含分析摘要的单页结构。之所以是单页，是因为该页适合打印。

页面底部有一个打印按钮。单击此按钮应打开打印窗口 (CTRL + P)。页面结构没有问题。但是，问题是当我们从不同的计算机上尝试时，有些计算机会打开这个窗口，有些则不会。

起初，我们认为原因是杀毒程序，但我们试过的一台没有杀毒软件的电脑也没有打开打印窗口。

这可能是什么原因，我们该如何解决？

main_page.js

<div style={{marginLeft: "40%"}}>
                <SessionTableButton id={firminfo} scoring={scoring} ... statement={statement} dname={dname}/>
            </div>

会话表.js

...

export default function SessionTableButton({ id ,scoring,...,statement, dname}) {
    const [ showPrint, toggleShowPrint ] = useReducer(a => !a, false);

    return <td>

        <Button type="button"  className="text-white" style={{background:"#795D9C"}} onClick={toggleShowPrint}>
            <FaPrint style={{marginRight:"10px"}}/> Get the Report
        </Button>

        {
            showPrint && <Modal  size="lg" isOpen toggle={toggleShowPrint}>
                <ModalHeader className="text-center" toggle={toggleShowPrint}>
                    <b>Report</b>
                </ModalHeader>
                <ModalBody>
                    <SessionTable
                        id={id} 
                        scoring={scoring}
                        altmanzscoring={altmanzscoring}
                        ...
                    />
                </ModalBody>
            </Modal>
        }
    </td>;
}
export function SessionTable({ id,scoring,...,statement, dname }) {
    const ref = useRef();
...
const print = useCallback(function() {
        const win = window.open('about:blank', '', 'scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no,width=0,height=0,left=-1000,top=-1000');

        const styleSheet = document.createElement("style");
        styleSheet.type = "text/css";
        styleSheet.innerHTML = `
            @media print{ @page {size: landscape; margin: 0mm;} }
            .comma > span:not(:last-child)::after { content: ', '; }
            body { padding: 5mm; }
            h3, h4 { text-align: center; }
            button { display: none }
            table { border-collapse: collapse; width: 100%; }
            td, th { border: solid 1px #000; padding: 5px 5px; }
            .min { width: 20%; }
            .min2 { width: 1% !important; }
        `;

        win.document.head.appendChild(styleSheet);

        win.document.body.innerHTML = ref.current.innerHTML;
        win.print();
        win.close();
    }, [ref]);
    ...
    ...
        <Button type="button"  className="text-white" style={{background:"#795D9C"}}  outline block onClick={print}><i className="fas fa-print" /></Button>

标签： javascriptreactjs