我想打印模型盒

Question

我想打印页面的模型框，但没有打印按钮本身。我已经尝试过这段代码，但它没有用。我是新来的反应。帮助。

代码如下：

import React from "react";
import "./Bill.css";
import logo from "./images/logo.png";
import { Link, useHistory } from "react-router-dom";
import ClientDashboard from "./ClientDashboard";
import BillTable from "./BillTable";

function Bill() {
  const history = useHistory();

  const logout = (e) => {
    localStorage.removeItem("token");
    history.push("/");
  };

  if (!localStorage.getItem("token")) {
    history.push("/");
  }

  return (
    <div className="modal__bill">
      <div className="bill__navbar">
        <Link to="/clientdashboard" className="header__link">
          <img className="navbar__logo" src={logo} alt="logo" />
        </Link>
      </div>
      <div className="box">
        <BillTable />
        <button className="print__button" onClick={() => window.print()}>
          Print
        </button>
      </div>
    </div>
  );
}

export default Bill;

Answer 1

你试过用css隐藏按钮吗？

How do I hide an element when printing a web page?

在你的情况下，你可以添加

@media print {
  .print__button {
    display: none !important;
  }
}