自定义PDF查看组件在IE及Edge中无法加载的问题求助

Hey there! Let's work through this PDF display issue you're seeing with Edge and IE11—those legacy browsers have notoriously spotty support for custom PDF embedding approaches, but we have solid fixes to get your study materials visible to all users.

Why This Happens #

Your current custom pdf-viewer class works great in Chrome and Firefox because those modern browsers have built-in PDF rendering engines that can parse and display PDFs in custom containers. However, IE11 and older versions of Edge rely on either the Adobe Reader plugin (which many users might not have installed or enabled) or have limited native support that doesn't play nice with your custom setup.

Solution 1: Fallback to Native <object>/<embed> Tags #

You can add browser-specific fallbacks that use the native PDF support in IE11 and Edge. Here's how to modify your code:

<div class="col-sm-9">
  <!-- Modern browser viewer (kept for Chrome/Firefox) -->
  <div id="modern-viewer" class="pdf-viewer" oncontextmenu="return false" data-url="../sadmin/studyMaterial/<?php echo $db->idToField("tbl_studymaterials", "file_pdf", $chapterId) ; ?>"></div>

  <!-- IE11 fallback using <object> -->
  <!--[if IE]>
  <div id="ie-viewer" style="height:400px;">
    <object 
      data="../sadmin/studyMaterial/<?php echo $db->idToField("tbl_studymaterials", "file_pdf", $chapterId) ; ?>" 
      type="application/pdf" 
      width="100%" 
      height="100%"
    >
      <p>无法加载PDF文件，请<a href="../sadmin/studyMaterial/<?php echo $db->idToField("tbl_studymaterials", "file_pdf", $chapterId) ; ?>">点击下载</a>查看。</p>
    </object>
  </div>
  <![endif]-->

  <!-- Old Edge fallback using JavaScript -->
  <script>
    // Detect old Edge (not Chromium-based Edge)
    if (/Edge\/\d+/.test(navigator.userAgent)) {
      document.getElementById('modern-viewer').style.display = 'none';
      const embed = document.createElement('embed');
      embed.src = '../sadmin/studyMaterial/<?php echo $db->idToField("tbl_studymaterials", "file_pdf", $chapterId) ; ?>';
      embed.type = 'application/pdf';
      embed.width = '100%';
      embed.height = '400px';
      embed.style.border = '1px solid #ddd';
      document.querySelector('.col-sm-9').appendChild(embed);
    }
  </script>
</div>

• IE11: Uses conditional comments (only recognized by IE) to show an <object> tag, which triggers the browser's native PDF plugin.
• Old Edge: Uses JavaScript to detect the browser, hide your modern viewer, and inject an <embed> tag that Edge can handle.

Solution 2: Use PDF.js for Cross-Browser Consistency #

For the most reliable experience across all browsers (including IE11), I recommend using PDF.js—Mozilla's open-source PDF rendering library. It doesn't rely on browser plugins and renders PDFs directly in the browser using JavaScript.

Here's how to implement it:

1. Download the latest PDF.js package from the official repository (save it locally on your server, no external links needed).
2. Update your HTML to use PDF.js's built-in viewer:

<div class="col-sm-9">
  <div id="viewer" class="pdf-viewer" oncontextmenu="return false" style="height:400px; overflow:hidden; border-radius:4px;">
    <iframe 
      src="/path/to/pdfjs/web/viewer.html?file=<?php echo urlencode("../sadmin/studyMaterial/" . $db->idToField("tbl_studymaterials", "file_pdf", $chapterId)) ; ?>" 
      width="100%" 
      height="100%" 
      frameborder="0"
      oncontextmenu="return false"
    ></iframe>
  </div>
</div>

• Replace /path/to/pdfjs/ with the actual path where you saved the PDF.js files on your server.
• The urlencode() ensures special characters in your PDF filename don't break the link.
• PDF.js will handle rendering consistently across Chrome, Firefox, Edge, and IE11, and you can customize the viewer's appearance to match your site's style.

Critical: Add a Download Fallback #

No matter which solution you choose, always include a direct download link for users who can't render the PDF in the browser. This ensures everyone can access the study materials, even if their browser or plugin setup is incompatible.

Final Recommendation #

Go with the PDF.js approach if you can—it provides the most consistent user experience and eliminates reliance on browser-specific plugins. If you prefer a lighter solution without adding a library, the fallback tags will work for IE11 and old Edge.

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