如何在 reactjs 中静默打印 PDF 文件？

Question

const pdfURL = "someurl.com/document.pdf";
const handlePrint = (e: React.FormEvent) => {
        e.preventDefault();
        const win: Window | null = window.open(pdfURL);
        if (win) {
            win.onload = () => {
                win.print();
            };
        }
    };

above code opens PDF file into new tab and then print but I want to print directly without opening it into a new tab.

Answer 1

You can use the window.print() method to print a PDF file silently without opening it in a new tab.

Here's an example of how you can use window.print() to print a PDF file in React:

import React from 'react';

const pdfURL = "someurl.com/document.pdf";

const handlePrint = (e: React.FormEvent) => {
  e.preventDefault();

  // Open the PDF file in an iFrame
  const iFrame = document.createElement('iframe');
  iFrame.src = pdfURL;

  // Append the iFrame to the document
  document.body.appendChild(iFrame);

  // Wait for the iFrame to load, then print the PDF
  iFrame.onload = () => {
    window.print();
  };
};

const MyComponent = () => {
  return (
    <button onClick={handlePrint}>Print PDF</button>
  );
};

export default MyComponent;

This code will create an iframe element, load the PDF file into the iframe, and then print the PDF file when it finishes loading.

Note that this approach will only work if the PDF file is hosted on a server that allows cross-origin resource sharing (CORS). If the PDF file is hosted on a server that does not allow CORS, you will need to use a different approach to print the PDF file silently.

Answer 2

install npm package

npm install print-js --save

Add following code

import print from "print-js";

const pdfURL = "someurl.com/document.pdf"; 

const handlePrint = (e: React.FormEvent) => {

    e.preventDefault();
    print(pdfURL);

};