前端预览pdf有哪些方案

井九

发布于 2026-03-13 08:29:39

一、浏览器原生预览（最简单）

直接使用浏览器内置 PDF viewer。

方式1：iframe / embed / object

<iframe src="/files/demo.pdf" width="100%" height="800px"></iframe>

或

<embed src="/files/demo.pdf" type="application/pdf" width="100%" height="800px">

或

<object data="/files/demo.pdf" type="application/pdf" width="100%" height="800px"></object>

优点

实现极其简单
不需要任何库
浏览器自带缩放、下载、打印

缺点

UI无法定制
不同浏览器体验不同
移动端兼容性差

适用场景

后台管理系统
简单预览

二、Blob URL 预览（接口返回二进制）

如果 后端返回 PDF 二进制，可以这样处理：

async function previewPdf() {
  const res = await fetch("/api/file/pdf");

  const blob = await res.blob();

  const url = URL.createObjectURL(blob);

  window.open(url);
}

或

iframe.src = URL.createObjectURL(blob);

流程：

后端返回 PDF binary
        ↓
fetch / axios
        ↓
new Blob()
        ↓
URL.createObjectURL()
        ↓
iframe / window.open

优点

适合 权限控制下载
可以 鉴权接口

缺点

仍然是浏览器 viewer

三、PDF.js（最主流方案）

最专业、最常见方案。

由 Mozilla 开发的 PDF 渲染库。

安装

npm install pdfjs-dist

示例

import * as pdfjsLib from "pdfjs-dist";

const loadingTask = pdfjsLib.getDocument("/demo.pdf");

loadingTask.promise.then(function(pdf) {

  pdf.getPage(1).then(function(page) {

    const scale = 1.5;

    const viewport = page.getViewport({ scale });

    const canvas = document.getElementById("canvas");

    const context = canvas.getContext("2d");

    canvas.height = viewport.height;
    canvas.width = viewport.width;

    page.render({
      canvasContext: context,
      viewport: viewport
    });

  });

});

HTML

<canvas id="canvas"></canvas>

优点

功能非常强：

页面分页
缩放
搜索
高亮
注释
文本层
自定义 UI

缺点

代码复杂
需要自己实现 UI

四、PDF.js Viewer（官方完整 viewer）

PDF.js 自带完整 viewer：

web/viewer.html

使用方式：

/viewer.html?file=/demo.pdf

示例：

<iframe src="/pdfjs/web/viewer.html?file=/demo.pdf"></iframe>

优点

完整功能：

搜索
目录
缩放
打印
下载
页码

缺点

UI较重
不太容易深度定制

五、Vue / React 组件库

如果你用 Vue / React，可以用封装好的组件。

Vue

Vue PDF

npm install vue-pdf

示例

<pdf src="/demo.pdf"></pdf>

常用库：

库	特点
vue-pdf	简单
vue3-pdfjs	Vue3
pdfvuer	支持分页

React

常用：

react-pdf

安装

npm install react-pdf

示例

<Document file="/demo.pdf">
  <Page pageNumber={1} />
</Document>

六、在线 Office / 文档预览服务

适合 企业网盘 / 文档系统。

例如：

OnlyOffice
Collabora
PDFTron
PSPDFKit

其中：

OnlyOffice
Collabora Online

都支持：

PDF
Word
Excel
PPT

优点

专业文档系统
支持编辑

缺点

部署复杂
资源占用高

七、图片化预览（特殊方案）

将 PDF 转图片：

PDF
 ↓
Image (PNG / JPG)
 ↓
前端展示

后端常用工具：

Ghostscript
ImageMagick

优点

防下载
兼容性好

缺点

失去文本层
不可搜索

八、方案对比（工程选型）

方案	难度	功能	推荐指数
iframe	⭐	⭐	⭐⭐⭐
Blob	⭐⭐	⭐	⭐⭐⭐
PDF.js	⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐⭐
PDF.js viewer	⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐
Vue/React组件	⭐⭐	⭐⭐⭐	⭐⭐⭐⭐
图片化	⭐⭐⭐	⭐	⭐⭐