如何在Windows 10应用中使用Cordova打印机插件及JS实现打印预览每页页码

Hey there, let's break down your two printing-related questions step by step—I’ve worked with Cordova on Windows 10 apps, so I can walk you through the practical steps here.

1. Using Cordova Printer Plugin in Windows 10 Apps #

First, make sure your Cordova project is set up for the Windows 10 platform. If you haven’t added it yet, run:

cordova platform add windows@10.0.19041.0

(Use the latest compatible Windows platform version for your project.)

Step 1: Install the Printer Plugin #

Open your project’s terminal and install the official Cordova Printer Plugin:

cordova plugin add cordova-plugin-printer

This plugin supports Windows 10 out of the box, so no extra platform-specific tweaks are needed for basic functionality.

Step 2: Check Printer Availability #

Before attempting to print, it’s good practice to verify if a printer is available. Use this snippet:

document.addEventListener("deviceready", function() {
  // Wait for Cordova to be fully loaded
  printer.isAvailable(function(isAvailable) {
    if (isAvailable) {
      console.log("Printer is ready to use");
      // Proceed with printing logic
    } else {
      console.log("No printer found or available");
      // Show error message to user
    }
  });
}, false);

Step 3: Print Content #

You can print HTML, plain text, or local files. Here’s an example of printing a custom HTML document:

var printContent = `
  <h1>My Printable Document</h1>
  <p>This is a sample page printed from a Cordova Windows 10 app.</p>
`;

var printOptions = {
  name: "Sample Document", // Name shown in print dialog
  duplex: "long" // Optional: set duplex mode (long/short/auto)
};

printer.print(printContent, printOptions, function() {
  console.log("Print job sent successfully");
}, function(error) {
  console.error("Print failed:", error);
});

Windows 10 Specific Notes #

• When testing, use the Windows 10 Simulator or a physical Windows device—printing won’t work in a browser preview.
• The plugin will trigger the native Windows print dialog, so users can select printers, adjust settings, and preview before printing.

2. Adding Page Numbers to Every Page in Print Preview with JavaScript #

To add page numbers, you’ll need to use CSS print media queries—this lets you define styles that only apply when printing. JavaScript will help ensure the styles are applied correctly, but the heavy lifting is done by CSS.

Step 1: Add Print-Specific CSS #

Include this CSS in your project (either in a stylesheet or a <style> tag):

@media print {
  /* Ensure body has enough bottom margin for the page number */
  body {
    margin-bottom: 2cm;
  }

  /* Define page settings */
  @page {
    size: A4; /* Set paper size */
    margin: 1cm; /* Set page margins */
  }

  /* Add page number at the bottom of each page */
  body:after {
    content: "Page " counter(page) " of " counter(pages);
    position: fixed;
    bottom: 0;
    right: 1cm;
    font-size: 12px;
    color: #666;
  }
}

Step 2: Force CSS Counter Reset (If Needed) #

In some cases, you might need to reset the page counter manually. Add this JavaScript snippet to ensure the counter works correctly:

// Reset page counter when print is initiated
window.addEventListener("beforeprint", function() {
  document.body.style.counterReset = "page 1";
});

Step 3: Test and Adjust #

• Open your app’s print preview (triggered via the Cordova plugin or a test button) to verify page numbers appear on every page.
• If you need to force a page break at specific points (e.g., after a section), add this CSS to the element:

  .page-break {
    page-break-after: always;
  }
  

  Then add the page-break class to elements where you want a new page to start.

Key Notes #

• This method works in the Cordova Windows 10 app’s WebView, as it uses standard CSS print rules supported by EdgeHTML (the underlying engine for Windows 10 Cordova apps).
• Adjust the bottom and right values in the body:after style to position the page number where you want it.

内容的提问来源于stack exchange，提问作者THIYAGARAJAN RAVICHANDRAN