ViewerJS在Firefox浏览器中PDF第一页显示倒置问题求助

Hey there, I’ve run into exactly this issue before where ViewerJS renders the first PDF page upside down in Firefox when embedded in a modal—super frustrating! Here are a few practical fixes that worked for me, give them a shot:

• Load the iframe after the modal is fully visible
  Firefox tends to miscalculate layout if the iframe loads before the modal is fully rendered. Instead of hardcoding the iframe in your HTML, dynamically insert it once the modal is shown. If you’re using Bootstrap modals, use the shown.bs.modal event:

  // Target your modal and viewer container
  const pdfModal = document.getElementById('pdfModal');
  const viewerContainer = document.getElementById('pdfViewerContainer');
  
  pdfModal.addEventListener('shown.bs.modal', () => {
    const iframe = document.createElement('iframe');
    iframe.src = "/ViewerJS/#../demo/ohm2013.pdf";
    iframe.width = '400';
    iframe.height = '300';
    iframe.setAttribute('allowfullscreen', '');
    iframe.setAttribute('webkitallowfullscreen', '');
    viewerContainer.appendChild(iframe);
  });
  
  // Clean up iframe when modal closes to avoid duplicates
  pdfModal.addEventListener('hidden.bs.modal', () => {
    viewerContainer.innerHTML = '';
  });
  

• Force ViewerJS to re-render after load
  Sometimes Firefox’s rendering engine doesn’t sync up with ViewerJS properly. Trigger a manual refresh once the iframe finishes loading:

  // Add this inside the iframe creation code
  iframe.addEventListener('load', () => {
    const viewerWindow = iframe.contentWindow;
    // Adjust the API call based on your ViewerJS version
    if (viewerWindow?.PDFViewerApplication) {
      viewerWindow.PDFViewerApplication.forceRendering();
    } else if (viewerWindow?.viewer) {
      viewerWindow.viewer.refresh();
    }
  });
  

• Check the PDF’s page rotation metadata
  Oddly enough, some PDFs have hidden rotation settings that Firefox interprets differently than Chrome/Safari. Open your ohm2013.pdf in a tool like Adobe Acrobat, check the first page’s rotation property, and reset it to 0 degrees if it’s set to 180. Re-save and re-upload the PDF—this fixed the issue for me once!

• Adjust modal CSS to avoid transform conflicts
  Many modals use transform: translate(-50%, -50%) for centering, which can mess with Firefox’s iframe rendering. Try replacing that with margin-based centering, or add this CSS to your modal content:

  .modal-content {
    transform: none !important;
    margin: 10% auto;
  }
  

One of these should get your PDF displaying correctly in Firefox. Let me know if you hit any snags!

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