SoFunction
Updated on 2025-04-10

Several methods of JS printing method

Method 1: Use printJs library to implement printing function

1. Introduce plug-ins:

First, introduce the printJs library into your HTML file. The library file can be introduced by adding the following code to the <head> tag:

<script src="/"></script>
<link rel="stylesheet" href="/" rel="external nofollow"  rel="external nofollow" >

This will load the printJs library's JavaScript and CSS files from the CDN.

2. Create a print button:

Create a button in your HTML file to trigger the print operation. For example:

<button >Print</button>

3. Add a print event listener:

In your JavaScript file, add a click event listener using the following code to trigger the print operation when the user clicks the print button:

('printButton').addEventListener('click', function() {
  printJS({
    printable: 'myElementId', // The ID of the element to be printed    type: 'html'
  });
});

In the above code, replace myElementId with the actual ID of the element to be printed. You can print the entire page or specify the specific element to print.

The complete example code is as follows:

<!DOCTYPE html>
<html>
<head>
  <title>PrintJS Example</title>
  <script src="/"></script>
  <link rel="stylesheet" href="/" rel="external nofollow"  rel="external nofollow" >
</head>
<body>
  <h1>PrintJS Example</h1>
  <div >
    <p>This is the content to be printed.</p>
  </div>
  <button >Print</button>
  <script>
    ('printButton').addEventListener('click', function() {
      printJS({
        printable: 'myElementId',
        type: 'html'
      });
    });
  </script>
</body>
</html>

In the example above, when the user clicks the "Print" button, a print operation will be triggered to print the content in <div>.

Note that in order for printJs to work properly, you need to make sure your web page has the jQuery library loaded before the printJs library is loaded, because printJs depends on jQuery.

Hope this detailed tutorial can help you use the printJs library to implement printing functions

Here are the detailed steps to implement printing functions using different methods:

Method 2: Use the () method

Create a button in your HTML file to trigger the print operation. For example:

<button >Print</button>

Add a print event listener: In your JavaScript file, add a click event listener using the following code to trigger the print operation when the user clicks the print button:

('printButton').addEventListener('click', function() {
  ();
});

Method 3: Use the () method

Create a button in your HTML file to trigger the print operation. For example:

<button >Print</button>

Add a print event listener: In your JavaScript file, add a click event listener using the following code to trigger the print operation when the user clicks the print button:

('printButton').addEventListener('click', function() {
  var printWindow = ('', '_blank');
  ();
  ('<html><head><title>Print</title></head><body>');
  ('<h1>Content to be printed</h1>');
  ('</body></html>');
  ();
  ();
});

Method 4: Use Electron Printing Function

In the rendering process, use the following code to send a print message to the main process:

const { ipcRenderer } = require('electron');
('print');

In the main process, use the following code to listen for the print message and trigger the print operation:

const { ipcMain, BrowserWindow } = require('electron');
('print', (event) => {
  let win = ();
  ();
});

Hope these detailed steps will help you implement the printing function

Use scenarios

Use the() method

Use scenarios:

  • This is an easy and convenient way to do it when you just need to simply print out the entire page.

advantage:

  • Easy to use, no need to introduce additional libraries or dependencies.
  • You can print the contents of the entire page.

shortcoming:

  • The style and layout of the print may not be exactly the same as what is displayed on the screen.
  • It is impossible to selectively print a specific element or content.

Use the() method

Use scenarios:

  • This is a more flexible approach when you want to customize the style and layout of your print content, or just want to print specific elements.

advantage:

  • You can customize the style and layout of the print content.
  • A specific element or content can be optionally printed.

shortcoming:

  • HTML code that prints content needs to be written manually.
  • A new browser window will pop up when the print operation.

Use Electron Printing

Use scenarios:

  • This is a suitable method when you are developing a desktop application using the Electron framework and need to implement printing in the application.

advantage:

  • Printing is conveniently implemented in the Electron application.
  • More advanced print control and customization can be used using the API provided by Electron.

shortcoming:

  • Need to be set up and configured in the Electron application.
  • Applicable to Electron frameworks only.

Use scenarios:

  • It is a great choice when you need to implement more flexible and customized printing functions in your browser.
  • Suitable for situations where specific elements or content are required to print, as well as for custom print styles and layouts.

advantage:

  • Provides rich APIs and options to customize the style, layout, and behavior of print content.
  • Supports printing of HTML elements, PDF files and images.
  • Compatible with a variety of browsers and devices.

shortcoming:

  • Additional libraries and dependencies are required.
  • It requires certain learning and configuration costs.
  • Depending on your specific needs and usage environment, you can choose the method that suits you to implement the printing function.

This is the end of this article about several methods of JS printing. For more related JS printing, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!