如何在移动端无需下载在线展示网站PDF文件？

一、纯HTML优化方案（优先推荐） #

1. 使用<iframe>替代<object>/<embed> #

<iframe>的浏览器兼容性更好，能在更多移动设备上触发内置PDF查看器，同时添加降级提示内容：

<iframe 
  src="pdf/sample.pdf#view=FitH&toolbar=0" 
  width="100%" 
  height="80vh" 
  frameborder="0"
>
  <!-- 降级提示：当浏览器不支持内嵌查看时显示 -->
  <p>您的浏览器不支持在线查看PDF，请<a href="pdf/sample.pdf">点击下载</a>查看。</p>
</iframe>

• 参数说明：#view=FitH让PDF宽度适配容器，适配移动端；toolbar=0隐藏默认工具栏（部分浏览器支持）。
• 移动端适配：设置height="80vh"让容器占视口高度的80%，避免页面滚动冲突。

2. 配置服务器响应头（关键步骤） #

很多时候浏览器自动下载PDF，是因为服务器返回的Content-Disposition头为attachment，需要修改为inline：

• Apache：在.htaccess中添加

  <FilesMatch "\.pdf$">
    Header set Content-Disposition "inline"
  </FilesMatch>
  

• Nginx：在配置文件中添加

  location ~* \.pdf$ {
    add_header Content-Disposition "inline";
  }
  

该设置会告诉浏览器优先在线打开文件，而非直接下载。

二、前端JS库方案（纯HTML无法满足时） #

如果纯HTML的兼容性仍有问题，可以使用PDF.js（Mozilla开源的PDF渲染库，无需第三方服务），完全本地部署：

1. 基础实现代码 #

<!-- 移动端适配meta标签 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- HTML结构 -->
<div id="pdf-container" style="width: 100%; max-width: 800px; margin: 0 auto;"></div>

<!-- 引入PDF.js（本地托管，不要使用外链） -->
<script src="pdfjs-dist/build/pdf.min.js"></script>
<script src="pdfjs-dist/build/pdf.worker.min.js"></script>

<script>
  // 配置PDF.js的worker路径
  pdfjsLib.GlobalWorkerOptions.workerSrc = 'pdfjs-dist/build/pdf.worker.min.js';

  // 加载并渲染PDF
  async function renderPDF() {
    const url = 'pdf/sample.pdf';
    const pdf = await pdfjsLib.getDocument(url).promise;
    
    // 渲染第一页（可扩展为多页渲染）
    const page = await pdf.getPage(1);
    const viewport = page.getViewport({ scale: window.innerWidth / page.getViewport({ scale: 1 }).width });
    
    const canvas = document.createElement('canvas');
    const context = canvas.getContext('2d');
    canvas.height = viewport.height;
    canvas.width = viewport.width;
    
    document.getElementById('pdf-container').appendChild(canvas);
    
    await page.render({
      canvasContext: context,
      viewport: viewport
    }).promise;
  }

  // 页面加载完成后执行
  window.addEventListener('load', renderPDF);
</script>

2. 扩展功能 #

• 可添加分页导航、缩放按钮，适配移动端触摸操作；
• 所有资源（PDF.js的脚本和worker）均可本地托管，完全不依赖外部服务。

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