Django中使用iframe+Google Docs Viewer加载本地PDF无法显示问题

我之前也碰到过一模一样的情况，核心问题其实是Google Docs Viewer需要能被Google服务器公开爬取的URL，哪怕你自己访问{{documento.adjunto.url}}时没有404，但Google的爬虫可能根本拿不到你的文件。下面详细拆解原因和可行的解决方案：

为什么会出现这个问题？ #

1. 内网/本地环境限制：如果你的Django跑在localhost或者内网IP上，Google的服务器根本访问不到你的PDF文件——Gview的工作原理是Google先爬取目标URL的内容，再转换成可嵌入的格式返回给你，爬不到自然显示不了。
2. 登录权限拦截：你的CurriculumDetailView加了@login_required，当Google的请求过来时，它没有携带你的登录Session/Cookie，实际访问PDF时会被跳转到登录页面，Gview解析不了登录页的HTML，所以无法正常渲染PDF。

解决方案 #

方案1：直接嵌入PDF（最简单，推荐内网/开发环境用） #

不需要依赖Google的服务，直接用iframe加载本地PDF的URL就行，浏览器会用内置的PDF阅读器打开：

<div class="container">
  <div class="row">
    <div class="col-lg-12">
      <iframe src="{{ documento.adjunto.url }}" style="width:600px; height:450px;" frameborder="0"></iframe>
    </div>
  </div>
</div>

这个方案完全不依赖外部服务，还不受登录权限影响——因为请求是用户自己的浏览器发起的，携带了登录状态，能正常访问受保护的媒体文件。

方案2：让PDF对Google公开可访问（仅适合公网且无权限要求的场景） #

如果你一定要用Google Docs Viewer，得让PDF的URL能被Google无权限访问：

1. 在urls.py中添加一个不需要登录的媒体文件访问路由：

from django.views.static import serve
from django.conf import settings
import os

# 假设你的UPLOAD_CVS是'cvs/'，根据实际上传路径调整
CV_UPLOAD_ROOT = os.path.join(settings.MEDIA_ROOT, 'cvs')

urlpatterns += [
    path('public-cvs/<path:path>', serve, {'document_root': CV_UPLOAD_ROOT}, name='public_cv'),
]

2. 在模板中使用这个公开URL生成Gview链接：

<div class="container">
  <div class="row">
    <div class="col-lg-12">
      {% with public_pdf_url=request.scheme|add:"://"|add:request.get_host|add:reverse('public_cv', args=[documento.adjunto.name]) %}
        <iframe src="http://docs.google.com/gview?url={{ public_pdf_url|urlencode }}&embedded=true" style="width:600px; height:450px;" frameborder="0"></iframe>
      {% endwith %}
    </div>
  </div>
</div>

⚠️ 注意：这个方案会让所有CV文件公开可访问，任何人知道URL就能下载，如果你需要权限控制，不要用这个方法。

方案3：使用开源PDF.js查看器（最稳定，适合生产环境） #

用Mozilla的PDF.js库，完全可控，不需要依赖外部服务，还支持权限验证：

1. 在模板中引入PDF.js的CDN和初始化代码：

<div class="container">
  <div class="row">
    <div class="col-lg-12">
      <div id="pdf-container" style="width:600px; height:450px; border:1px solid #eee;"></div>
    </div>
  </div>
</div>

<script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>
<script>
  const pdfUrl = "{{ documento.adjunto.url }}";
  const pdfjsLib = window['pdfjs-dist/build/pdf'];
  
  // 设置Worker脚本地址
  pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://mozilla.github.io/pdf.js/build/pdf.worker.js';

  async function loadPDF() {
    try {
      const pdf = await pdfjsLib.getDocument(pdfUrl).promise;
      // 渲染第一页
      const page = await pdf.getPage(1);
      const viewport = page.getViewport({ scale: 1.2 });
      
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');
      canvas.width = viewport.width;
      canvas.height = viewport.height;
      
      document.getElementById('pdf-container').appendChild(canvas);
      
      await page.render({
        canvasContext: ctx,
        viewport: viewport
      }).promise;
    } catch (error) {
      console.error('加载PDF失败:', error);
      document.getElementById('pdf-container').innerHTML = '<p style="padding:20px;">无法加载PDF文件，请检查文件是否有效。</p>';
    }
  }

  // 页面加载完成后渲染PDF
  window.addEventListener('load', loadPDF);
</script>

这个方案的好处是：完全由你控制，支持登录权限（请求是用户浏览器发起的，携带了Session），还能自定义样式和分页等功能。

额外排查点 #

• 先直接在浏览器打开{{ documento.adjunto.url }}对应的URL，确认PDF本身能正常打开，排除文件损坏的问题
• 打开浏览器控制台（F12），查看Network标签，看Google Docs Viewer的请求是否有报错，或者返回的内容是不是登录页面（如果是，说明权限拦截了请求）

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