求助：移动端浏览器无需下载在线查看PDF的HTML/JS方案

我之前做移动端项目时也踩过这个PDF预览的坑，试了好几种方法才找到靠谱的，给你分享几个纯HTML/JS就能实现的方案：

方案一：使用PDF.js（最稳定的纯前端方案） #

PDF.js是Mozilla开源的纯前端PDF渲染库，完全基于HTML5/JS，不需要后端支持，能在几乎所有移动端浏览器里直接渲染PDF内容，不会触发自动下载。

实现步骤： #

1. 引入PDF.js的CDN资源（无需下载本地文件）
2. 在页面中添加一个容器用于渲染PDF
3. 编写JS代码加载并渲染PDF

<!-- HTML结构 -->
<div id="pdf-container" style="width: 100%; height: 100vh;"></div>

<!-- 引入PDF.js CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>

<script>
// JS渲染逻辑
const pdfUrl = "你的PDF文件链接";
const container = document.getElementById('pdf-container');

// 初始化PDF.js
pdfjsLib.getDocument(pdfUrl).promise.then(pdf => {
  // 渲染所有页面（可按需调整为单页渲染）
  for (let pageNum = 1; pageNum <= pdf.numPages; pageNum++) {
    pdf.getPage(pageNum).then(page => {
      const scale = 1.5; // 适配移动端的缩放比例，可根据屏幕调整
      const viewport = page.getViewport({ scale });
      
      // 创建canvas元素承载PDF内容
      const canvas = document.createElement('canvas');
      const context = canvas.getContext('2d');
      canvas.height = viewport.height;
      canvas.width = viewport.width;
      container.appendChild(canvas);
      
      // 将PDF页面渲染到canvas
      const renderContext = {
        canvasContext: context,
        viewport: viewport
      };
      page.render(renderContext);
    });
  }
}).catch(error => {
  console.error('加载PDF失败:', error);
});
</script>

注意点： #

• 确保你的PDF链接支持跨域访问（CORS），否则PDF.js会加载失败；如果是自有服务器，需配置CORS允许当前域名访问
• 可根据移动端屏幕尺寸动态调整scale值，优化显示效果

方案二：优化<embed>标签属性（最简单的快速尝试方案） #

之前你用<embed>可能是属性配置不全，试试添加这些属性，部分移动端浏览器会改变默认行为，从下载转为在线预览：

<embed 
  src="你的PDF文件链接" 
  type="application/pdf" 
  width="100%" 
  height="100vh" 
  allow="fullscreen"
  title="在线预览PDF"
>

为什么可能有效： #

• width="100%" height="100vh"让PDF占满整个视口，浏览器会判定这是需要直接显示的内容而非待下载文件
• allow="fullscreen"给浏览器明确的交互权限，部分浏览器会因此启用预览模式

方案三：用<a>标签打开新标签页预览（依赖浏览器支持） #

如果上面的方法都不行，可以试试用<a>标签在新标签页打开PDF，去掉download属性，让浏览器自行判断是否预览：

<a 
  href="你的PDF文件链接" 
  target="_blank" 
  rel="noopener noreferrer"
>
  点击在线查看PDF
</a>

注意： #

这个方案的效果取决于浏览器默认设置，比如Chrome移动端通常会自动预览，而部分小众浏览器可能还是会下载，但胜在实现简单，可作为备选。

为什么之前的方法失效？ #

• object/frame标签：移动端浏览器对这类标签的PDF处理逻辑差异极大，大部分默认触发下载而非预览
• Google Docs预览：依赖Google服务器解析PDF，若文件过大、加密或格式特殊，就会出现“NO Preview Available”错误，稳定性不足

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