无需Google Drive，如何在安卓版Chrome浏览器中嵌入可查看的PDF？

Chrome早就停止支持用<embed>标签嵌入PDF了，针对安卓Chrome环境，不用依赖Google Drive的可行办法如下：

方案1：用PDF.js（纯前端JS库） #

这是最靠谱的方案，靠纯JavaScript渲染PDF，不依赖浏览器原生的PDF插件：

1. 把PDF.js的核心库文件（pdf.js和pdf.worker.js）放到你的网站目录里
2. 在网页里加个容器用来显示PDF：

<div id="pdf-container" style="width: 500px; height: 400px;"></div>

3. 引入PDF.js并写渲染代码：

// 配置PDF.js的工作脚本路径
pdfjsLib.GlobalWorkerOptions.workerSrc = 'pdf.worker.js';

// 加载并渲染PDF的函数
async function renderPdf() {
  const pdfUrl = 'a.pdf'; // 你的PDF文件路径
  const container = document.getElementById('pdf-container');
  
  // 获取PDF文档实例
  const pdf = await pdfjsLib.getDocument(pdfUrl).promise;
  // 渲染第一页，要显示多页的话可以循环处理所有页码
  const page = await pdf.getPage(1);
  // 设置渲染的视口大小
  const viewport = page.getViewport({ scale: 1.5 });
  
  // 创建canvas元素用来绘制PDF内容
  const canvas = document.createElement('canvas');
  const context = canvas.getContext('2d');
  canvas.height = viewport.height;
  canvas.width = viewport.width;
  container.appendChild(canvas);
  
  // 渲染页面到canvas上
  await page.render({ canvasContext: context, viewport: viewport }).promise;
}

// 页面加载完成后自动执行渲染
window.onload = renderPdf;

这种方式完全在前端处理，所有浏览器（包括安卓Chrome）都能正常显示，不用依赖任何外部服务。

方案2：试试<object>标签（兼容性一般） #

有些环境下<object>标签可能能用，但不如PDF.js稳定，可以试试：

<object data="a.pdf" type="application/pdf" width="500" height="400">
  <!-- 浏览器不支持时显示备用内容 -->
  无法在线查看PDF，请<a href="a.pdf">点击下载</a>
</object>

不过安卓Chrome大概率还是会直接下载PDF而不是嵌入显示，所以优先推荐PDF.js方案。

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