Skip to content

Browser PDF Not Rendering Fix

DodaTech Updated 2026-06-24 3 min read

In this tutorial, you'll learn about Browser PDF Not Rendering Fix. We cover key concepts, practical examples, and best practices to help you understand and apply this topic effectively.

Modern browsers include built-in PDF viewers. When PDFs fail to render, the cause is usually missing MIME types, incorrect Content-Disposition headers, corrupted PDF files, or browser extension conflicts.

The Wrong Way

from flask import Flask, send_file

app = Flask(__name__)

@app.route("/report")
def serve_pdf():
    # No Content-Type or Content-Disposition headers
    return send_file("report.pdf")

Output:

# Browser shows raw PDF text instead of rendering
%PDF-1.4 %âãÏÓ 4 0 obj ...
# Or downloads the file instead of displaying inline

The Right Way

Set correct PDF headers for inline viewing:

from flask import Flask, send_file, Response

app = Flask(__name__)

@app.route("/report")
def serve_pdf():
    with open("report.pdf", "rb") as f:
        pdf_data = f.read()

    return Response(
        pdf_data,
        mimetype="application/pdf",
        headers={
            "Content-Disposition": "inline; filename=report.pdf",
            "Content-Length": str(len(pdf_data)),
            "Cache-Control": "public, max-age=3600"
        }
    )

Step-by-Step Fix

1. Check Content-Type header

curl -I https://example.com/report.pdf
# Should show: Content-Type: application/pdf
# If missing or wrong (text/plain, application/octet-stream), fix the server

2. Verify Content-Disposition

# For inline viewing in browser:
# Content-Disposition: inline; filename="report.pdf"

# For download:
# Content-Disposition: attachment; filename="report.pdf"

3. Check if the PDF file is valid

import PyPDF2

def validate_pdf(filepath):
    try:
        with open(filepath, "rb") as f:
            reader = PyPDF2.PdfReader(f)
            pages = len(reader.pages)
            print(f"PDF valid: {pages} pages")
            return True
    except PyPDF2.errors.PdfReadError as e:
        print(f"Corrupted PDF: {e}")
        return False

4. Configure PDF MIME types in web server

# Nginx
types {
    application/pdf pdf;
}

location /pdf/ {
    add_header Content-Disposition "inline";
}

5. Disable PDF viewer extensions

// Check if PDF is loading
const pdfViewer = document.querySelector("embed[type='application/pdf']");
if (pdfViewer) {
    pdfViewer.onerror = () => {
        console.log("PDF failed to load, offering download instead");
        showDownloadLink();
    };
}

6. Use PDF.js as a fallback viewer

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>

<canvas id="pdf-viewer"></canvas>
<script>
pdfjsLib.getDocument("/report.pdf").promise.then(pdf => {
    pdf.getPage(1).then(page => {
        const canvas = document.getElementById("pdf-viewer");
        const context = canvas.getContext("2d");
        const viewport = page.getViewport({scale: 1.5});
        canvas.width = viewport.width;
        canvas.height = viewport.height;
        page.render({canvasContext: context, viewport: viewport});
    });
}).catch(error => {
    console.error("PDF render failed:", error);
});
</script>

Prevention Tips

  • Serve PDFs with Content-Type: application/pdf and Content-Disposition: inline.
  • Validate PDFs server-side before serving to detect corruption.
  • Use PDF.js as a fallback viewer for browsers without native PDF support.
  • Set correct MIME types in your web server configuration.
  • Avoid browser extensions that interfere with PDF viewing.

Common Mistakes with pdf not rendering

  1. Using foldl instead of foldl' causing stack overflow on large lists
  2. Forgetting deriving (Show, Eq) on custom data types needed for debugging
  3. Placing the wildcard pattern first in case expressions, making all subsequent patterns unreachable

These mistakes appear frequently in real-world BROWSER code. DodaTech's contributors have identified these patterns through analysis of open-source projects and production systems.

Practice Exercise

Write a pure function that safely divides two integers using Maybe, then test it with edge cases like division by zero and negative numbers.

This exercise reinforces the concepts covered in this guide. Try implementing it before checking online solutions.

FAQ

### Why does the browser download the PDF instead of showing it?

The server sends Content-Disposition: attachment instead of inline. Change the header to inline for browser rendering. Also ensure Content-Type: application/pdf is set.

Why does PDF show as blank in Chrome?

Common causes: corrupted PDF file, missing fonts embedded in the PDF, or the PDF was created with unsupported features. Try opening in Acrobat Reader, or regenerate the PDF.

Can I embed a PDF viewer in my web page?

Yes. Use the <embed> tag with type="application/pdf" and src pointing to the PDF URL, or use PDF.js for full control over rendering and navigation.

Built by the developers of Doda Browser, DodaZIP, and Durga Antivirus Pro.

← Previous Browser Push Notification Blocked Fix Next → Browser Service Worker Registration Error Fix

Built by the developers of DodaTech

Doda Browser, DodaZIP & Durga Antivirus Pro

Home Browse Quick Fix