Several printing methods in js

Method 1: Use `printJs`the library to implement the printing function

1. Introduce plug-ins:

First, include the library in your HTML file printJs. <head>Library files can be introduced by adding the following code in the tag:

<script src="https://printjs-4de6.kxcdn.com/print.min.js"></script>
<link rel="stylesheet" href="https://printjs-4de6.kxcdn.com/print.min.css">

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

2. Create a print button:

Create a button in your HTML file that triggers the print action. For example:

<button id="printButton">Print</button>

3. Add a print event listener:

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

document.getElementById('printButton').addEventListener('click', function() {
    
    
  printJS({
    
    
    printable: 'myElementId', // 要打印的元素的ID
    type: 'html'
  });
});

In the above code, myElementIdreplace with the actual ID of the element you want to print. You can print the entire page or specify specific elements to print.

The complete sample code is as follows:

<!DOCTYPE html>
<html>
<head>
  <title>PrintJS Example</title>
  <script src="https://printjs-4de6.kxcdn.com/print.min.js"></script>
  <link rel="stylesheet" href="https://printjs-4de6.kxcdn.com/print.min.css">
</head>
<body>
  <h1>PrintJS Example</h1>
  <div id="myElementId">
    <p>This is the content to be printed.</p>
  </div>
  <button id="printButton">Print</button>

  <script>
    document.getElementById('printButton').addEventListener('click', function() {
      
      
      printJS({
      
      
        printable: 'myElementId',
        type: 'html'
      });
    });
  </script>
</body>
</html>

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

Please note that in order for this to printJswork properly, you need to ensure that your web page printJshas loaded the jQuery library before loading the library, as printJsit depends on jQuery.

Hopefully this detailed tutorial will help you printJsimplement printing functionality using the library

Here are the detailed steps for implementing printing functionality using different methods:

Method 2: `window.print()`How to use

Create a button in your HTML file that triggers the print action. For example:

<button id="printButton">Print</button>

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

document.getElementById('printButton').addEventListener('click', function() {
    
    
  window.print();
});

Method 3: `window.open()`How to use

Create a button in your HTML file that triggers the print action. For example:

<button id="printButton">Print</button>

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

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

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');
ipcRenderer.send('print');

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

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

Hope these detailed steps can help you implement the printing function

scenes to be used

`window.print()`How to use

scenes to be used:

This is an easy and convenient method when you just need to simply print out the entire page.

advantage:

Simple and easy to use, no need to introduce additional libraries or dependencies.
The entire page can be printed.

shortcoming:

The printed style and layout may not exactly match what appears on the screen.
There is no way to selectively print specific elements or content.

`window.open()`How to use

scenes to be used:

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

advantage:

The style and layout of printed content can be customized.
Specific elements or content can be printed selectively.

shortcoming:

You need to manually write the HTML code to print the content.
The printing operation will pop up a new browser window.

Use Electron printing function

scenes to be used:

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

advantage:

Printing functionality can be easily implemented in Electron applications.
You can use the API provided by Electron for more advanced printing control and customization.

shortcoming:

Requires setup and configuration in the Electron application.
Only available for Electron framework.

Print.js

scenes to be used:

Print.js is a great choice when you need more flexible and customizable printing functionality in your browser.
Suitable for situations where you need to print specific elements or content, as well as when you need to customize printing styles and layouts.

advantage:

Provides a rich API and options to customize the style, layout and behavior of printed content.
Supports printing of HTML elements, PDF files and images.
Compatible with various browsers and devices.

shortcoming:

Additional libraries and dependencies need to be introduced.
A certain amount of learning and configuration costs are required.

Depending on your specific needs and usage environment, you can choose a method that suits you to implement the printing function. Hope this information is helpful to you