Question 205914 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How I Print a page or file without asking by window popup of print?

How i create the print button in JSX code of ReactJs for printing a page or PDF files direct print from the printer onClick without asking any Destination, pages, layout, color or any setting throw the window popup?

I’m expecting full example of JSX code to print the bus ticket or movie ricket directfrom the printer I Don’t want this window popup for printing my page or any fileswithout asking by window popup!

// import { useRef } from "react";
import React from "react";
import styles from "../Components/ReactPdfPrint.module.css";
import "bootstrap/dist/css/bootstrap.min.css";

const handlePrint = () => {
};

const ReactPdfPrint = () => {
  return (
    <>
      <div className={styles.ticket}>
        <img src="./ticketLogo.jpg" alt="Logo" height="30px" width="30px" />
        <p className={styles.centered}>
          RECEIPT EXAMPLE
          <br />
          Address line 1
          <br />
          Address line 2
        </p>
        <table>
          <thead>
            <tr>
              <th className={styles.quantity}>Q.</th>
              <th className={styles.description}>Description</th>
              <th className={styles.price}>$$</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td className={styles.quantity}>1.00</td>
              <td className={styles.description}>ARDUINO UNO R3</td>
              <td className={styles.price}>$25.00</td>
            </tr>
            <tr>
              <td className={styles.quantity}>2.00</td>
              <td className={styles.description}>JAVASCRIPT BOOK</td>
              <td className={styles.price}>$10.00</td>
            </tr>
            <tr>
              <td className={styles.quantity}>1.00</td>
              <td className={styles.description}>STICKER PACK</td>
              <td className={styles.price}>$10.00</td>
            </tr>
            <tr>
              <td className={styles.quantity} />
              <td className={styles.description}>TOTAL</td>
              <td className={styles.price}>$55.00</td>
            </tr>
          </tbody>
        </table>
      </div>
      <p className="centered">
        Thanks for your purchase!
        <br />
        partible.me/blog
      </p>
      <button id="btnPrint" className={styles.container} onClick={handlePrint}>
        Print
      </button>
    </>
  );
};

export default ReactPdfPrint;
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I have researched so much in the last few days and have given my enough head in that issue. What I'm trying to achieve is to print directly from web using a print button. I don't want to browser print popup to appear. There will be 2 printers attached to my web application and I want the printer selection automatically.

    And i Got the solution, If the web application you're making will be run in a controlled environment (where you manage which browsers access it and how they're configured), you can fairly easily do this.

    Chrome Firstly, go to chrome://settings/ and change your home page to the web application. Next, make a shortcut for the Chrome browser on your desktop then right click on it to open the properties window. In the 'Target' input field, add --kiosk --kiosk-printing to the end of the location. Apply the changes, close all Chrome windows and click on the shortcut. This should put you in full screen (kiosk mode) and when you attempt t print, it should automatically print on the default printer without a pop-up window being displayed.

    FireFox On FireFox, go to about:config and agree to any warning messages. Then, right click somewhere on the page and create a "New -> Boolean". It will prompt you for a name and a state. For the name, enter print.always_print_silent and for the state, set it to true. Then you will need to save changes and restart any FireFox windows you have open. If you attempt to print something, it will no longer require the pop-up window to be displayed and will automatically print on the default printer.

    With either of these browsers configured in this way, you can use the standard window.print(); JavaScript method to print without needing any kind of server-side interaction. CLCIK HERE


  2. 0

    To create a print button in JSX code that allows for direct printing of a page or PDF files without displaying any print settings, you can use the window.print() method.

    import React from 'react'

function PrintButton() {
  const handlePrint = () => {
    window.print()
  }

  return (
    <button onClick={handlePrint}>
      Print
    </button>
  )
}

export default PrintButton
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search