Vue.js如何仅在打印时显示指定元素？

Absolutely, this is totally feasible with a combination of CSS media queries and a touch of JavaScript—perfect for your exact use case! Let’s walk through the solution step by step:

Step 1: Hide the "Pay Now" Button When Printing #

First, we’ll use a CSS print media query to ensure the button doesn’t show up when the user prints or enters print preview. This is straightforward:

/* Targets only when the document is being printed or in print preview */
@media print {
  .pay-now-btn {
    display: none !important;
  }
}

Just add the pay-now-btn class to your existing button element, and it’ll vanish as soon as print mode is triggered. The !important ensures this overrides any other existing styles on the button.

Step 2: Show the Payment Message Only During Print Preview #

Next, we need to make the "Visit www.example.com to pay now" text appear only when the user initiates print preview, and disappear once they exit it. We’ll use a mix of CSS fallback and JavaScript event listeners for full reliability:

HTML Structure #

First, add your message element to the page, hidden by default:

<button class="pay-now-btn">Pay Now</button>
<p class="print-pay-message" style="display: none;">Visit www.example.com to pay now</p>

CSS Fallback #

Add this to your stylesheet to ensure the message shows up in print mode, even if JavaScript isn’t available:

@media print {
  .print-pay-message {
    display: block !important;
  }
}

JavaScript for Preview State Management #

To handle hiding the message when the user exits print preview, we’ll listen to the browser’s beforeprint and afterprint events:

const printMessage = document.querySelector('.print-pay-message');

// Show the message right before print preview opens
window.addEventListener('beforeprint', () => {
  printMessage.style.display = 'block';
});

// Hide the message once the user exits print preview
window.addEventListener('afterprint', () => {
  printMessage.style.display = 'none';
});

This combination works seamlessly across all modern browsers. The CSS ensures the message appears in the printed output, while the JavaScript takes care of showing/hiding it in the preview window itself.

Quick Notes #

• Make sure your class names are unique to avoid conflicting with other elements on your page.
• The !important declarations are optional if you know your styles won’t be overridden elsewhere, but they’re a safe bet for consistency.
• Browser support for beforeprint and afterprint is excellent—all major browsers (Chrome, Firefox, Safari, Edge) support these events.

内容的提问来源于stack exchange，提问作者Courtney Erickson