如何使用JavaScript仅隐藏PDF阅读器中的下载、打印选项？已尝试#end{ display:none; }无效，需实现仅隐藏红色区域功能

Hey there! I get that your CSS attempt (#end{ display:none; }) didn't work—this is super common with PDF viewers because their UI elements are often dynamically generated after the page loads, or your selector might not match the actual elements. Let's fix this with JavaScript, which can target those red-highlighted buttons once they're available.

Step 1: Identify the Right Selectors for Your PDF Viewer #

First, you'll need to pinpoint the exact selectors for the download and print buttons. Open your browser's DevTools (F12), go to the Elements tab, and inspect the buttons you want to hide. Look for unique attributes like title, class, or id:

• Chrome's built-in PDF viewer uses buttons with title="Download" and title="Print"
• PDF.js (a popular open-source viewer) uses buttons with IDs like #download and #print

Step 2: JavaScript Code to Hide the Buttons #

Since PDF viewer elements load after the initial page DOM, we need to wait for them to exist before hiding them. Here's a reliable script:

// Function to target and hide download/print controls
function hidePDFControls() {
  // Adjust these selectors based on what you found in DevTools
  const downloadButton = document.querySelector('[title="Download"]');
  const printButton = document.querySelector('[title="Print"]');

  // Hide each button if it exists
  if (downloadButton) {
    downloadButton.style.display = 'none';
    // Alternatively, delete the element entirely: downloadButton.remove();
  }
  if (printButton) {
    printButton.style.display = 'none';
  }

  // For Chrome's viewer, target the toolbar action container if needed
  const toolbarActions = document.querySelector('.toolbar-actions');
  if (toolbarActions) {
    // Filter out only download/print buttons in the toolbar
    toolbarActions.querySelectorAll('.toolbarButton').forEach(btn => {
      const btnTitle = btn.getAttribute('title');
      if (btnTitle === 'Download' || btnTitle === 'Print') {
        btn.style.display = 'none';
      }
    });
  }
}

// Check for the elements every 500ms until they're hidden
const checkInterval = setInterval(() => {
  hidePDFControls();
  
  // Stop checking once both buttons are hidden
  const downloadBtn = document.querySelector('[title="Download"]');
  const printBtn = document.querySelector('[title="Print"]');
  const isDownloadHidden = !downloadBtn || downloadBtn.style.display === 'none';
  const isPrintHidden = !printBtn || printBtn.style.display === 'none';
  
  if (isDownloadHidden && isPrintHidden) {
    clearInterval(checkInterval);
    console.log("PDF download/print controls hidden successfully!");
  }
}, 500);

Step 3: If Your PDF is in an Iframe #

If the PDF is embedded in an iframe (and it's hosted on the same domain as your page), you'll need to access the iframe's content document:

const pdfIframe = document.getElementById('your-pdf-iframe-id');

// Wait for the iframe to load completely
pdfIframe.addEventListener('load', () => {
  const iframeDocument = pdfIframe.contentDocument || pdfIframe.contentWindow.document;
  
  // Use iframeDocument instead of document to target elements inside the iframe
  const downloadBtn = iframeDocument.querySelector('[title="Download"]');
  const printBtn = iframeDocument.querySelector('[title="Print"]');
  
  if (downloadBtn) downloadBtn.style.display = 'none';
  if (printBtn) printBtn.style.display = 'none';
});

Important Notes #

• Cross-Origin Iframes: If the PDF is hosted on a different domain, browsers will block JavaScript access to the iframe's content for security reasons—this method won't work in that case.
• Viewer Updates: Some PDF viewers (like Chrome's) might change their DOM structure with updates, so you might need to re-check selectors if the script stops working later.

内容的提问来源于stack exchange，提问作者Riya Jakhariya