大文件长时间无法内联显示：受限PDF页面iframe加载问题咨询

Hey there, let's tackle this large PDF inline loading issue you're facing—super common with big documents, so we've got a few solid approaches to try:

Start with the source file itself—smaller PDFs load faster by default:

• Compress the PDF: Use command-line tools like Ghostscript to shrink file size without losing too much quality for web viewing. Try this command:

  gs -sDEVICE=pdfwrite -dCompatibilityLevel=1.4 -dPDFSETTINGS=/screen -dNOPAUSE -dQUIET -dBATCH -sOutputFile=compressed.pdf input.pdf
  

  The /screen setting optimizes for screen resolution (72 DPI) and compresses images/fonts aggressively.
• Split large PDFs: If your document is multi-chapter or multi-section, split it into smaller, focused files. Update your navigation bar to let users switch between these smaller PDFs instead of loading one huge file.
• Remove redundant content: Strip out embedded fonts you don't need (keep only font subsets), downscale high-resolution images to 72 DPI, and delete unused layers or annotations.

Your PHP script can be adjusted to support partial loading, which is a game-changer for large files:

• Enable Byte-Range Requests: Let browsers download the PDF in chunks instead of all at once. Add this logic to falr_pdf.php to handle Range headers:

  $file = '/path/to/authorized.pdf';
  $filesize = filesize($file);
  
  if (isset($_SERVER['HTTP_RANGE'])) {
      list(, $range) = explode('=', $_SERVER['HTTP_RANGE']);
      list($start, $end) = explode('-', $range);
      $start = intval($start);
      $end = $end ? intval($end) : $filesize - 1;
      $length = $end - $start + 1;
  
      header('HTTP/1.1 206 Partial Content');
      header("Content-Range: bytes $start-$end/$filesize");
  } else {
      $start = 0;
      $end = $filesize - 1;
      $length = $filesize;
  }
  
  header('Content-Type: application/pdf');
  header('Content-Length: ' . $length);
  header('Accept-Ranges: bytes');
  header('Cache-Control: public, max-age=86400'); // Cache for 1 day
  
  $fp = fopen($file, 'rb');
  fseek($fp, $start);
  echo fread($fp, $length);
  fclose($fp);
  exit;
  

  This lets browsers request only the parts of the PDF they need (e.g., the first few pages) instead of the entire file.
• Add caching: Set proper Cache-Control headers so repeat visitors don't re-download the same PDF.

Instead of relying on the browser's built-in PDF viewer via iframe, use a library like PDF.js that supports progressive loading:

• Embed PDF.js in your page: Swap the iframe for a container where PDF.js renders pages on demand. Here's a basic example:

  <div id="pdf-viewer"></div>
  <script src="/path/to/pdf.js"></script>
  <script>
    // Point to your authorized PDF endpoint
    const pdfUrl = 'falr_pdf.php?file=large-document.pdf';
    
    pdfjsLib.getDocument(pdfUrl).promise.then(pdf => {
      // Render the first page immediately
      pdf.getPage(1).then(page => {
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
        const viewport = page.getViewport({ scale: 1.2 });
        
        canvas.height = viewport.height;
        canvas.width = viewport.width;
        document.getElementById('pdf-viewer').appendChild(canvas);
        
        page.render({ canvasContext: ctx, viewport: viewport });
      });
      
      // Add pagination controls to load other pages as needed
    });
  </script>
  

  PDF.js only loads and renders the pages the user is viewing, so even 100MB PDFs feel fast.

• Add a "Download Full PDF" button: Let users choose to download the file directly instead of waiting for inline loading, especially for large documents.
• Show loading feedback: Add a progress bar or loading spinner while the PDF loads, so users know the system is working (e.g., "Loading page 1 of 50...").
• Conditional loading: Set a file size threshold (e.g., 50MB) — for files larger than this, default to showing the download button first, with an option to load inline if the user prefers.

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