如何在IE浏览器中启用PDF.js阅读器的演示模式？

Hey there, let's work through this IE compatibility issue with PDF.js's presentation mode—those old IE quirks can be tricky, but we've got actionable options to try:

1. Verify PDF.js Version & Add Polyfills #

First, double-check which version of PDF.js you're using. Newer releases often drop support for older browsers like IE11 and below. If you need IE compatibility, stick to a legacy-compatible version (look for releases that explicitly mention IE11 support in their documentation).

Additionally, IE lacks support for many modern JavaScript features (like ES6+ syntax) that PDF.js relies on. Add polyfills to fill these gaps:

• Include core-js or babel-polyfill in your project to patch missing APIs like Promise, Array.prototype.includes, etc.
• Make sure the polyfills load before PDF.js itself, so the environment is ready when PDF.js initializes.

2. Patch the Fullscreen API for IE #

PDF.js's presentation mode likely uses the standard requestFullscreen API, which IE doesn't support natively—it uses msRequestFullscreen instead. You can wrap the fullscreen logic to add IE compatibility:

// Custom cross-browser fullscreen function
function triggerFullscreen(element) {
  if (element.requestFullscreen) {
    element.requestFullscreen();
  } else if (element.msRequestFullscreen) {
    // IE-specific fullscreen call
    element.msRequestFullscreen();
  } else if (element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
  } else if (element.webkitRequestFullscreen) {
    element.webkitRequestFullscreen();
  }
}

// Hook into PDF.js's presentation mode trigger (example for default viewer)
document.querySelector('#presentationModeButton')?.addEventListener('click', (e) => {
  e.preventDefault();
  const viewerContainer = document.querySelector('#viewerContainer');
  triggerFullscreen(viewerContainer);
  // Add logic to hide UI controls if needed
});

3. Build a Custom Presentation Workflow #

If patching PDF.js's built-in mode is too cumbersome, extend your current "new tab" approach with a custom setup:

• When opening the PDF in a new tab, append a query parameter like ?mode=presentation to the URL.
• In the new tab's PDF.js viewer, add a script that checks for this parameter on load:

  window.addEventListener('load', () => {
    if (new URLSearchParams(window.location.search).get('mode') === 'presentation') {
      // Trigger custom fullscreen
      const viewer = document.querySelector('#viewer');
      triggerFullscreen(viewer);
      // Auto-hide UI elements
      document.querySelector('#toolbarContainer').style.display = 'none';
      document.querySelector('#sidebarContainer').style.display = 'none';
      // Add keyboard navigation for slides
      document.addEventListener('keydown', (e) => {
        if (e.key === 'ArrowRight') {
          window.PDFViewerApplication.nextPage();
        } else if (e.key === 'ArrowLeft') {
          window.PDFViewerApplication.previousPage();
        }
      });
    }
  });
  

4. Check IE-Specific PDF Loading Issues #

IE can struggle with PDFs loaded via modern methods like the Fetch API. Switch to XMLHttpRequest, which IE supports:

function loadPDF(url) {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.responseType = 'blob';
  xhr.onload = () => {
    if (xhr.status === 200) {
      const blob = xhr.response;
      window.PDFViewerApplication.open(blob);
    }
  };
  xhr.send();
}

Start with polyfills and the fullscreen patch—those are the quickest wins. If those don't resolve the issue, the custom presentation workflow should get you up and running in IE.

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